Есть несколько элементов, которых нет в HTML, но они есть на странице (к примеру первая буква слова) их называют псевдоэлементами. Псевдоэлементам тоже можно задавать стиль.
К псевдоэлементам относят:
first-letter - стиль для первой буквы слова. Пример:
<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 - стиль ссылки, на которую наведен курсор
По умолчанию ссылки всегда синего цвета и подчеркнуты. Давайте потренируемся:
<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;
}
Проверяем нашу страничку и видим, что при наведении мышкой ссылка меняет цвет с зеленого на красный.
