<style>

Время чтения: меньше 5 мин

Кратко

Секция статьи "Кратко"

Внутри тега <style> можно задать параметры для CSS-стилей, которые применяются на странице. В общем, тут ты описываешь, как будут выглядеть заголовки, ссылки, обычный текст и другие элементы страницы.

Пример

Секция статьи "Пример"
        
          
          <!DOCTYPE html><html>  <head>    <style>      p {        color: red;      }    </style>  </head>  <body>    <p>This is my paragraph.</p>  </body></html>
          <!DOCTYPE html>
<html>
  <head>
    <style>
      p {
        color: red;
      }
    </style>
  </head>
  <body>
    <p>This is my paragraph.</p>
  </body>
</html>

        
        
          
        
      

Как пишется

Секция статьи "Как пишется"

Тег <style> помещается в элемент <head>, где находится информация, которую не видит пользователь.

        
          
          <head>  <style>    /* Стили */  </style></head>
          <head>
  <style>
    /* Стили */
  </style>
</head>

        
        
          
        
      

Атрибуты

Секция статьи "Атрибуты"
  • media — укажите этот атрибут, чтобы один и тот же элемент на странице отображался по-разному на разных устройствах: например, телефоне или проекторе. К примеру, хочется, чтобы основной текст выглядел крупнее на проекторе, чем при просмотре на экране компьютера. Для этого добавь атрибут media со значением "projection" и пропиши размер шрифта, например, font-size: 120%;. Вот какие есть варианты устройств, можно указать несколько через запятую:
    • all — все устройства;
    • braille — устройства, основанные на системе Брайля, которая создана для слепых людей;
    • handheld — смартфоны и другие устройства с узким экраном;
    • print — принтер;
    • screen — стандартный экран компьютера — это значение по умолчанию;
    • speech — речевые синтезаторы, а также программы для воспроизведения текста вслух и речевые браузеры;
    • projection — проектор;
    • tty — телетайпы, терминалы, портативные устройства с ограниченными возможностями экрана;
    • tv — телевизор.

Ещё примеры

Секция статьи "Ещё примеры"

Попробуем сделать основной заголовок на странице ещё крупнее, зададим шрифты без засечек и чёрный цвет:

        
          
          <!DOCTYPE html><html>  <head>    <meta charset="utf-8">    <title>Кулинаный блог Марфы</title>    <style>      h1 {        font-size: 30px;        font-family: "Roboto", sans-serif;        color: #000000;      }    </style>  </head>  <body>    <h1>Как испечь настоящие круассаны?</h1>  </body></html>
          <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Кулинаный блог Марфы</title>
    <style>
      h1 {
        font-size: 30px;
        font-family: "Roboto", sans-serif;
        color: #000000;
      }
    </style>
  </head>
  <body>
    <h1>Как испечь настоящие круассаны?</h1>
  </body>
</html>

        
        
          
        
      
Открыть демо в новой вкладке

А в этом примере цвет и фон текста в абзаце будет меняться в зависимости от ширины экрана:

        
          
          <!DOCTYPE html><html>  <head>    <style>      p {        background-color: white;        color: #663613;      }    </style>    <!-- Будет работать на экранах шириной до 500px -->    <style media="all and (max-width: 500px)">      p {        background-color: #FF8630;        color: black;      }    </style>  </head>  <body>    <p>Чтобы испечь настоящие круассаны...</p>  </body></html>
          <!DOCTYPE html>
<html>
  <head>
    <style>
      p {
        background-color: white;
        color: #663613;
      }
    </style>
    <!-- Будет работать на экранах шириной до 500px -->
    <style media="all and (max-width: 500px)">
      p {
        background-color: #FF8630;
        color: black;
      }
    </style>
  </head>
  <body>
    <p>Чтобы испечь настоящие круассаны...</p>
  </body>
</html>

        
        
          
        
      
Открыть демо в новой вкладке

На практике

Секция статьи "На практике"

Дока Дог

Секция статьи "Дока Дог"

🛠 Лайфхак: чтобы быстрее загружался сайт, особенно на телефоне или при медленном интернете, нужно тот код, который отвечает за отображение верхней части сайта, вставлять в <head> в формате <style>/* Наш CSS-код */</style>.

То есть туда можно встроить шапку сайта, верхние баннеры, заголовки — то, что отображается сразу при открытии. А всё, что ниже можно потом подгрузить через JavaScript после загрузки всей страницы. Так мы сразу показываем пользователю контент, он начинает его читать, а тем временем догружается нижняя часть сайта.

Больше информации о таком подходе можно найти по запросу «критический CSS».

Алёна Батицкая

Секция статьи "Алёна Батицкая"

🛠 Многие начинающие разработчики грешат тем, что прописывают стили прямо внутри HTML-разметки при помощи тега <style>. Так делать не нужно.

Один из принципов вёрстки: разделение содержимого и оформления. Содержимое это разметка страницы, а оформление, соответственно, CSS-стили.

Почему так? 🤔

Не редки ситуации, когда после вёрстки сайт натягивается на систему управления — CMS. Из HTML-разметки создаются шаблоны, для подтягивания данных из панели администратора используется PHP.

Как итог после таких манипуляций менять HTML будет достаточно проблематично и потребует дополнительных знаний. А вот доступ к стилям, если они вынесены в отдельный файл, у тебя останется. Таким образом можно будет полностью преобразить сайт, не меняя при этом разметки.

Если стили будут зашиты в HTML поменять внешний вид сайта будет также сложно, как изменить разметку.

🛠 Тег <style> можно использовать для быстрой проверки гипотез. Например, у тебя есть догадка, как решить задачу, но нет уверенности. Накидай варианты решения прямо в HTML и проверь в браузере.

Хотя удобнее делать то же самое в инструментах разработчика самого браузера 🤗

🛠 На самом деле тег <style> можно размещать вообще в любом месте страницы, не обязательно в <head> и это будет работать! Но делать так не стоит 🌚