Механизмы CSS

Каскадные таблицы стилей

Языки каскадных таблиц стилей, такие как CSS, позволяют объединять стилевую информацию из различных источников. Каскад задается последовательностью элементов link и/или style в элементе head HTML-документа.

<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">
  <style type="text/css">
    p.special {
      color: rgb(230, 100, 180);
    }
  </style>

В приведенном примере присутствуют две альтернативные таблицы стилей с именем compact. Если пользователь выбирает стиль "compact", браузер должен использовать обе эти таблицы плюс таблицу common.css, присутствующую постоянно, и информацию из элемента style. Если пользователь выбирает стиль "big print", используются таблицы bigprint.css, common.css и элемент 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>

Здесь атрибут media элементов link и style задает тип носителя информации. Голосовой браузер будет использовать только таблицу corporate-aural.css (media="aural"), экран и принтер - corporate-screen.css и corporate-print.css, соответственно, плюс стили из элемента style.

Наследование стилей

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

Когда несколько (возможно, противоречащих) правил напрямую применяются к некоторому элементу, используется каскадный механизм. Этот механизм определяет, какие именно правила следует применять. Если правило не найдено, проверяется, может ли оно наследоваться от родительского элемента (наследуются не все атрибуты стиля). Если атрибут не наследуется, используется значение по умолчанию для данного элемента.

Если атрибут наследуется, браузер проверяет родительский элемент. Процесс продолжается, пока не найдено подходящее правило. Этот механизм позволяет уменьшить размеры таблицы стилей. Например, разработчик может задать гарнитуру ( font-family ) элемента body, и она будет применена ко всем отображаемым на страницы элементам.

Правила CSS

Стилевая информация каскадной таблицы стилей состоит из отдельных строительных блоков, называемых правилами. Каждое правило, в свою очередь, состоит из двух частей, селектора и объявления стиля, заключенного в фигурные скобки ({}). Селекторы используются для отбора ("селекции") элементов HTML-страницы, к которым будет применено правило. Объявление состоит из пар имя свойства – значение, разделенных двоеточием (:). Пары между собой разделяются точкой с запятой (;).

h1 {
      color: red;
      font-size: large;
    }

Точка с запятой после последней пары необязательна, однако ее наличие считается хорошей практикой.

Селекторы

Простой селектор – это селектор типа либо универсальный селектор (*), за которым сразу (без пробелов) могут следовать селектор ID, селекторы класса и/или псевдо-класса.

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

С целью уменьшения размеров таблицы стилей селекторы могут быть сгруппированы в разделенный запятыми (,) список.

Селектор типа

Этот селектор указывает тип элемента. h1 {color: red;}

Селектор типа соответствует каждому элементу данного типа в документе. В приведенном примере каждый заголовок первого (верхнего) уровня должен отображаться красным цветом.

Универсальный селектор

Универсальный селектор (*) соответствует любому элементу в документе. * {border: solid 1px blue;}

В этом примере правило определяет тонкую синюю рамку вокруг каждого элемента.

Если универсальный селектор не является единственным компонентом простого селектора, он может быть опущен, например:

• *.myclass эквивалентно .myclass
• *#myId эквивалентно #myId

Селекторы атрибутов

Спецификация CSS 2.1 позволяет связывать стилевую информацию с атрибутами HTML-элементов.

Селектор наличия атрибута идентифицирует элементы, имеющие определенный атрибут (независимо от его значения).

[title] {color: blue;} помечает синим цветом все элементы, имеющие атрибут title.

a[name]:before {content: "\2660";} помещает символ пиковой масти перед каждой закладкой в документе.

Селектор равенства атрибута выбирает элементы, имя и значение атрибута которых в точности совпадает с селектором.

a[rel="Copyright"] {color: red;} помечает красным все гиперссылки на страницы с авторскими правами.

Селектор частичного совпадения дает соответствие в случае совпадения с одним из значений в разделенном пробелами списке.

a[title~="map"] {color: green;} помечает зеленым гиперссылки, атрибут title которых содержит слово "map", например, "Site map".

Селектор дефиса выбирает элементы, значение атрибута которых либо точно соответствует заданному, либо начинается с заданного с последующим дефисом.

[lang|="ru"] {color: red;}
[lang|="en"] {color: blue;}

Помечает элементы, имеющие атрибут lang (естественный язык) со значением "ru" или "ru-ru", красным, а английский текст ( lang="en-us" или lang="en-uk" ) синим. Как правило, этот селектор применяется для различения естественных языков.