К псевдоэлементам относят:
<html>
<head>
<title>Заголовок документа</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<a href="#">ссылка</a>
</body>
</html>
Сейчас она выглядит так:
Давайте сделаем нашу ссылку зеленой и уберем подчеркивание:
a{
color:green;
text-decoration:none;
}
Забегая вперед, скажу, что свойство text-decoration отвечает как раз за подчеркивание, а его значение
none указывает, что подчеркивать не надо.
Теперь, давайте зададим стиль для ссылки, на которую наведен курсор. Пусть она становится красного цвета:
a{
color:green;
text-decoration:none;
}
a:hover{
color:red;
}
Обновите вашу страницу в браузере и убедитесь, что при наведении мышкой на ссылку, она меняет зеленый цвет на красный.
Псевдоклассам можно задавать такие же свойства, как и другим элементам. Начиная со следующего урока, мы начнем изучать сами свойства CSS и сферу их применения.
Предыдущий урок Вернуться в раздел Следующий урок
Теперь нажмите кнопку, что бы не забыть адрес и вернуться к нам снова.
Как сделать сайт → Уроки CSS → Урок 4. Псевдоэлементы и псевдоклассы
CSS - Урок 4. Псевдоэлементы и псевдоклассы
Как было сказано выше, 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:red; } 
- first-line - задает стиль первой строке абзаца. Выделим первую строку нашего абзаца
синим цветом. Для этого в таблице стилей напишем:
Теперь наша страница в браузере выглядит так:
p:first-letter{ color:red; } p:first-line{ color:blue; } Обратите внимание, что первая буква осталась красного цвета, т.к. для нее задан отдельный селектор.
Псевдоклассы
В CSS существуют четыре псевдокласса, они позволяют работать со ссылками. Как вы знаете, у ссылок есть четыре состояния: простая, активная, посещенная и та, на которую наведен курсор. Состояние ссылок зависит от действия пользователя, и браузер, в зависимости от этих действий может применять разные стили. Для описания этих стилей и существуют псевдоклассы.- a:link - задает стиль обычной ссылки.
- a:active - задает стиль активной ссылки.
- a:visited - задает стиль посещенной ссылки.
- a:hover - задает стиль ссылки, на которую наведен курсор.
Псевдоклассам можно задавать такие же свойства, как и другим элементам. Начиная со следующего урока, мы начнем изучать сами свойства CSS и сферу их применения.
Предыдущий урок Вернуться в раздел Следующий урок
Теперь нажмите кнопку, что бы не забыть адрес и вернуться к нам снова.