Читать онлайн «Спецификация CSS2». Страница 12

Автор Евгений Резниченко

В таблицах стилей, используемых в HTML, авторы могут употреблять точку (.) как альтернативу "~=" при совпадении с атрибутом "class". Таким образом, в HTML "DIV.value" и "DIV[class~=value]" имеют одно значение. Значение атрибута обязано следовать сразу за ".".

Мы можем назначить стилевую информацию всем элементам class~="pastoral" следующим образом:

*.pastoral { color: green } /* все элементы с class~=pastoral */

или просто

.pastoral { color: green } /* все элементы с class~=pastoral */

Следующее - назначает стиль только элементам H1 с class~="pastoral":

H1.pastoral { color: green } /* элементы H1 с class~=pastoral */

При назначении этих правил первое вхождение H1 ниже не имеет зелёного цвета текста, а второе - имеет:

<H1>Not green</H1> <H1 class="pastoral">Very green</H1>

Чтобы совпасть с поднабором значений "class", каждое значение обязано иметь предшествующую ".".

Следующее правило совпадает с любым элементом P, чей атрибут "class" сопоставлен списку разделённых пробелами значений "pastoral" и "marine":

P.pastoral.marine { color: green }

Правило совпадает, если class="pastoral blue aqua marine", но не совпадает

class="pastoral blue".

Примечание. CSS даёт такую мощь атрибуту "class", что авторы могут создавать свои собственные "языки документа" на базе элементов с почти не ассоциированным представлением (таких как DIV и SPAN в HTML) и назначать стилевую информацию через атрибут "class". Авторам следует избегать такой практики, поскольку структурные элементы языка документа часто имеют распознаваемые и принимаемые значения, а классы, определённые авторами - не могут.

Языки документов могут содержать атрибуты, которые объявлены как имеющие тип ID. Особенностью атрибутов типа ID является то, что они могут иметь одно значение; независимо от языка документа, атрибут ID может использоваться для уникальной идентификации элемента. В HTML все атрибуты ID именуются "id"; приложения XML могут именовать атрибуты ID по-разному, но с применением одинаковых ограничений.

Атрибут ID языка документа позволяет авторам назначать идентификатор объекту элемента в дереве документа. В CSS ID-селекторы совпадают с объектом элемента на базе идентификатора. ID-селектор CSS содержит "#" непосредственно перед значением ID.

Следующий ID-селектор совпадает с элементом H1, чей атрибут ID имеет значение "chapter1":

H1#chapter1 { text-align: center }

В следующем пример правило таблицы стилей устанавливает совпадение с элементом, чьё значение ID - "z98y".

Правило, таким образом, совпадает для элемента P:

<HEAD> <TITLE>Match P</TITLE> <STYLE type="text/css"> *#z98y { letter-spacing: 0.3em } </STYLE> </HEAD> <BODY> <P id=z98y>Wide text</P> </BODY>

В следующем пример, однако, правило стиля совпадает только с тем элементом H1, который имеет значение ID - "z98y".

Правило в этом примере не совпадает с элементом P:

<HEAD> <TITLE>Match H1 only</TITLE> <STYLE type="text/css"> H1#z98y { letter-spacing: 0.5em } </STYLE> </HEAD> <BODY> <P id=z98y>Wide text</P> </BODY>

ID-селекторы имеют более высокий приоритет, чем селекторы атрибутов. Например, в HTML селектор #p123 более специфичен, чем [ID=p123], в терминах каскада.

Примечание. В XML 1.0 [XML10] информация о том, какой атрибут содержит ID-ы элемента, находится в ОТД. При разборе XML, ПА не всегда читают ОТД и поэтому могут не знать, какой ID у элемента. Если дизайнер таблицы стилей знает или предполагает, что это именно данный случай, он должен использовать нормальные селекторы атрибутов: [name=p371] вместо #p371. Однако каскадный порядок нормальных селекторов атрибутов отличается от ID-селекторов. Может понадобиться добавить приоритет "!important" в объявления: [name=p371] {color: red ! important}. Конечно, элементы в документах XML 1.без ОТД не имеют ID-ов вообще.

В CSS2 стиль обычно присоединяется к элементу на базе его позиции в дереве документа. Этой простой модели во многих случаях достаточно, но некоторые обычные сценарии могут оказаться недоступными из-за структуры дерева документа. Например, в HTML 4.0 (см. [HTML40]) нет элементов, относящихся к первой строке параграфа, и, следовательно, простой селектор CSS не может с ним соотноситься.

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

[x]. Псевдоэлементы создают абстракции дерева документа наряду с абстракциями, специфицированными языком документа. Например, языки документа не имеют механизмов для доступа к первой букве или первой строке содержимого элемента . Псевдоэлементы CSS позволяют дизайнерам таблиц стилей получить доступ к информации, иначе не доступной. Псевдоэлементы могут также предоставить способ назначить стиль содержимому, которое не существует в документе-источнике (например, псевдоэлементы :before и :after дают доступ к генерируемому содержимому).

[x]. Псевдоклассы классифицируют элементы не по их именам, атрибутам или содержимому, а по другим характеристикам ; по характеристикам, которые в принципе не могут быть получены из дерева документа. Псевдоклассы могут быть динамическими в предположении, что элемент может получить или потерять псевдокласс, пока пользователь взаимодействует с документом. Исключением является ':first-child', который может быть вычислен из дерева документа.

Ни псевдоэлементы , ни псевдоклассы не появляются в документе-источнике или в дереве документа.

Псевдоклассы допустимы в селекторах везде, в то время как псевдоэлементы могут появляться только после субъекта селектора .

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

Некоторые псевдоклассы взаимоисключающи, а другие могут применяться одновременно в одном и том же элементе. В случае конфликта правил, нормальный порядок каскадирования определяет выход.

ПА, соответствующие HTML могут игнорировать все правила с селекторами :first-line или :first-letter или, альтернативно, могут поддерживать только поднаборы свойств этих псевдоэлементов.

Псевдокласс :first-child совпадает с элементом, являющимся первым дочерним элементом какого-либо другого элемента.

Здесь селектор совпадает с любым элементом P, являющимся первым дочерним элементом элемента DIV. Правило подавляет отступ для первого параграфа DIV:

DIV > P:first-child { text-indent: 0 }

Следующий селектор может совпасть с элементом P внутри DIV в следующем фрагменте:

<P> Последний P перед note. <DIV class="note"> <P> Первый P внутри note. </DIV>

но не совпадёт со вторым P в следующем фрагменте:

<P> Последний P перед note. <DIV class="note"> <H2>Note</H2> <P> Первый P внутри note. </DIV>

Следующее правило устанавливает вес шрифта 'bold' для любого элемента EM, являющегося каким-либо потомком элемента P, который, в свою очередь, является первым дочерним элементом:

P:first-child EM { font-weight : bold }

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

Например, EM в:

<P>abc <EM>default</EM>

является первым дочерним элементом от P.

Следующие два раздела эквивалентны:

* > A:first-child /* первый дочерний элемент любого элемента */ A:first-child /* То же самое */

ПА обычно отображают непосещённые гиперссылки иначе, чем посещённые. CSS псевдоклассы ':link' и ':visited' для этих случаев:

[x]. Псевдокласс :link применяется к ссылкам, которые ещё не посещены.

[x]. Псевдокласс :visited применяется после того, как пользователь посетил ссылку.

Примечание. По истечении некоторого времени ПА могут вернуть посещённую гиперссылку к первоначальному состоянию (непосещённому) ':link'.

Эти два состояния взаимоисключающи.

Язык документа определяет, какие элементы являются якорями ссылки на ресурс. Например, в HTML 4.0 псевдоклассы гиперссылки применяются к элементам A с атрибутом "href". Таким образом, следующие два объявления CSS2 имеют один эффект:

A:link { color: red } :link { color: red }

Если следующая ссылка:

<A class="external" href="http://out.side/">external link</A>

будет посещена, то данное правило:

A.external:visited { color: blue }

сделает её голубой.

Интерактивные ПА иногда изменяют представление в ответ на действия пользователя. CSS имеет три псевдокласса для общих случаев:

[x]. Псевдокласс :hover применяется, если указал на элемент (каким-либо указательным устройством), но не активировал его. Например, визуальный ПА может применить этот псевдокласс, когда курсор (указатель мыши) проходит над боксом, сгенерированным элементом. ПА, не поддерживающие интерактивные носители, не должны поддерживать этот псевдокласс. Некоторые соответствующие ПА, поддерживающие интерактивные носители, могут оказаться неспособными поддерживать этот псевдокласс (например, устройство "карандаш").