Элемент <style> позволяет встраивать таблицы стилей CSS в свои документы. Элемент <style> является одним из нескольких входных данных для модели обработки стилей. Элемент не представляет содержимое для пользователя.
Атрибуты элемента <style>
media – атрибут указывает, к какому медиа применяются стили. Значение должно быть допустимым списком медиа – запросов.
По умолчанию, если атрибут media не указан, используется значение "all", что означает, что стили по умолчанию применяются ко всем носителям.
blocking – атрибут является блокирующим атрибутом .
title – атрибут определяет элементы набора таблиц стилей CSS.
Атрибуты media и blocking должны каждый отражать соответствующие атрибуты содержимого с тем же именем.
В следующем документе ударение выделено ярко-красным текстом, а не курсивом, при этом названия произведений и латинские слова оставлены курсивом по умолчанию. Он показывает, как использование соответствующих элементов упрощает изменение стиля документов.
Пример
<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My favorite book</title>
<style type="text/css">
@media screen and (max-width: 767px) {
body {
max-width: 767px;
height: auto;
}
}
body {
color: black;
background: white; }
em {
font-style:normal;
color: red; }
p {
font-size:14pt;
}
</style>
</head>
<body>
<h1>My favorite book</h1>
<p>My<em> favorite </em>book of all time has<em> got </em>to be
<cite>A Cat's Life</cite>. It is a book by P. Rahmel that talks
about the <i lang="la">Felis catus</i> in modern human society.</p>
</body>
</html>
Если таблица стилей не ссылалась на другие ресурсы (например, это была внутренняя таблица стилей, заданная элементом <style> без @import правил), то правила стиля будут выполнены немедленно для скрипта.
DOM-интерфейс :
[Exposed=Window]
interface HTMLStyleElement : HTMLElement {
[HTMLConstructor] constructor();
[CEReactions] attribute DOMString media;
[SameObject, PutForwards=value] readonly attribute DOMTokenList blocking;
// also has obsolete members
};
HTMLStyleElement includes LinkStyle;