Тег STYLE

⚠️ Bymas - Форум разработчиков

Тег 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>