Тег STYLE
Описание
Тег <STYLE> применяется для определения стилей
элементов веб-страницы. Допускается размещать <STYLE>
в любом месте веб-страницы. Однако если в стилях идет описание селектора BODY
и других важных эементов, то необходимо тег <STYLE>
использовать внутри контейнера <HEAD>. Можно
использовать более чем один тег <STYLE>.
Синтаксис
<head>
<style type="text/css">
...
</style>
</head>
Параметры
- media
- Определяет устройство вывода, для работы с которым предназначена таблица
стилей.
- type
- Сообщает браузеру, какой синтаксис использовать, чтобы правильно интерпретировать
стили.
Закрывающий тег
Обязателен.
Пример 1. Использование тега <STYLE>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<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
- Стиль, предназначенный для одновременного просмотра на мониторе и вывода
на печать.
- print
- Стиль для вывода на печать.
- screen
- Стиль для вывода на экран монитора.
Аргументы чувствительны к регистру. Можно устанавливать сразу несколько значений,
перечисляя их через запятую.
Значение по умолчанию
screen
Пример 2. Стили для разных устройств вывода
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<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. Использование параметра type
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<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>
