мета-данные страницы

Тег STYLE

Описание

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

Синтаксис

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

Параметры

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

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

Обязателен.

Пример

Использование тега 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>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

Пример

Использование параметра 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=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>