19 марта 2010
No Comments

Дело № 28: Псевдоклассы. Часть 1

css

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

:link {...правила..} /*правильно*/
a:link {...правила...} /*правильно*/
p:first-line em {...правила...} /*ошибка*/

Псевдоклассы :link и :visited

Просматривая веб-страницы вы должно быть заметили, что ссылки по умолчанию бывают двух цветов. Возможно это пошло еще из первого браузера «Мозаика» и означает наличие на странице двух видов ссылок: уже посещенных и еще не посещенных пользователем. Возможно вы захотите переопределить цвет и другие свойства таких ссылок, это можно осуществить с помощью псевдоклассов :link и :visited
В этом примере мы убрали подчеркивание у еще не посещенных ссылок и сделали шрифт ссылки жирным:

a:link {
text-decoration:none;
font-weight:bold;
}

А теперь переопределим вид посещенных ссылок. Здесь мы их подчеркнули и шрифт сделали нормальным.

a:visited {
text-decoration: underline;
font-weight: normal;
}

Иногда бывает необходимо установить одинаковые свойства для посещенных и не посещенных ссылок:

a:link , a:visited {
text-decoration: underline;
color: black;
font-weight:normal;
}

Псевдоклассы :active, :hover и :focus

Теперь рассмотрим динамические псевдоклассы. Они названы динамическими поскольку поведение элементов на странице зависит от действий пользователя, например при перемещении курсора через элемент или при щелчке на элементе:

  • :hover => наведение указателя мыши на область элемента;
  • :active => элемент выбирается щелчком мыши;
  • :focus => оно применяется к элементу, который получил фокус (щелчком или Tab или Shift + Tab), например в поле формы был установлен курсор и можно вводить в него текст;

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

p:hover {
background-color:#ffff99;
}

Псевдокласс :focus применяется для элементов <A>, <INPUT>, <SELECT> и <TEXTAREA>.

еще по CSS

Статьи по теме
Статья оказалась полезной? Подпишись на RSS рассылку или следуй за мной на твиттере @wpstarter или по этой ссылке wpstarter

Рубрика: каскадная таблица стилей CSS


Оставьте комментарий(поставьте галочку "Я не робот")

Я не робот.