Носитель (@media)
Это правило позволяет задавать набор правил для различных типов носителей в пределах одной таблицы стилей.
<style type="text/css">
@media screen {
body {
background: blue;
color: white;
}
/* body */}
/* @media */
@media print {
body {
background: transparent;
color: black;
}
/* body */}
/* @media */
</style>
Эквивалентная запись выглядит следующим образом:
<style type="text/css" media="screen">
body {
background: blue;
color: white;
}
</style>
<style type="text/css" media="print">
body {
background: transparent;
color: black;
}
</style>
Спецификация CSS 2.1 определяет следующие типы носителей:
-
screen – цветной экран монитора
-
print – принтер или экран монитора в режиме предварительного просмотра печати
-
speech (в спецификации CSS 2 aural) – голосовой синтезатор
-
projection – проектор. В отличие от монитора, предполагает постраничное представление
-
handheld – небольшие устройства с низким разрешением экрана и ограниченной шириной полосы пропускания, например, сотовые телефоны
-
tv – телевизор (низкое разрешение, цвет, ограниченная прокрутка, звук)
-
brail – экран для людей с пониженным зрением, работающий по системе Брайля
-
embossed – принтер Брайля
-
tty – телетайп или устройство с ограниченными возможностями экрана
-
all – любое устройство
Типы носителей взаимоисключающи, однако одно и то же устройство может работать в нескольких режимах, например экран монитора в обычном режиме и режиме просмотра печати.
Печатная страница (@page)
Это правило определяет размеры, ориентацию и поля печатной страницы.
@page {margin: 3cm;}задает поля шириной 3 см.
Псевдо-классы :left, :right и :first позволяют задать специальные правила для левой, правой (при двухсторонней печати) и первой страницы.
@page :left {
margin-left: 4cm;
margin-right: 3cm;
}
@page :right {
margin-left: 3cm;
margin-right: 4cm;
}
@page :first {
margin-top: 10cm /* Верхнее поле для первой страницы 10 см */;
}
Кодировка (@charset)
Это правило задает кодировку внешней таблицы стилей, должно присутствовать не более одного раза и располагаться в самом начале файла. @charset "Windows-1251"; /* Кириллица Windows */
Внедренный шрифт (@font-face)
Это правило позволяет разработчику загрузить специфический шрифт, отсутствующий на клиентской машине.
@font-face {
font-family: "MyFont";
src: url(FontSourceFile.eot);
}
h1 {
font-family: "Verdana" , "MyFont";
}
Специфичность и порядок применения правил
Конфликт правил неотделим от каскадных таблиц стилей. Когда два или более объявления подходят к одному элементу, браузер должен решить, какое именно применить. Internet Explorer применяет следующий алгоритм:
Отбираются все подходящие объявления, включая наследованные, которые подходят к данному типу носителя (@media)
Объявления отсортировываются по весу и происхождению. Стили разработчика перевешивают стили пользователя (которые перевешивают встроенные стили браузера), если только пользовательское объявление не содержит пометки !important (важно), которая увеличивает вес объявления.
Селекторы правил отсортировываются по специфичности, рассчитываемой как число, полученное строковым слиянием (a) наличия атрибута style у элемента, (b) числа атрибутов id, (c) числа атрибутов class и псевдо-классов и (d) числа типов элементов и псевдо-элементов в селекторе. Если элемент содержит атрибуты, влияющие на представление (например, атрибут width элемента table) то эти атрибуты преобразуются в соответствующие CSS атрибуты с нулевой специфичностью.
Например, любой из перечисленных селекторов может применяться к элементу li, но лишь правило с наибольшей специфичностью будет применено.
|
Селектор |
Атрибут style (a) |
Число атрибутов id (b) |
Число классов (c) |
Число типов (d) |
Специфичность |
|
* |
0 |
0 |
0 |
0 |
0 |
|
li |
0 |
0 |
0 |
1 |
1 |
|
ul li |
0 |
0 |
0 |
2 |
2 |
|
li:first-line |
0 |
0 |
0 |
2 |
2 |
|
ul ol+li |
0 |
0 |
0 |
3 |
3 |
|
.class1 |
0 |
0 |
1 |
0 |
10 |
|
li.class2 |
0 |
0 |
1 |
1 |
11 |
|
li[class="class1"] |
0 |
0 |
1 |
1 |
11 |
|
li[id="myId"] |
0 |
0 |
1 |
1 |
11 |
|
.class1.class2 |
0 |
0 |
2 |
0 |
20 |
|
li.class1.class2 |
0 |
0 |
2 |
1 |
21 |
|
li#myId |
0 |
1 |
0 |
1 |
101 |
|
style="" |
1 |
0 |
0 |
0 |
1000 |
Если два правила имеют равный вес и специфичность, применяется прочитанное последним. (Импортированные при помощи @import таблицы стилей всегда проигрывают записанным позже.)