
#3 – Селекторы для выборки элементов
Видеоурок
При помощи селекторов и правил мы можем выбрать нужные объекты, после чего применить стили конкретно для выбранных объектов. Специально для этого в HTML и CSS существуют классы и идентификаторы. Они позволяют ставить метку на объект и потом по этой метке брать объект в CSS.
Существует множество правил и селекторов, которые позволяют выбирать различные объекты из HTML. Самыми распространенными вариантами выбора объектов является выбор по тегу, классу и идентификатору. Кроме того, мы можем комбинировать все это, чтобы получать более точные значения.
Важно понимать, что при выборе объекта по тегу или же по классу вы можете выбрать сразу множество различных объектов, а при выборе по идентификатору всего лишь один объект, так как на одной странице не может быть двух id
с одинаковыми значениями.
Важно. Если у вас два тега с одинаковыми идентификаторами, то современные браузеры все равно будут корректно выводить теги и стили к ним. Тем не менее, это не правильное решение, поэтому старайтесь такого не допускать, так как для подобных задач существуют классы.
Материалы для курса
Чтобы скачивать материалы к видеокурсам необходимо оформить подписку на сайт
Онлайн редактор кода
Задание к уроку
Есть HTML код:
<h3>Просто текст</h3>
<p>Еще <b>дополнительный</b> текст </p>
За счёт классов CSS выберите тег «H3», а также тег «b». К выбранным тегам добавьте стили:
- синей цвет текста;
- размер текста 23px.
Решение задания (HTML код):
<h3 class="styling">Просто текст</h3>
<p>Еще <b class="styling">дополнительный</b> текст </p>
Стили для объектов:
.styling {
color: blue;
font-size: 23px;
}
Получить остальные домашние задания можно после подписки на проект
Большое задание по курсу
Вам необходимо оформить подписку на сайте, чтобы иметь доступ ко всем большим заданиям. В задание входит методика решения, а также готовый проект с ответом к заданию.
PS: подобные задания доступны при подписке от 1 месяца
Также стоит посмотреть