Тег STYLE
| Браузер | Internet Explorer | Firefox | Mozilla | Opera | Netscape | Safari | |||||||
| Версия | 5.5 | 6.0 | 7.0 | 1.0 | 2.0 | 1.7 | 7.0 | 8.0 | 9.0 | 6.0 | 7.0 | 8.0 | 1.0 |
| Поддержка |  |
|
|
|
|
|
|
|
|
|
|
|
|
| HTML: | 3.2 | 4 | XHTML: | 1.0 | 1.1 |
Описание
Тег <STYLE> применяется для определения стилей элементов web-страницы. Тег <STYLE> необходимо использовать внутри контейнера <HEAD>. Можно задавать более чем один тег <STYLE>.
Синтаксис
<style type="text/css">
...
</style>
</head>
Параметры
| media | Задает устройство вывода, для работы с которым предназначена таблица стилей. |
| type | Сообщает браузеру, какой синтаксис использовать, чтобы правильно интерпретировать стили. |
Закрывающий тег
Обязателен.
Пример 1. Использование тега <STYLE>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Пример использования тега STYLE</title>
<style type="text/css">
H1 { font-size: 120%; font-family: Verdana, Arial, Helvetica, sans-serif; color: #333366 }
</style>
</head>
<body>
<H1>Добро пожаловать на эту страницу!!</H1>
</body>
</html>
Описание параметров тега <STYLE>
Параметр MEDIA
| HTML: | 3.2 | 4 | XHTML: | 1.0 | 1.1 |
Описание
Задает устройство вывода, для которого предназначена таблица стилей. Для каждого устройства - от карманного компьютера до принтера можно определить свою собственный стиль, который бы учитывал специфику устройства и подгонял под него вид web-страницы.
Синтаксис
Аргументы
| all | Все устройства . |
| screen | Экран монитора. |
| Печатающее устройство вроде принтера. | |
| projection | Проектор. |
| braille | Устройства, основанные на системе Брайля, которые предназначены для слепых людей. |
| speech | Речевые синтезаторы, а также программы для воспроизведения текста вслух. Сюда, например, можно отнести речевые браузеры. |
Можно устанавливать сразу несколько значений, перечисляя их через запятую.
Значение по умолчанию
screen
Пример 2. Стили для разных устройств вывода
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Пример тега STYLE, параметр media</title>
<style type="text/css" media="screen">
.window {
background: #333;
border: 1px solid red;
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">
Все счастливые семьи похожи друг на друга, каждая несчастливая семья несчастлива по-своему. (Лев Николаевич Толстой. Анна Каренина)
</div>
</body>
</html>
Параметр TYPE
| HTML: | 3.2 | 4 | XHTML: | 1.0 | 1.1 |
Описание
Сообщает браузеру, какой синтаксис использовать, чтобы правильно интерпретировать таблицу стилей. Как правило, браузеры корректно работают со стилями и при отсутствии этого параметра, он необходим для некоторых старых браузеров, которые могут не распознать содержимое контейнера <STYLE>.
Синтаксис
Аргументы
В качестве значения используется MIME-тип - text/css.
Значение по умолчанию
text/css
Пример 3. Использование параметра type
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Пример тега STYLE, параметр type</title>
<style type="text/css">
a:link { color: #003366; }
a:visited { color: #660066; }
a:hover { color: #800000; }
a:active { color: #FF0000; }
</style>
</head>
<body>
<p><a href="/test.php">это текст ссылки это текст ссылки</a></p>
</body>
</html>