Проверка селекторов
Селекторы CSS используются для выбора элементов для применения стиля. Селекторы предлагают большую гибкость и мощность. Селекторы позволяют применять стиль ко всем элементам или к одному конкретному элементу и даже к одному конкретному букве.
Существует три основных типа селекторов:
- Элементы
- Классы
- Идентификаторы
С помощью этих селекторов можно применять стили ко многим элементам или нескольким элементам.
Селекторы элементов
Селектор элементов применяется ко всем элементам с этим тегом. Любой элемент HTML можно использовать в качестве селектора элементов. Использование h1 позволяет изменять все h1 элементы на странице.
h1 {
/* style */
}
Селекторы классов
Все элементы HTML позволяют добавлять class атрибут.
class используется для группировки элементов и позволяет пометить их для применения параметров CSS.
При создании резюме у вас есть разделы для вашего образования и трудовой деятельности. Использование класса позволяет отформатировать эти элементы с одинаковым стилем.
<div class="history">
<h2>Employer name</h2>
<h3>Job title</h3>
<h3>3 Jun 19 - 8 Jun 21</h3>
</div>
<div class="history">
<h2>School name</h2>
<h3>Major</h3>
<h3>Sep 2014 - May 2018</h3>
</div>
В предыдущем примере вы, вероятно, хотите, чтобы форматирование каждого div из них было одинаковым, так как они отображают похожие типы информации. Помечая два элемента с одинаковым div классом, к каждому из них можно применить один и тот же стиль CSS.
Чтобы определить класс в CSS, вы префиксируете . перед именем префикс. В нашем примере вы будете использовать .history.
.history {
/* your styles */
}
При использовании CSS-файла вы напишете определение стиля класса в CSS-файле. Атрибут класса в HTML ссылается на определение из CSS-файла.
Псевдоклассы
Псевдоклассы позволяют определять элементы на основе их расположения на странице или способа взаимодействия пользователя с ними.
По мере того, как пользователь взаимодействует с веб-страницей, состояние различных элементов меняется. Пользователь может навести указатель мыши на элемент и изменить цвет при наведении указателя мыши. Или если пользователь выбрал ссылку. После того, как они перейдут по этой ссылке, вы можете сообщить им об этом, изменив стиль. CSS поддерживает множество псевдоклассов, которые применяются динамически на основе того, что делает или сделал пользователь. Псевдоклассы префиксируются и :помещаются после другого селектора.
Например, чтобы задать цвет фона ссылки на желтый при наведении курсора на него, можно использовать следующий CSS:
a:hover {
background-color: yellow;
}
Некоторые из наиболее распространенных псевдоклассов перечислены в следующей таблице:
| Псевдокласс | Описание |
|---|---|
hover |
Пользователь наведите указатель мыши на элемент |
visited |
Ссылка, по которой был ранее нажат |
link |
Невидимая ссылка |
first-child |
Первый дочерний элемент, соответствующий селектору в иерархии |
last-child |
Последний дочерний элемент, соответствующий селектору в иерархии |
Внимание
С помощью псевдоэлеминикатов и CSS можно удалить подчеркивание из гиперссылок. Как правило, рекомендуется оставить подчеркивание в целях специальных возможностей. Подчеркнутый текст позволяет пользователю быстро идентифицировать ссылки на странице.
Селекторы ID
Как и классы, идентификатор позволяет применять стиль к элементу. Но, хотя класс может применяться к нескольким элементам, идентификатор должен быть уникальным и ссылаться только на один элемент.
В резюме у вас может быть раздел для социальных сетей, таких как X, GitHub или ваш блог. Если для этого раздела требуется пользовательский стиль, можно задать идентификатор:
<div id="social-media">
<!-- list of links -->
</div>
Идентификаторы префиксируются с помощью # CSS:
#social-media {
/* style */
}
Примечание.
Стандартное соглашение об именовании для классов и идентификаторов заключается в использовании "skewer-casing". Каждое слово является строчным и разделено с помощью символа -. Имя skewer-case происходит от того, как слова отображаются, как если бы они могли быть на шпаже.