Тег STYLE

Описание

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

Синтаксис

<head> <style type="text/css"> ... </style> </head>

Параметры

media	Определяет устройство вывода, для работы с которым предназначена таблица стилей.
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</title> <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>

Результат примера показан на рисунке. Обратие внимание, что цвет текста и начертание шрифта в теге <H1> изменились.

Вид заголовка после применения стилей

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

Параметр MEDIA

Описание

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

Синтаксис

<style media="all | screen | print | projection | braille | speech">...</style>

Аргументы

all	Все устройства.
screen	Экран монитора.
print	Печатающее устройство вроде принтера.
projection	Проектор.
braille	Устройства, основанные на системе Брайля, которые предназначены для слепых людей.
speech	Речевые синтезаторы, а также программы для воспроизведения текста вслух. Сюда, например, можно отнести речевые браузеры.

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

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

screen

Пример

<!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"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. </div> </body> </html>

Результат данного примера продемонстрирован на рисунке, где применяется стиль с параметром media=«screen».

Страница со стилем для просмотра на мониторе

На следующем рисунке показана та же страница, но при этом уже действует стиль для печати, заданный параметром media=«print». Результат эмулирован, поскольку стиль будет действовать только при отправке веб-страницы на печать.

Страница со стилем для вывода на печать

Параметр TYPE

Описание

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

Синтаксис

<style type="text/css">...</style>

Аргументы

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

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

text/css

Пример

<!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=utf-8"> <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="lorem.html">Lorem ipsum dolor sit amet</a></p> </body> </html>