#Урок 4. Псевдоклассы и псевдоэлементы в css

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

К псевдоэлементам относятся:

  • first-letter — задает стиль первой букве в слове. Пускай на странице html есть какой-либо абзац:

<html>

<head>

<title>Заголовок нашей страницы</title>

<link rel="stylesheet" type="text/css" href="style.css">

</head>

<body>

<p> Это текст параграфа и первой букве в нем мы зададим синий цвет. </p>

</body>

</html>

Выделяем первую букву нашего параграфа синим цветом и для этого нашей таблице стилей необходимо написать следующее:

p:first-letter{

color:blue; }

Теперь текст на нашей странице будет выглядеть вот так:

Это текст параграфа и первой букве в нем

мы зададим синий цвет.

  • first-line — задает стиль первой строке в абзаце. К примеру выделим первую строку в абзаце красным цветом. Для этого в таблице стилей нужно написать:

p:first-letter{

color:blue; }

p:first-line{

color:red; }

И теперь вот так мы будем видеть текст на нашей странице:

Это текст параграфа и первой букве в нем

мы зададим синий цвет.

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

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

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

    • a:link — обычная ссылка
    • a:active — активная ссылка
    • a:visited — ссылка которую мы посещали
    • a:hover — та, на которую наведен курсор

Как мы знаем, по умолчанию ссылки имеют синий цвет и они подчеркнуты. Допустим у нас на html-странице есть ссылка:

<html>

<head>

<title>Заголовок нашей страницы</title>

<link rel="stylesheet" type="text/css" href="style.css">

</head>

<body>

<a href="#">ссылка</a>

</body>

</html>

По умолчанию она выглядит так:

ссылка

Теперь давайте сделаем ее красной и уберем подчеркивание:

a{

color:red; text-decoration:none;

}

Сразу хочу вам сказать, что свойство text-decoration отвечает за подчеркивание, а его значение none указывает, что подчеркивать нашу ссылку не надо.

И вот в итоге как будет выглядеть наша ссылка:

ссылка

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

a{

color:red; text-decoration:none;

}

a:hover{

color:green;

}

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

Псевдоклассам можно задавать такие же свойства, как и остальным элементам. Ну и на этом наш урок закончен. Двигаемся дальше!

 

One Reply to “#Урок 4. Псевдоклассы и псевдоэлементы в css”