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

Здравствуйте, сегодня мы познакомимся с такими важными частями сайтов, как псевдоклассы и псевдоэлементы.

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

Псевдоклассы — CSS элементы, которые позволяют создавать стили для различных состояний элементов. Это динамические элементы, которые позволяют изменять стили как для состояния, так и расположения. Примером псевдокласса могут служить стили для различного состояния ссылок.

Чтобы создать стили для псевдокласса, его нужно создать в css документе. Для этого пишем имя класса или идентификатора, ставим ":", а после него, без пробела, записываем название псевдокласса.

Псевдоклассы можно использовать и без селекторов, допустима такая запись: :hover{border: 1px solid silver}. В этом случае, рамка будет устанавливаться для каждого элемента страницы, на которого будет наведен курсор.

Псевдоклассы состояния

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

  • Активный элемент(:active). В большинстве случаев используется для ссылок. Его работа заключается в том, что он активизирует определенные ссылки при нажатии кнопкой мыши на определенный элемент.
  • Непосещенная ссылка(:link). Задает стили для ссылок, на которые ещё не осуществлялся переход. Эта запись почти не указывается для внешних ссылок, так как с его задачей прекрасно справляется обычный селектор ссылки.
  • Фокусировка(:focus). Этот псевдокласс применяется преимущественно для форм. Он активируется только тогда, когда пользователь нажал на форму и ему стало доступно поле ввода.
  • Наведение(:hover). Активируется при наведении на элемент, когда курсор попадает за его границы. Отличается от ":focus" тем, что на элемент не нужно кликать мышью.
  • Посещенная ссылка(:visited). Противоположный псевдоселектору ":link" — используется только для посещенных ссылок. Но он не будет указан по умолчанию, как псевдокласс ":link".

В данном примере мы будем использовать обычную кнопку, которая будет изменяться в различных состояниях.


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

<!doctype html>

<html>

<head>

<title>Pagination. HTML, CSS and JavaScript(JQ)</title>

<meta charset="utf-8">

<link href="style.css" rel="stylesheet">

</head>

<body>

<a href="">Active</a>

<a href="">Link</a>

<a href="">Hover</a>

</body>

</html>


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

body{

width: 80%;

margin: 0 auto;

font-family: "Tahoma", serif;

height: 100vh;

margin-top: 15px;

}


a{

border: 3px solid #000000;

margin-right: 10%;

background-color: #ffffff;

padding: 0 2%;

text-decoration: none;

color: black;

transition: All 0.5s ease;

}


a:hover{

border: none;

background-color: #000;

color: #fff;

padding: 0.5% 2.3%;

}


a:active{

border: 3px solid #000000;

background-color: #fff;

color: #000;

padding: 0.2% 2%;

}


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

Древо элемента

Другая группа классов не зависит от состояния элемента, а от его расположения в древе страницы.

Первый дочерний элемент(:first-child). Применяется к определенному блоку, который содержит в себе элементы. Псевдокласс ищет самый первый элемент, находящийся внутри, и применяет к нему стили.

Псевдокласс языка

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

Псевдоэлементы. HTML & CSS

Позволяют задавать стили для неопределенных элементов, генерировать контент, который не указан в исходном HTML коде.

Создаются, как и псевдоклассы, но без селектора они не работают. Запишите селектор определенного элемента в вашем HTML документе, затем поставьте двоеточие, а после запишите название псевдокласса. Ниже мы перечислим основные из них.

  1. Дополнительная вставка после элемента(:after). Он берет определенный элемент, а затем генерирует определенный контент, который будет располагаться после указанного элемента. Для вставки информации используется свойство content. Может использоваться для пояснения чего-нибудь, либо же для создания блока "Запомните!" или "Внимание!".
  2. Вставка перед элементом(:before). Полная противоположность псевдоэлементу after. Он позволяет вставить контент перед элементом. Очень полезен для создания нестандартных маркеров для списка.
  3. Первая буква в тексте(:first-letter). Псевдоэлемент позволяет создать стили только для первой буквы. Можно использовать для создания выступающих инициалов. Здесь возможно применить не все стили, но обычно используют только смену цвета и размеров буквы.
  4. Первая строка(:first-lane). Задает стили для первой строки текста. Для него применяются только некоторые свойства. Например вы не сможете задать рамку для первой строки текста, но сможете поменять стиль и цвет шрифта.

Заключение

Теперь вы узнали о псевдоэлементах и псевдоклассах. Правильное использования данных инструментов позволяет создать более качественный дизайн страницы.

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

Теги:
0

Оставить своё мнение

Ваш e-mail не будет опубликован. Обязательные поля помечены *