Адресная модель css

Когда документ принимается броузером, - создается его объектное древовидное представление. С помощью селекторов и свойств из утверждений CSS можно получить доступ:

• к элементам и отношениям между элементами в древовидной структуре документа,

• к атрибутам элементов и их значениям,

• к некоторым частям содержимого элементов,

• к элементам, когда они находятся в определенных состояниях,

• к элементам пространства, где отображается документ,

• к системной информации.

Содержимое css-файла или style-контейнера

CSS-файл или style-контейнер содержат последовательность утверждений 2-х типов: at-правил и множеств правил. Утверждения могут размещаться в окружении любого числа пробелов. At-правила начинаются с маркера @ и следующего за ним ключевого слова. За ключевым словом размещается значение некоторого параметра.

Пример

@import “subs.css”; // указывается дополнительный файл для импорта css-стилей

h1 {color: blue}

@import “list.css”;

2-е утверждение @import не обрабатывается согласно соглашениям, принятым для CSS2.

Все утверждения @import должны располагаться до блоков {…}. Другое важное соглашение применения правил в CSS2 состоит в том, что любые утверждения с ошибками пропускаются.

Внутри блоков элементы разделяются точкой с запятой. Любые элементы с ошибками (например неправильные параметры или имена атрибутов) внутри блоков пропускаются.

Пример

h1 {color: red; font-style: 12 pt}

p {color: blue; font-vendor: any; font-variant: small-caps}

В данном примере в процессе обработки утверждений выбрасываются атрибуты и их значения: font-style: 12 pt и font-vendor: any, т.к. в 1-м случае значение не соответствует названию атрибута, а во 2-м случае не существует атрибута с font-vendor.

Комментарий в CSS2 указывается так же, как в языке С: /*………………………*/.

Селекторы

Селекторы указывают к каким элементам древовидной структуры документа применяются стилевые элементы. Селекторы определяются различными вариантами шаблонов. Наиболее употребимы следующие.

* - Универсальный селектор. Указывает применение к любым элементам. Обычно используется в сочетании с атрибутными образцами.

Пример

*[lang=fr] {display: none}

Данное утверждение означает, что не отображаются любые элементы связанные с тегами у которых атрибут lang имеет значение fr.

E-селекторы типов. Применимы к именам тегов.

Пример

h1 {font-family: font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: bold; color: blue }

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

А В селекторы наследования. Применяются к тем элементам, которые являются наследниками других. Обычно это ситуация для отдельных тегов или контейнеров внутри других контейнеров.

Пример

h1 em {color: blue}

В данном примере указано, что стиль применим к контейнеру <em>…</em>, который располагается внутри контейнера <h1>…</h1>.

Пример

h1 * * em {…}

В данном случае стиль применяется к контейнеру <em>…</em>, расположенному внутри контейнера <h1>…</h1> и еще внутри двух, произвольных контейнеров.

E1 + E2 селекторы следования. Применяются в том случае, если необходимо указать ситуацию, когда элемент расположен за некоторым или некоторыми другими.

Пример

h1.opener + h2 { margin-top: -5mm }

Указано уменьшение области разделения на 5мм, между текстами представленными контейнерами h1 и h2 , если они следуют один за другим и если h1 имеет атрибут class со значением opener.

Атрибутные селекторы. Атрибутные селекторы позволяют определять правила доступа к элементам в документах через сопоставление атрибутов в тегах. Можно указать следующие 3 варианта шаблонов для указания атрибутов и/или их значений:

• [att] – ссылка через указание имени атрибута att,

• [att = val] – ссылка указанием имени атрибута att и его значения val,

• [att ~= val] – ссылка к тем элементам документа, которые содержат атрибут att, значением которого является список токенов, один из которых в точности соответствует значению val.

Примеры

См. пример, рассмотренный ранее, для универсального селектора.

h1[title] {color: blue}

Примененный выше селектор позволяет ссылаться ко всем элементам h1, в которых указан атрибут title.

span[hello = "Cleveland"][goodbye ~= "Columbus"] { color: blue; }

В данном случае ссылочным является, например, следующий элемент:

<span goodbye="Columbus Orion Tetra" hello = "Cleveland"> произвольный текст…………………………………………………….. </span>

Для ссылок к элементам, содержащим атрибуты class или id в CSS предусмотрены специальные нотации. Так, указание точки означает ссылку к классу и сразу после точки необходимо указать значение этого атрибута. Однако, поскольку атрибут class может быть представлен списком слов, то ссылку можно организовать указав некоторое подмножество слов, перечисляя их с лидирующей точкой.

Примеры

*.pastoral { color: green }

p.pastoral.marine { color: green }

В первом случае выполняется ссылка ко всем элементам атрибут класса которых содержит слово pastoral. Во втором случае, например, ссылка выполняется для тех элементов у которых атрибут class имеет значение “pastoral blue aqua marine”, но не выполняется если этот атрибут имеет значение “pastoral blue”.

Для ссылок через значение атрибута id используется символ #, предшествующий значению атрибута.

Примеры

h1#chapter1 { text-align: center }

*#z98y { letter-spacing: 0.3em }

В 1-м из приведенных примеров ссылка выполняется к тому тегу h1, у которого значение атрибута id “chapter1”, во 2-м случае ссылка выполняется ко всем тегам документа, у которых значение атрибута id равно z98y.

Группирование. Когда несколько селекторов сопоставлены одинаковым декларациям, то в этом случае они объединяются в список, элементы которого разделяются запятыми.

Пример

В этом примере три правила могут быть объединены списком селекторов.

h1 { font-family: Helvetica }

h2 { font-family: Helvetica }

h3 { font-family: Helvetica }

эквивалентно:

h1, h2, h3 { font-family: Helvetica }

Псевдо-элементы и псевдо-классы. В CSS имеются набор селекторов - псевдо-элементов и псевдо-классов (:first-line, :first-letter, :before, :after, :link, :visited, :hover, and :active), которые позволяют ссылаться к некоторым объектам документа вне древовидной структуры документа, - например к первой букве текста параграфа и т.п.