Глава 15. Псевдоклассы

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

Для того чтобы применить тот или иной псевдокласс к элементу и определить его стиль нужно следовать следующим правилам синтаксиса: a:hover{color:#ff0}

где:

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

Так собственно мы подошли к псевдоклассу hover.

Псевдокласс hover

Псевдокласс hover активизируется в том случае, если на элемент наведен курсор.

Пример:

<title>Псевдоклассы</title>

<style>

.menu{display:block;width:180px;background:#fdc;color:#008;font-size:16px;text-decoration:none;padding:3px} .menu:hover{display:block;width:180px;background:#b88;color:#fff;padding:3px;font-size:16px;text-decoration:none} tr:hover{background:#b88} </style>

<p>Чем Вам не блок навигации по сайту?

<a href=# class=menu>Главная</a>

<a href=# class=menu>Карта сайта</a>

<p>А вот ещё 1 распространенный трюк. Строки в таблице подсвечиваются при наведении на них курсором.

<table border bordercolor=#ccc width=600 cellpadding=1 cellspacing=0>

<tr>

<td>Иванов<td>+<td><td><td>+<td><td>

<tr>

<td>Петров<td><td>+<td><td><td>+<td>

<tr>

<td>Сидоров<td><td><td>+<td><td><td>+

</table>

смотреть пример

Несколько слов к примеру выше.

Как Вы наверное заметили в качестве селектора псевдокласса может выступать не только какой либо элемент - тег, но и класс. Так в примере к классу .menu применён псевдокласс hover и синтаксис приобретает следующий вид: .menu:hover{color:#ff0}

Не запутались в терминологии?

Мы сказали браузеру, чтобы подсвечивал красным только те ссылки, которые находятся в навигационном блоке (выведены в класс menu), а остальное оставить, как есть!

Псевдокласс hover может быть применён к любому элементу, выводимому на экран. В примере для того чтобы организовать подсветку строк таблицы, применен к тегу tr (IE6 и его более ранние версии поддерживает псевдокласс hover только для ссылок, строки таблицы при наведении на них курсора в браузерах IE6 и ниже подсвечиваться не будут).

Псевдоклассы и ссылки

Рассмотрим сразу 3 псевдокласса созданных для работы со ссылками.

Пример:

<title>Псевдоклассы и ссылки</title>

<style>

a:link{color:#0ff}

a:active{color:#ff0}

a:visited{color:#008}

</style>

<a href=#1>Ссылка на 1 якорь</a>

<a href=#2>Ссылка на 2 якорь</a>

<a href=#3>Ссылка на 3 якорь</a>

<hr>

<a name=1><h4>1 якорь</h4></a>

<p>Псевдокласс link в примере указывает, что все непосещенные ссылки должны отображаться синим цветом.

<a name=2><h4>2 якорь</h4></a>

<p>Попробуйте нажать и удерживать на 1 из непосещенных ссылок, чтобы увидеть для работу псевдокласса active.

<a name=3><h4>3 якорь</h4></a>

<p>visited - псевдокласс, который в примере говорит о том, что все посещенные ссылки должны отображаться зеленым цветом.

смотреть пример

Теперь расскажу более подробно.

Псевдокласс active присваивает ссылке определённый стиль в тот момент когда эта ссылка активна, т.е. в тот момент когда пользователь нажал на ссылку, но еще не отпустил кнопку мыши. Active - это стиль ссылки в момент клика по ней.

Браузеры некоторое время помнят, на какие ссылки нажимал пользователь в последнее время, так вот, псевдокласс visited указывает стиль ссылки, которая недавно посещалась пользователем.

Псевдокласс link описывает стиль ссылки, которая ранее не посещалась пользователем. Надо отметить, что никакой ощутимой разницы между записью a{.} и a:link{.} нет, так что применение данного псевдокласса в этом случае ровным счетом ничего не меняет.

Все 3 вышеперечисленных псевдокласса предназначены для работы с ссылками, однако псевдокласс active может быть применён к любому элементу (работать будет везде, кроме браузера IE 6 и ниже).

Псевдокласс focus

Данный псевдокласс определяет стиль элемента, если тот находится в фокусе. Теперь о том, что такое фокус? Фокус в CSS обозначает элемент, который находится в центре внимания пользователя. Такими элементами могут быть теги a, input, select и textarea.

Пример:

<title>Псевдокласс focus</title>

<style>

input:focus{color:red}

</style>

<form>

<input type=text value=Ввод size=30>

</form>

<p>Ввели? А теперь щелкните по пустому месту на экране, чтобы форма потеряла фокус.

смотреть пример

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

Псевдокласс first-child

Все элементы можно определить как родительские или дочерние, а элемент-родитель может содержать в себе несколько дочерних элементов, например:

<div> - блок родитель

<p> - 1-й дочерний элемент

<p> - 2-й дочерний элемент

</div>

Псевдокласс first-child определят стиль 1-го дочернего элемента, находящегося в родительском контейнере.

<title>Псевдокласс first-child</title>

<style>

div{margin:20px;padding:30px;background:#c0e;border:2px solid #008} p{color:#555;background:#dcd;border:2px solid #555} p:first-child{color:#f00;background:#c5f;border:2px solid #008} </style>

<div>

<p>1-й дочерний параграф - выделен псевдоклассом first-child.

<p>2-й дочерний параграф.

<p>3-й дочерний параграф.

</div>

<div>

<p>и здесь 1-й дочерний параграф выделен, хотя блок-родитель уже другой.

<p>2-й дочерний параграф.

</div>

смотреть пример

Обратите внимание на тот факт, что если бы в блоке-родителе перед дочерними параграфами стоял любой другой тег, напрмер, заголовок h1, то псевдокласс first-child уже не действовал бы к 1-му параграфу, т.к. хоть параграф то он и 1-й, но элемент в блоке родителе уже 2-й.

Применяют данный псевдокласс в тех случаях, если требуется задать разный стиль для первого и последующих элементов, например сделать "буквицу"- 1 единственную в начале документа или обозначить 1-й абзац текста на всех страницах сайта, выделить 1-й пункт в списках.и т.д.

Язык текста

Псевдокласс lang определяет язык текста того или иного элемента или документа в целом.

Если Вы помните из курса HTML, язык документа определяют атрибуты: charset (кодировка документа) и content (язык документа).

Для того, чтобы определить язык отдельно взятого текстового блока, используют псевдокласс lang(), в круглых скобках которого и указывается язык.

Пример:

Всё вместе пишется так: span:lang(en){font-style:italic}//текст взятый в контейнер span - английский, он должен отображаться курсивом.

Пример:

<title>Псевдокласс lang</title>

<style>

p:lang(ru){color:#00f}

p:lang(en){color:#f00}

</style>

<p lang=ru>Русский текст выделен синим.

<p lang=en>English text is chosen red.

смотреть пример

Обратите внимание, что в теге (в параграфе), указывается с помощью атрибута lang используемый язык и его стиль: <p lang=en>текст прописанный в блоке CSS.

Так же псевдокласс lang позволяет определять вид кавычек для цитат (тег q) с помощью значения quotes (кавычки). В России привычно использовать двойные кавычки, в других странах дела обстоят иначе.

Пишется так:

q:lang(en){quotes:"\201C" "\201D"}

В фигурных скобках после значения quotes указывается юникод символов или просто смволы для открывающей и закрывающей кавычки.

Пример:

<title>Псевдокласс lang. Цитаты</title>

<style>

q:lang(en){quotes:"\201C" "\201D"}

q:lang(de){quotes:"\201E" "\201C"}

q:lang(fr){quotes:"\00AB" "\00BB"}

q:lang(ru){quotes:"ёклмн." ".ёпрст"}

</style>

<div>

<p>Обратите внимание на вид кавычек для цитат:

<p><q>цитата по умолчанию</q>

<p><q lang=fr>французская цитата</q>

<p><q lang=de>немецкая цитата</q>

<p><q lang=en>английская цитата</q>

<p><q lang=ru>русская цитата</q>

</div>

смотреть пример

Полезные советы:

<< предыдущая глава | следующая глава >>