У нас вы можете посмотреть бесплатно Учебник CSS — Селекторы, Элемент, Класс и ID (3/13) или скачать в максимальном доступном качестве, видео которое было загружено на ютуб. Для загрузки выберите вариант из формы ниже:
Если кнопки скачивания не
загрузились
НАЖМИТЕ ЗДЕСЬ или обновите страницу
Если возникают проблемы со скачиванием видео, пожалуйста напишите в поддержку по адресу внизу
страницы.
Спасибо за использование сервиса ClipSaver.ru
Учебник CSS — Селекторы, Элемент, Класс и ID (3/13) Итак, мы только что рассмотрели базовый оператор CSS, и он начинается с селектора. Так что же, чёрт возьми, такое селекторы? Предположим, вы Бранджелина, и у вас куча детей, которых вы хотите одеть в школу, но только один из них достаточно взрослый. Поэтому сначала вам нужно выбрать нужного ребёнка, а затем одеть/стилизовать его. Вот что такое селекторы. Выберите, какого ребёнка вы хотите подготовить к школе. Или, раз вы не Бранджелина, выберите элемент, который вы хотите стилизовать. Всё начинается с селектора. Существуют разные виды селекторов. В нашем примере мы использовали так называемый селектор элемента, потому что он выбирает стили на основе типа элемента. Это самый простой селектор. Он использует тип элемента. Например, тег p. Круто? Круто. Проблема с селекторами элементов в том, что вам может не захотеться окрашивать ВСЕ абзацы в синий цвет. Что, если у вас есть 3 абзаца, и вы хотите, чтобы только один из них был синим? Тип элемента — идентификатор, но в данном случае это слишком общее определение. Хочу показать вам пример. Взгляните на это на сайте Atom. Видите эти два раздела? У одного из них белый фон, у другого — бежевый. Если вы посмотрите, то увидите, что это оба div-ы, вот они, так что, очевидно, создатели этого не могли просто сказать: «О, выберите все div-ы и измените фон на белый или бежевый». Им нужно было быть более конкретными. Вы можете выбирать элементы на основе других типов идентификаторов. Классы и ID. Class — самый распространённый и полезный, фактически именно его использует Atom. Взгляните. У них есть класс-обёртка для одного абзаца и подсветка для другого. Если вы нажмёте на подсветку, вы увидите, что у класса бежевый фон. Итак, давайте сделаем это сами. Допустим, у вас 4 абзаца, и вы хотите чередовать тёмный и светлый фон. Итак, тёмный, светлый, тёмный, светлый. Другими словами, вы хотите повторно использовать стиль для нескольких элементов. В этом случае можно использовать селектор CLASS. В CSS это делается так: вы пишете имя класса, оно может быть любым, только без пробелов и специальных символов, например, DARK, и ставите перед ним ТОЧКУ. Зачем ТОЧКА? Ну, я не знаю, что вам сказать. Нет внятного объяснения, по крайней мере, мне известного. Это просто синтаксис, который нужно запомнить. Он сообщает браузеру, что это селектор CLASS. Затем, конечно же, нужно добавить класс к элементу в HTML. Это означает: «Эй, выберите все элементы с атрибутом class и значением dark. Давайте попробуем: ДЕМО 4 - Я также расскажу о селекторах ID просто для наглядности, хотя мы не часто ими пользуемся. Атрибуты ID относятся только к одному элементу. Если у вас есть стиль, который вы по какой-то причине хотите применить только к одному элементу, вы можете добавить ID к этому элементу (например, my-blue-paragraph), а затем использовать селектор ID в CSS для его стилизации. Селекторы ID похожи на селекторы CLASS, только перед именем ставится # вместо точки. Это становится селектором CSS для элемента с этим ID. Давайте попробуем. ДЕМО 3 - Проблема с ID в том, что он ограничен одним элементом. Помните, что ID не могут быть общими для разных элементов. Поэтому вы не можете повторно использовать ID my-blue-paragraph для нескольких элементов. Итак, вот три основных селектора: Element, Class и ID. «Элемент» — для стилизации элементов этого типа. «Идентификатор» — для выбора только одного конкретного элемента. «Класс» — для повторного использования нескольких элементов. С этого момента мы будем использовать их все. Селекторы могут стать гораздо сложнее, и так и будет, но теперь вы знаете основы. Итак, далее мы рассмотрим некоторые из наших вариантов, касающихся свойств стиля, таких как цвет. Пока что это всё, что мы использовали, поэтому я расскажу о нём подробнее. Позже мы поговорим о шрифтах, размерах, фоне, границах, анимации, типах отображения, Flexbox — куда все делись? Я говорил.