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

27.10.2022 13:33

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

 

    Как было сказано выше, 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 - задает стиль ссылки, на которую наведен курсор.

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

 

<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;
}
    

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

    Псевдоклассам можно задавать такие же свойства, как и другим элементам.

Назад