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



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


Рссмотрим несколько элементов, которых не существует в HTML, но они имеются на странице (первая буква слова и первая строка абзаца). Такие элементы называют псевдоэлементами. Им также можно задавать стиль.

Рассмотрим псевдоэлементы:

  • first-letter - задает стиль первой букве слова.
  • first-line - задает стиль первой строке абзаца.

Для того, чтобы выделить первую букву абзаца красным цветом пропишем в таблице стилей:
p:first-letter{ color:red; }
Для выделения первой строки абзаца запишем в таблице стилей:
p:first-letter{ color:red; } p:first-line{ color:blue; }
Пример записи кода:

<html> <head> <title></title> <link rel="stylesheet" type="text/css" href="../Poleznoe/style.css"> </head> <body> <p>Это текст абзаца, и первую букву мы выделим красным цветом.</p> <p>Это текст абзаца, и первую букву мы выделим красным цветом.</p> </body> </html>

РЕЗУЛЬТАТ:

Это текст абзаца, и первую букву мы выделим красным цветом.

Это текст абзаца, и первую букву

мы выделим красным цветом.

Первая буква осталась красной, т.к. для нее прописан отдельный селектор.


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


В CSS существуют четыре псевдокласса, которые позволяют работать со ссылками. У ссылок есть четыре состояния: простая, активная, посещенная и та, на которую наведен курсор. Состояние ссылок зависит от действия пользователя. Для описания этих стилей применяют псевдоклассы.

  • a:link - придает стиль обычной ссылки.
  • a:active - придает стиль активной ссылки.
  • a:visited - придает стиль посещенной ссылки.
  • a:hover - придает стиль ссылки, на которую наведен курсор.

Допустим на нашей странице имеется ссылка. По умолчанию она выделяется синим цветом и подчеркнута.

Пример записи кода:

<html> <head> <title></title> <link rel="stylesheet" type="text/css" href="../Poleznoe/style.css"> </head> <body> <a href="#">ссылка</a> </body> </html>

РЕЗУЛЬТАТ:

ссылка

Уберем у нашей ссылки подчеркивание и изменим цвет, а для этого в таблице пропишем стиль


a{ color:green; text-decoration:none; }

Свойство text-decoration отвечает за подчеркивание, а none отменяет его.


Пример записи кода:

<html> <head> <title></title> <link rel="stylesheet" type="text/css" href="../Poleznoe/style.css"> </head> <body> <p>Текст имеет <a href="#">ссылку</a> </p> </body> </html>

РЕЗУЛЬТАТ:

Текст имеет ссылку


Вот так с помощью таблицы стилей можно изменять внешний вид страницы HTML.


Далее рассмотрим: Цвет и фон в CSS