Тег STYLE

Тег STYLE применяется для определения стилей элементов веб-страницы. Допускается размещать STYLE в любом месте веб-страницы. Однако если в стилях идет описание селектора BODY и других важных эементов, то необходимо тег STYLE использовать внутри контейнера HEAD. Можно использовать более чем один тег STYLE.

Некоторые старые браузеры не обрабатывают содержимое контейнера STYLE и выводят его на веб-страницу. Чтобы этого не произошло, заключите стили в комментарии HTML. Если вы делаете сайт под современные браузеры, то эту рекомендацию можно опустить, поскольку все популярные браузеры корректно работают со стилями.

Синтаксис
<head>
<style type="text/css">
...
</style>
</head>

Закрывающий тег
Обязателен.

Параметры
media — определяет устройство вывода, для работы с которым предназначена таблица стилей.
type — сообщает браузеру, какой синтаксис использовать, чтобы правильно интерпретировать стили.

Пример 1. Использование тега STYLE

<html>
<head>
<style type="text/css">
H1 { font-size: 120%; font-family: Verdana, Arial, Helvetica, sans-serif; color: #333366 }
</style>
</head>

<body>
<H1>Hello, world!</H1>
</body>
</html>

Описание параметров тега STYLE

Параметр MEDIA

Описание
Устанавливает устройство вывода, для которого предназначена таблица стилей. В идеале для каждого устройства — от карманного компьютера до принтера можно определить свою собственный стиль, который бы учитывал специфику устройства и подгонял под него вид веб-страницы. Но это в идеале, пока же браузеры поддерживают только вывод на принтер и экран монитора.

Синтаксис
<style media=all | print | screen>...</style>

Аргументы
all — cтиль, предназначенный для одновременного просмотра на мониторе и вывода на печать.
print — cтиль для вывода на печать.
screen — стиль для вывода на экран монитора.

Аргументы чувствительны к регистру. Можно устанавливать сразу несколько значений, перечисляя их через запятую.

Значение по умолчанию
screen

Пример 2. Стиль для печати документа

<html>
<head>
<style type="text/css" media="screen">
.window {
background: url(/images/bg.gif);
border: 1px solid black;
font-family: Arial;
font-size: 90%;
color: #fc0;
padding: 10px

}
</style>

<style type="text/css" media="print">
.window {
border: 1px solid black;
font-family: Arial;
font-size: 90%;
font-weight: bold;
color: black;
padding: 10px

}
</style>

</head>
<body>
<div class=window>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
</div>
</body>
</html>

Параметр TYPE

Описание
Сообщает браузеру, какой синтаксис использовать, чтобы правильно интерпретировать таблицу стилей. Как правило, браузеры корректно работают со стилями и при отсутствии этого параметра, он необходим для некоторых старых браузеров, которые могут не распознать содержимое контейнера STYLE.

Синтаксис
<style type="text/css">...</style>

Аргументы
В качестве значения используется MIME-тип — text/css.

Значение по умолчанию
text/css

Пример 3. Установка типа данных

<html>
<head>
<style type="text/css">
a:link { color: #003366 }
a:visited { color: #660066 }
a:hover { color: #800000 }
a:active { color: #FF0000 }
</style>
</head>
<body>
<a href=link1.html>Lorem ipsum dolor sit amet</a>
</body>
</html>

Материал взят с сайта htmlbook.ru