Создание псевдоклассов в CSS

Development | Amber | Комментировать запись

Эта серия мануалов покажет вам, как создать и настроить веб-сайт с помощью CSS, языка таблиц стилей, используемого для управления внешним видом сайтов. Вы можете выполнить все мануалы по порядку, чтобы создать тестовый веб-сайт и познакомиться с CSS, или вразброс использовать описанные здесь методы для оптимизации других проектов CSS.

Примечание: Найти все мануалы этой серии можно по тегу CSS-practice

Для работы с CSS вам нужно иметь базовые знания по HTML, стандартному языку разметки, который используется для отображения документов в браузере. Если ранее вы не работали с HTML, рекомендуем предварительно изучить первые десять руководств серии Создание веб-сайта с помощью HTML.

Псевдоклассы – это классы CSS, которые активируются только во время определенных состояний. Например, псевдокласс :hover можно использовать для изменения внешнего вида изображения или текстового элемента, когда курсор пользователя наведен на этот элемент. Псевдокласс :visited часто используется для изменения цвета ссылки после того, как пользователь кликнул по ней.

Чтобы в CSS объявить псевдокласс, нужно добавить двоеточие и имя псевдокласса к селектору тега, класса или идентификатора. Затем такой псевдокласс будет автоматически применяться к любому HTML-контенту, которому присвоен соответствующий тег, класс или идентификатор. Чтобы псевдокласс работал, не нужно добавлять дополнительный код к HTML-элементу.

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

Требования

Чтобы следовать этому мануалу, нужно подготовит среду по мануалу Подготовка проекта CSS и HTML с помощью Visual Studio Code.

Создание псевдокласса в CSS

Давайте попробуем создать псевдокласс и посмотрим, как он работает. Для начала убедитесь, что вы настроили все необходимые файлы и папки, как описано в одном из первых руководств этой серии (Подготовка проекта CSS и HTML с помощью Visual Studio Code).

Удалите весь текущий контент из файла styles.css (если из предыдущих мануалов в нем остался код) и добавьте следующий псевдокласс:

img:hover {
border: 10px solid red;
}

В этом фрагменте кода вы добавили выделенный псевдокласс :hover в селектор тега <img>. Сохраните файл и перейдите в файл index.html. В нем сотрите все (кроме первой строки кода: <link rel=”stylesheet” href=”css/styles.css”>). Затем добавьте следующий фрагмент HTML-кода в index.html:

<img src=”https://www.8host.com/blog/wp-content/themes/wp-8host-new/img/logo.svg”>

Обратите внимание, для удобства мы используем изображение, размещенное в Интернете. Вы также можете использовать другое изображение, размещенное на вашей машине, указав путь к файлу, как описано в мануале Добавление изображения на веб-страницу с помощью HTML.

Сохраните файл index.html и перезагрузите его в браузере. Если вы не знаете, как просматривать оффлайн-файл HTML, пожалуйста, обратитесь к нашему мануалу по работе с HTML-элементами (раздел «Просмотр оффлайн HTML-файла в браузере»).

На экране будет ваше изображение (мы используем тут наш логотип):

Попробуйте навести курсор на изображение. При перемещении курсора по изображению вокруг него должна появиться сплошная красная рамка шириной 10 пикселей.

Ваш браузер автоматически применяет псевдокласс hover, когда курсор взаимодействует с элементом img – это делается на основе правила, которое вы добавили в файл styles.css.

Вы также можете использовать псевдокласс hover с текстовыми элементами. Если вы хотите попробовать применить :hover к текстовому элементу, сотрите все в файле styles.css и добавьте в документ указанный ниже псевдокласс:

p:hover {
font-size:100px;
color:red;
}

Сохраните файл styles.css. Вернитесь в файл index.html, удалите все (кроме первой строки: <link rel=”stylesheet” href=”css/styles.css”>) и добавьте следующий фрагмент кода:

<p>Some text</p>

Сохраните файл и загрузите его в браузере, чтобы проверить результаты. Вы должны получить страницу с текстом «Some text»:

Some text

который меняет цвет и размер, когда вы наводите на него курсор:

Some text

Заключение

В этом руководстве вы узнали, как и зачем использовать псевдоклассы. Вы также попробовали применить их к HTML-элементам: к тексту и к изображению. Позже мы будем использовать псевдоклассы для создания футера нашего тестового веб-сайта (во второй половине этой серии).

В следующем мануале мы поговорим о создании и стилизации HTML-элемента <div>, который можно использовать для структурирования макета веб-страницы.