#4 - Селекторы в CSS и правила CSS

#4 - Селекторы в CSS и правила CSS

Чтобы добавлять стили к объектам необходимо научиться выбирать объекты из DOM-структуры HTML файла. В уроке мы научимся выбирать нужные объекты при помощи CSS селекторов и правил.

Видеоурок

При помощи селекторов и правил мы можем выбрать нужные объекты, после чего применить стили конкретно для выбранных объектов. В 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 уроков
Видеокурс по PHP, MySQL / Создание динамического сайта
Создание адаптивного сайта
4 урока
Изучение препроцессора SASS / SCSS
7 уроков
Верстка сайта на HTML5 и CSS3
13 уроков
Изучение HTML5 от нуля до гуру!
21 урок
Комментарии для сайта Cackle