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

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



Псевдоэлементы - элементы, отсутствующие в 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-файл, состоящий из нескольких абзацев и подключим к нему нашу таблицу стилей. Вот и код файла:

<html>
 <head>
  <title>Несколько абзацев</title>
  <link href="style4.css" type="text/css" rel="stylesheet">
 </head>
 <body>
  <p id="first">Первая строчка первого абзаца<br>
вторая строчка первого абзаца</p>
  <p>Текст второго абзаца</p>
  <p>Третий пошёл</p>
  <p>Следом четвёртый<p>
 </body>
</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 год.


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