Знакомства на Just click it
Скоро новый год!
Онлайн радио
Вверх
Новые статьи

Архив

Классы и псевдо–классы в 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, которые позволят настроить отображение элементов на странице еще более детально.





Position в CSS
Clear, cursor, display, float, visibility в CSS
       
Наверх
Источник: Создание сайтов
Мы В Контакте Мы на Facebook Лента новостей RSS
Копирование и публикация материалов сайта разрешены только при наличии активной ссылки на источник
2011 - наши дни.. © Контакты | Лого | Реклама на сайте | Вебмастерам
Политика конфиденциальности | Пользовательское соглашение