Тег STYLE

Браузер	Internet Explorer				Netтscape		Опера				Safari			Mozilla Firefox
Версия	5.5	6.0	7.0	8.0	8.0	9.0	7.0	8.0	9.2	9.5	1.3	2.0	3.1	1.5	2.0	3.0
Поддерживается	Да	Да	Да	Да	Да	Да	Да	Да	Да	Да	Да	Да	Да	Да	Да	Да

ШТМЛ:

3.2

XШТМЛ:

1.0

1.1

Описание

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

Синтаксис

Параметры

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

Закрывающий тег

Обязателен.

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

ШТМЛ 4.01IE 5.5IE 6IE 7Op 9.5Sa 3.1Ff 2.0Ff 3.0

<!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</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>

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

Рис. 1

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

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

Параметр MEDIA

ШТМЛ:

3.2

XШТМЛ:

1.0

1.1

Описание

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

Синтаксис

Аргументы

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

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

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

screen

Пример 2. Стили для разных устройств вывода

ШТМЛ 4.01IE 5.5IE 6IE 7Op 9.5Sa 3.1Ff 2.0Ff 3.0

<!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, параметр 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>

Результат данного примера продемонстрирован на рис. 2, где применяется стиль с параметром media="screen". На рис. 3 показана та же страница, но при этом уже действует стиль для печати, заданный параметром media="print". Результат эмулирован, поскольку стиль будет действовать только при отправке web-страницы на печать.

Рис. 2

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

Рис. 3

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

Параметр TYPE

ШТМЛ:

3.2

XШТМЛ:

1.0

1.1

Описание

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

Синтаксис

Аргументы

В качестве значения используется MIME-тип — text/CSS (ЦСС).

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

text/CSS (ЦСС)

Пример 3. Использование параметра type

ШТМЛ 4.01IE 5.5IE 6IE 7Op 9.5Sa 3.1Ff 2.0Ff 3.0

<!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.ШТМЛ">Lorem ipsum dolor sit amet</a></p>

 </body>
</html>