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

CSS2 псевдокласс :first-child позволяет указать способ, каким можно отобразить элемент, являющийся первым потомком некоего родительского элемента. К примеру, следующее правило применяется только к тем абзацам, которые входят первыми в состав раздела. Перед абзацем не должно быть никаких элементов (обратите внимание на специальное использование знака «больше» по отношению к первому элементу-потомку):

div > p:first-child {font-style: italic}

В соответствии с этим правилом первый абзац в следующем HTML-фрагменте будет выведен курсивом, если броузер поддерживает стандарт CSS2, поскольку он является первым дочерним элементом своего раздела. Наоборот, второй абзац идет после заголовка уровня 2, являющегося первым дочерним элементом во втором разделе. Поэтому
второй абзац выводится обычным текстом, поскольку не является первым элементом раздела:

<div>
<p>
Я отображаюсь курсивом, потому что мой абзац является первым
элементом раздела.
</p>
</div>
<div>
<h2> Новый раздел</h2>
<p>
Я отображен обычным шрифтом, потому что этот параграф – второй
потомок в разделе.

Наконец, стандарт CSS2 определяет новый псевдокласс, который позволяет выбирать элемент, основываясь на его языке. В частности, если включить в тег <div> атрибут lang=fr, то броузер поймет, что раздел содержит текст на французском языке, и, возможно, будет обращаться с ним в особой манере. Другой путь – самим установить определенный способ отображения, определив псевдокласс :lang. К примеру:

div:lang(it) {font-family: Roman}

говорит, что текст в разделах, содержащих итальянский язык, должен применять шрифты семейства Roman. Как считаете, подходит? Заметьте, что язык указывается в скобках сразу после ключевого слова lang. Используйте для псевдокласса :lang те же коды языков
по стандарту ISO, что и для атрибута lang.

Стандарт CSS2 определяет два новых псевдокласса, которые вместе с :active реагируют на поступки пользователя и советуют интерактивному агенту, скажем броузеру, как отображать элемент, подвергнувшийся внешнему воздействию. Другими словами, эти два псевдокласса являются динамическими: hover и focus.

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

a:hover {color: yellow}

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

Подобным образом псевдокласс :focus позволяет изменить стиль элемента, который стал объектом внимания. Элемент может попасть в сферу обзора, если вы дошли до него, нажимая клавишу «Tab», щелкнули на нем мышью или – в зависимости от броузера – подвели к нему курсор. Независимо от способа, каким ему уделено внимание, стилевое
правило, ассоциированное с псевдоклассом :focus, будет применяться к этому элементу, пока вы не утратите к нему интереса.

Популярные, поддерживающие стандарт CSS2 броузеры различают три специальных состояния гиперссылок, созданных при помощи тега <a>: неиспользованная, используемая и использованная. Броузер способен изменять внешний вид содержимого тега, обозначая его состояние подчеркиванием, например, или цветом. При помощи псевдоклассов можно управлять тем, как эти состояния отображаются, определяя стили для a:link (неиспользованная), a:active (используемая) и a:visited (использованная).

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

Чтобы полностью определить все три состояния тега <a>, можно написать:

a:link {color: blue}
a:active {color: red; font-weight: bold}
a:visited {color: green}

В этом примере неиспользованные ссылки будут синими. Когда посетитель выберет гиперссылку, броузер переменит ее цвет на красный и шрифт сделает жирным. Однажды использованная ссылка вернется к традиционному зеленому цвету.