Язык CSS
Псевдоэлементы и псевдоклассы.
Как было сказано выше, CSS применяется к элементам HTML. Но есть несколько элементов, которых не существует в HTML, но они присутствуют на странице (первая буква слова и первая строка абзаца). Такие элементы и называют псевдоэлементами. Им можно задавать стиль, также как и элементам HTML. К псевдоэлементам относят:
first-letter - задает стиль первой букве слова.
Попробуем на практике.
Напишем 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-странице ссылку (на http://htmlbook.ru/samcss/psevdoklassy). Сделаем нашу ссылку зеленой и уберем подчеркивание:
a{
color:green;
text-decoration:none}
Свойство text-decoration отвечает как раз за подчеркивание, а его значение none указывает, что подчеркивать не надо.
Теперь, зададим стиль для ссылки, на которую наведен курсор. Пусть она становится красного цвета:
a{
color:green;
text-decoration:none}
a:hover{
color:red}
Обновите вашу страницу в браузере и убедитесь, что при наведении мышкой на ссылку, она меняет зеленый цвет на красный.
Псевдоклассам можно задавать такие же свойства, как и другим элементам. Далее мы будем изучать сами свойства CSS и сферу их применения.
Источники:
| ← Язык CSS. Правила и селекторы. | Язык CSS. Свойства - color (цвет) и background (фон). → |