Псевдоэлементы и псевдоклассы

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

Псевдоэлементы - элементы, отсутствующие в html, но имеющие место быть на веб-странице. В настоящее время таких элементов два. Это:

  1. Первая буква слова, обозначается first-letter;
  2. Первая строка абзаца, first-line.

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

p#first:first-letter {
color:red;
font-family:segoe script;
font-size:20px;
}
p#first:first-line {
color:green;
}

Теперь создадим html-файл, состоящий из нескольких абзацев и подключим к нему нашу таблицу стилей. Вот и код файла:


 
  Несколько абзацев
  
 
 
  

Первая строчка первого абзаца

вторая строчка первого абзаца


  

Текст второго абзаца


  

Третий пошёл


  

Следом четвёртый


 

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

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

Псевдоклассы используются для работы со ссылками. В CSS четыре псевдокласса:

  1. a:active - используется для задания стиля активных ссылок;
  2. a:hover - используется для задания стиля ссылок, на которые наведён курсор мыши;
  3. a:link - используется для задания стиля ссылок. Аналогом этого псевдокласса является элемент a;
  4. a:visited - используется для задания стиля ссылок уже посещённых веб-страниц.

Рассмотрим пример. Создадим таблицу стилей для ссылок.

a {
color:blue;
font-family:segoe script;
font-size:50px;
text-decoration:none;
}
a:hover {
text-decoration:underline;
}

Эта таблица стилей подключена к самой первой странице этого проекта, именно с неё всё и началось.

2012 год.


<<Предыдущая | В раздел | Следующая>>