3.6. Группировка

Для уменьшения размеров таблиц стилей можно применять одно и то же правило к нескольким элементам. Такой прием называется группировкой.

H1, H2, H3 {text – align:center;

background – color:red}

чтобы отличались по размерам:

H1 {font – size: 200%}

H2 {font – size: 150%}

H3 {font – size: 230%}

3.7. Псевдоселекторы

Псевдоселекторами называются свойства, которые определяют для гиперссылок. Чтобы задать свойства гиперссылок, используется следующая конструкция:

a {text – decoration:none} отменить подчеркивание

a: link {color:red} не просмотренная гиперссылка

a: visited {color:white} просмотренная гиперссылка

a:hover {color:green} когда на нее навели указатель мыши

a:active {color:blue} активная гиперссылка (состояние в процессе нажатия на ссылку).

Замечание : В CSS 2 селекторы :active и :hover могут использоваться с элементами, отличными от ссылок, но такое применение не поддерживается в Internet Explorer (версии 6) и Netscape 4.

Love, НА!

Чтобы псевдоклассы ссылок (анкеров) функционировали правильно, они должны находиться в таблице стилей в определенном порядке. Аббревиатура LVHA (популярный способ произношения – Love, НА!) позволяет запомнить правильный порядок: : link, :visited, :hover, :active. Это относится и к порядку, и к специфичности. Если поместить :link или :visited в конец, они подменят собой состояния :hover и :active, и тогда эти стили отображаться не будут.

3.8. Другие псевдоклассы css 2.1

Помимо анкерных псевдоклассов, в спецификации CSS 2 вводятся дополнительные селекторы псевдоклассов. Однако нужно помнить, что они на данный момент не очень хорошо поддерживаются.

:focus

Выбираются элементы, получившие фокус, например элемент формы, который был выделен и принимает от пользователя данные. Хотя CSS 2 разрешает применять данный селектор к любому элементу, в настоящее время поддерживается его использование только с элементами формы. В Netscape 6 поддерживается использование данного селектора с элементами a, input, textarea и select.

Пример: input:focus {background-color:yellow;} ;

:first-child

Выбирается элемент, являющийся первым дочерним элементом родительского элемента. Этот селектор позволяет выбрать, например, первый абзац элемента div или первый элемент li в элементе ul.

Пример: li:first-child {font-weight: bold;}

:lang( )

Выбирается элемент, для которого был указан язык.

Пример: р:lang(de) {color: green;}

Предупреждение о поддержке браузерами: Internet Explorer для Windows версий 6 и ниже не поддерживает псевдоклассы :focus и :first-child. Браузеры Internet Explorer 5 для Macintosh, Netscape 6+ и Opera 7+ поддерживают эти псевдоклассы.

Псевдоэлементы

Селекторы псевдоэлементов работают так, как если бы они вставляли в структуру документа фиктивные элементы для применения стилей. Псевдоэлементы, по сути, явля­ются частями существующих элементов с учетом контекста, например первая строка или первое слово. В CSS 2.1 включено четыре псевдоэлемента:

:first-line

Этот селектор применяет стилевое правило к первой строке указанного элемента. Свойства, которые можно применить к псевдоэлементу :first-line, ограничиваются следующими: font, background, word-spacing, letter-spacing, text-decoration, vertical-align, text-transform, line-height и text-shadow.

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

р:first-line {letter-spacing: 6pt;}

:first-letter

Стиль применяется к первой букве элемента. Можно использовать только свойства font, color, background, margin, padding, border, text-decoration, vertical-align, text-transform, line-height и float. В CSS 2.1 к этому псевдоэлементу были добавлены свойства letter-spacing и word-spacing.

В следующем примере первая буква абзаца отображается крупным шрифтом и красным цветом.

p.opener:first-letter {font-size: 300%; color: red;}

:before и :after

В CSS 2 появились два псевдоэлемента, вставляющих сгенерированные данные до и/или после указанного элемента и объявляющие стиль для этих данных.

Данный код вставляет кавычки большого размера до и после длинной цитаты (&8220 ; и &8221; – это символьные сущности для левой и правой фигурной кавычки):

blockquote:before {content: "“"; font-size: 24px; color: purple;} blockquote:after {content: "”"; font-size: 24px; color: purple;}

Предупреждения о браузерах: Internet Explorer версий 6 и ниже не поддерживает генерируемые данные (:before и : after). Браузеры Netscape 6+, Firefox/Mozilla и Opera 7+ поддерживают сгенерированные данные. Все современные, использующие CSS браузеры достаточно хорошо поддерживают селекторы :first-letter и :first-line