Кратко
СкопированоВнутри тега <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>.
То есть туда можно встроить шапку сайта, верхние баннеры, заголовки — то, что отображается сразу при открытии. А всё, что ниже можно потом подгрузить через JavaScript после загрузки всей страницы. Так мы сразу показываем пользователю контент, он начинает его читать, а тем временем догружается нижняя часть сайта.
Больше информации о таком подходе можно найти по запросу «критический CSS».
советует
Скопировано🛠 Многие начинающие разработчики грешат тем, что прописывают стили прямо внутри HTML-разметки при помощи тега <style>. Так делать не нужно.
Один из принципов вёрстки: разделение содержимого и оформления. Содержимое это разметка страницы, а оформление, соответственно, CSS-стили.
Почему так? 🤔
Не редки ситуации, когда после вёрстки сайт натягивается на систему управления — CMS. Из HTML-разметки создаются шаблоны, для подтягивания данных из панели администратора используется PHP.
Как итог после таких манипуляций менять HTML будет достаточно проблематично и потребует дополнительных знаний. А вот доступ к стилям, если они вынесены в отдельный файл, у тебя останется. Таким образом можно будет полностью преобразить сайт, не меняя при этом разметки.
Если стили будут зашиты в HTML поменять внешний вид сайта будет также сложно, как изменить разметку.
🛠 Тег <style> можно использовать для быстрой проверки гипотез. Например, у тебя есть догадка, как решить задачу, но нет уверенности. Накидай варианты решения прямо в HTML и проверь в браузере.
Хотя удобнее делать то же самое в инструментах разработчика самого браузера 🤗
🛠 На самом деле тег <style> можно размещать вообще в любом месте страницы, не обязательно в <head> и это будет работать! Но делать так не стоит 🌚
