itProger Видеокурсы Изучение CSS/CSS3 от нуля до гуру! #4 - Селекторы в CSS и правила CSS

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

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

Видеоурок

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

Существует множество правил и селекторов, которые позволяют выбирать различные объекты из HTML. Самыми распространенными вариантами выбора объектов является выбор по тегу, классу и идентификатору. Кроме того, мы можем комбинировать все это, чтобы получать более точные значения.

Важно понимать, что при выборе объекта по тегу или же по классу вы можете выбрать сразу множество различных объектов, а при выборе по идентификатору всего лишь один объект, так как на одной странице не может быть двух id с одинаковыми значениями.

ВАЖНО. Если у вас два тега с одинаковыми идентификаторами, то современные браузеры все равно будут корректно выводить теги и стили к ним. Тем не менее, это не правильное решение, поэтому старайтесь такого не допускать, так как для существуют классы для подобных задач.

Онлайн редактор кода

Загрузка...

Задание к уроку

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

Создайте заголовок 3 уровня, а также абзац, в котором будет жирный текст и добавьте общий стиль для заголовка и жирного шрифта.

Сделайте так, чтобы оба они были синего цвета, а также размер шрифта у них был 23px.

Посмотреть ответ

Решение задания (HTML код):

<h3 class="styling">Просто текст</h3>
<p>Еще <b class="styling">дополнительный</b> текст </p>

Стили для объектов:

.styling {
   color: blue;
   font-size: 23px;
}

Получить остальные домашние задания можно после подписки на проект

Большое задание по курсу

Вам необходимо оформить подписку на сайте, чтобы иметь доступ ко всем большим заданиям. В задание входит методика решения, а также готовый проект с ответом к заданию.
PS: подобные задания доступны при подписке от 1 месяца

HTML5

CSS3