Языки каскадных таблиц стилей, такие как CSS, разрешают объединять стилевую информацию из различных источников. Однако, не все языки таблиц стилей поддерживают каскадирование. Чтобы создать каскад, авторы определяют последовательность элементов LINK и/или STYLE. Стилевая информация каскадируется в том порядке, в котором элементы появляются в HEAD.
Примечание. Эта спецификация не определяет, как каскадируются таблицы стилей на другом языке таблиц стилей. Авторы должны исключить смешение языков таблиц стилей.
В следующем примере мы определяем две альтернативные таблицы стилей с названием «compact». Если пользователь выберет стиль «compact», ПА обязан применить обе внешние таблицы стилей, также как и постоянную таблицу стилей «common.css». Если пользователь выберет стиль «big print», только альтернативная таблица «bigprint.css» и постоянная «common.css» будут применены.
<LINK rel="alternate stylesheet" title="compact" href="small-base.css" type="text/css"> <LINK rel="alternate stylesheet" title="compact" href="small-extras.css" type="text/css"> <LINK rel="alternate stylesheet" title="big print" href="bigprint.css" type="text/css"> <LINK rel="stylesheet" href="common.css" type="text/css">
Пример каскада, который использует элементы LINK и STYLE.
<LINK rel="stylesheet" href="corporate.css" type="text/css">
<LINK rel="stylesheet" href="techreport.css" type="text/css">
<STYLE type="text/css">
p.special { color: rgb(230, 100, 180) }
</STYLE>
Media-зависимые каскады
Каскад может включать таблицы стилей, применяемые для разных типов носителя. И LINK, и STYLE могут использоваться с атрибутом media. ПА в этом случае отвечает за фильтрацию тех таблиц, которые не применяются для текущего носителя.
В следующем примере мы определяем каскад, где таблица «corporate» даётся в нескольких версиях: одна для печати, другая для экрана и третья для речевых браузеров (используемая, как говорят, при чтении email в автомобиле). Таблица «techreport» применима ко всем носителям.
Правило цвета, определённое элементом STYLE, используется для печати и экрана, но не для речевого представления.
<LINK rel="stylesheet" media="aural" href="corporate-aural.css" type="text/css">
<LINK rel="stylesheet" media="screen" href="corporate-screen.css" type="text/css">
<LINK rel="stylesheet" media="print" href="corporate-print.css" type="text/css">
<LINK rel="stylesheet" href="techreport.css" type="text/css">
<STYLE media="screen, print" type="text/css">
p.special { color: rgb(230, 100, 180) }
</STYLE>
Наследование и каскадирование
Если ПА хочет отобразить документ, ему нужно найти значения для свойств стиля, например, семейство шрифтов, стиль шрифта, размер, высота строки, цвет текста и так далее. Точный механизм зависит от языка таблиц стилей, но следующее описание в целом применимо:
Механизм каскадирования применяется, если несколько правил стиля применяются непосредственно к элементу. Этот механизм позволяет ПА сортировать правила по специфике, чтобы определить, какое правило применить. Если не найдено ни одного правила, следующий шаг зависит от того, может или нет наследоваться это свойство стиля. Не все свойства могут наследоваться. Для этих свойств язык таблиц стиля предоставляет значения по умолчанию для того, чтобы использовать их при отсутствии явных правил для конкретного элемента.
Если свойство может наследоваться, ПА проверяет непосредственно включаемые элементы, чтобы убедиться, применимо ли к ним правило. Этот процесс продолжается до тех пор, пока ПА находит применимые правила. Этот механизм позволяет компактно специфицировать таблицы стилей. К примеру, авторы могут определить семейство шрифтов для всех элементов внутри BODY одним правилом, которое применяется к элементу BODY.
электронное учебное пособие 