Делаем добро вместе Детальнее

#3 – Селекторы для выборки элементов

#3 – Селекторы для выборки элементов

Для выборки HTML объектов требуется прописать селектор выбора. За урок мы познакомимся с различными форматами селекторов выбора и научимся добавлять стили к разным HTML объектам.

Видеоурок

При помощи селекторов и правил мы можем выбрать нужные объекты, после чего применить стили конкретно для выбранных объектов. Специально для этого в 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 месяца

Также стоит посмотреть

Вёрстка адаптивного сайта на Bootstrap 4
6 уроков
Верстка сайта на HTML5 и CSS3
13 уроков
Изучение ASP.NET Core MVC. Создание сайтов на C#
10 уроков
Современная вёрстка адаптивного веб-сайта
Изучение технологии Bootstrap (верстка сайта)
16 уроков
Видеокурс по PHP, MySQL / Создание динамического сайта
Комментарии для сайта Cackle