Классы и псевдо–классы в CSS

«Классы и псевдо–классы в CSS» – седьмой урок учебника CSS. В этом уроке мы поговорим об использовании псевдо–элементов CSS.

Работа с классами и псевдо-классами в CSS позволяет применить дополнительные методы форматирования к текстам и некоторым другим элементам страниц сайта.

Работа с классами в CSS .

Использование псевдо–классов позволяет добиться определенных эффектов для элементов. Ниже вы сможете увидеть все на примерах.

Синтаксис псевдо–классов:

В общем виде синтаксис псевдо–классов выглядит следующим образом:

selector:pseudo–class {property: value}

А вот и наглядный пример:

a.silver:visited {color: #C0C0C0 }

Анкорные псевдо–классы:

Существует несколько основных CSS методов работы со ссылками:

a:link {color: #808080 } - непосещенная ссылка
a:visited {color: #008000 } - посещенная ссылка
a:hover {color: #008080 } - выбранная ссылка
a:active {color: #00FF00 } - нажатая ссылка

a.aa1:link
{
color: #BDB76B;
}
a.aa1:visited
{
color: #008000
}
a.aa1:hover
{
color: #008080
}
a.aa1:active
{
color: #00FF00
}

В данном примере мы создаем селектор a.aa1 и применяем к нему анкорные псевдо-классы.

Порядок написания данного CSS кода должен сохраняться. Тоесть a:hover должен идти после a:visited и a:link, а a:active должен идти после a:hover, иначе ничего не получится.

Список псевдо–классов CSS.

:active – позволяет добавить стиль выбранному элементу
:focus – позволяет добавить стиль элементу выделенному элементу
:hover – позволяет добавить стиль элементу, над которым находится курсор мыши
:link – позволяет добавить стиль непосещенной ссылке
:visited – позволяет добавить стиль посещенной ссылке
:first – child – позволяет добавить стиль первому потомку некоторого элемента
:lang – позволяет определить язык, используемый для данного элемента

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

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

Использование псевдо–элементов позволяет добиться специальных эффектов для некоторых селекторов. Ниже приведенны примеры.

Синтаксис псевдо–элементов:

В общем виде синтаксис псевдо–элементов выглядит следующим образом:

selector:pseudo–element {property: value}

Пример:

div:first – letter {color: #808000; font – size: 150%}
div:first – line {color: #808080 }

Псевдо–элемент: first–line.

Данный псевдо элемент позволяет добавить специальный стиль для первой строки текста в элементе:

div.a
{
font – size : small; color : Blue;
}

div.a:first – line
{
color: #808000; font – variant: normal
}

Текст, продолжающийся на две или большее количество строк

Псевдо–элемент: first–letter.

Позволяет добавить специальный стиль для первой буквы в элементе:

div
{
font – size: 20pt
}
div:first – letter
{
font – size: 150%; float: right
}

Первая буква имеет специальный стиль

Before

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

Следующий стиль будет выводить изображение указателя каждый раз перед появлением заголовка h5. (это и есть заголовок h5).

h5:before
{
content: url(img/list_style_type_1.gif);
}

After

Позволяет выполнить вставку каждый раз после появления указанного элемента

Следующий стиль будет выводить изображение указателя каждый раз после появлением заголовка h6. (это и есть заголовок h6).

h6:after
{
content: url(img/list_style_type_3.gif);
}

На данном этапе работу с классами, псевдо-классами и псевдо-элементами в CSS можно считать оконченной. Сегодня мы разобрали достаточно интерестный элемент форматирования, который позволяет упростить многие рутинные процессы. Например создание буквицы (вместо того, чтобы применять класс к первой букве абзаца каждый раз, вам достаточно один раз настроить CSS правило и все будет происходить на автомате).

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

Наверх

Источник: Создание сайтов