Перейти к содержанию

<style>

Тег <style> (от англ. style — стиль) применяется для определения стилей элементов веб-страницы.

Элемент <style> необходимо использовать внутри контейнера <head>. Можно задавать несколько <style>.

Демо

Метаданные документа

Синтаксис

1
2
3
4
5
<head>
    <style>
        ...;
    </style>
</head>

Закрывающий тег обязателен.

Атрибуты

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

media

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

Синтаксис

1
2
3
<style media="all | print | screen | speech">
    ...;
</style>

Значения

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

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

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

  • screen

type

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

В HTML4 этот атрибут является обязательным, в HTML5 его можно опустить.

Синтаксис

1
2
3
<style type="text/css">
    ...;
</style>

Значения

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

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

  • text/css

Спецификации

Описание и примеры

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>STYLE, атрибут media</title>
        <style media="screen">
            .window {
                background: #333;
                border: 1px solid red;
                font-size: 0.9em;
                color: #fc0;
                padding: 10px;
            }
        </style>
        <style media="print">
            .window {
                border: 1px solid black;
                font-family: Arial;
                font-size: 0.9em;
                color: black;
                padding: 10px;
            }
        </style>
    </head>
    <body>
        <div class="window">
            Ветеринарное свидетельство входит экскурсионный
            эфемероид, но особой популярностью пользуются
            заведения подобного рода, сосредоточенные в
            районе Центральной площади и железнодорожного
            вокзала.
        </div>
    </body>
</html>

Ссылки

Комментарии