HTML верстка, HTML коды, Каскадные таблицы стилей, Форматированные списки, Гиперссылки и Сети, Мультимедийные елементы Каскадные таблицы стилей, Форматированные списки, Гиперссылки и Сети, Мультимедийные елементы

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

a.plain:link, a.plain:active, a.plain:visited {color: blue}
a:link {color: blue}
a:visited {color: green}
a:active {color: red}
a.fancy:link {font-style: italic}
a.fancy:visited {font-style: normal}
a.fancy:active {font-weight: bold; font-size: 150%}

Простая (plain) версия <a> всегда синяя вне зависимости от состояния гиперссылки.Соответственно нормальная гиперссылка имеет сначала синий цвет, становится красной, когда активна, и превращается в зеленую после посещения. Затейливая (fancy) ссылка наследует цветовую схему нормальной, но ее текст до использования выводится курсивом, после посещения возвращается к обычному и вырастает в полтора раза и становится жирным, когда она активна.

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

В документах встречаются отношения между элементами, которые невозможно или неудобно выражать при помощи тегов. Употребление буквицы – это общепринятый прием при печати, но как выделить первую букву абзаца? Такие способы есть, но вам придется отмечать каждый случай в отдельности. Не существует тега для первой буквы абза
ца. Бывают ситуации, когда хочется, чтобы броузер автоматически генерировал содержимое, добавляя, например, префикс «элемент№», и автоматически нумеровал каждый элемент упорядоченного списка.

CSS2 вводит четыре псевдоэлемента, позволяющие определять особые отношения и стили для их отображения: first line (первая строка), first-letter (первая буква), before (перед чем-либо) и after (после чего-либо). Объявляйте эти отношения, добавляя к стандартному элементу разметки отделенный двоеточием суффикс. К примеру:

p:first line {font size: 200%; font style: italic}

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

p:first letter {font size: 200%; float: left}

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

Псевдоэлементы :before и :after позволяют указывать в документе места, куда вставляется автоматически генерируемое содержимое, в частности особые заголовки и т. д. Стало быть, эти псевдоэлементы идут рука об руку с такими свойствами CSS2, как counter и content. Следующий пример вас, возможно, заинтересует:

ul {counter-reset: item; list-style: none}
ul li:before {content: «Item #» counters(item), » «;
counter-increment: item}
…
<ul>
<li> This is item number 1.</li>
<ul>
<li> This is sub-item number 1.1.</li>
</ul>
<li> This is item number 2.</li>
<ul>
<li> This is sub-item 2.1.</li>
<li> This is sub-item 2.2.</li>
… and so on

Все популярные броузеры поддерживают псевдоэлементы, порождающие эффекты. При этом Internet Explorer не поддерживает свойство content. Получается, что только Firefox и Opera корректно отображают последовательную нумерацию элементов списка, определенную в предшествующем примере.