Тег STYLE
Тег STYLE
Описание
Тег <STYLE> применяется для определения стилей элементов веб-страницы. Допускается размещать <STYLE> в любом месте веб-страницы. Однако если в стилях идет описание селектора BODY и других важных эементов, то необходимо тег <STYLE> использовать внутри контейнера <HEAD>. Можно использовать более чем один тег <STYLE>.
Синтаксис
<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
- Стиль, предназначенный для одновременного просмотра на мониторе и вывода на печать.
- Стиль для вывода на печать.
- 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>
.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. Использование параметра type
<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>