Практикум посвящен такой теме, как: использование селекторов.
Переходи по ссылке и пройди практикум уже сегодня!
https://indeling.ru/html-css/praktikum-ispolzovanie-selektorov/
Основное содержание практикума.
Практикум состоит из 4 основных разделов, а именно:
Групповые селекторы. Вы узнаете, как создавать групповые селекторы, где их стоит применять, на практике сможете создать свою страничку с использованием групповых селекторов. Нередко бывает так, что несколько различных элементов веб-страницы должны иметь одинаковый внешний вид. Вероятно, и вы хотите, чтобы все заголовки отображались шрифтом одного вида и цвета. Вместо того чтобы создавать отдельные стили и дублировать одни и те же атрибуты и параметры для каждого элемента h1, h2 и т. д., вы можете собрать и сгруппировать несколько элементов в единственный селектор.
Идентификаторы. Как применять CSS идентификаторы, для чего они нужны и как с ними работать. Идентификаторы предназначены для изменения стиля определенного элемента. Вы создаете стиль и добавляете атрибут id к открывающему HTML-тегу на странице, а затем применяете свойства созданного стиля к этому одиночному элементу. Часто идентификаторы используются для определения элементов формы, создания ссылок на страницах, а также помогают применять JavaScript-сценарии для управления элементами на странице. Хотя многие веб-дизайнеры в настоящее время стараются не использовать идентификаторы, желательно знать, как с ними работать.
Применение классов. Вы научитесь применять классы селекторов при создании структуры своего сайта на HTML и CSS! Селекторы тегов выполняют свои функции быстро и эффективно, но они, можно сказать, совсем неразборчивы в деталях. Что же делать, если вы хотите отформатировать один элемент p на веб-странице иным способом, чем все остальные такие элементы? Решение проблемы — использование классов.
Применение селекторов потомков. Вы сможете разобрать в том, как работают селекторы потомков, а также как использовать из на практике. Предположим вы применили класс note к двум абзацам. Каждый из них начинается словом Примечание:, выделенным полужирным начертанием (на самом деле это слово находится внутри элемента strong). Но что делать, если вы хотите отформатировать эти слова еще и ярко-оранжевым цветом? Вы могли бы создать стиль для элемента strong, но он затронет все эти элементы на странице, в то время как вы хотите изменить только те, которые находятся внутри примечаний. Одним из решений было бы создание класса, например .noteText, и применение его к каждому из элементов strong внутри примечаний. Но вы наверняка забудете применить класс, если у вас много таких страниц с примечаниями. Лучший способ решить эту проблему — создать селектор потомков, который относится только к нужным нам элементам strong.
Если Вы только начинаете изучать HTML и CSS то можете ознакомиться с первым разделом "Основы CSS" который мы уже закончили готовить для Вас! Желаем Вам успехов в освоении материалов!
