Всем привет, с вами Сергей Никонов и в этой статье я расскажу про CSS-селекторы и как с помощью них задавать CSS-стили для вашего сайта. Мы рассмотрим различные способы и правила, как с помощью CSS-селекторов задавать стили для HTML-страницы.
Это один из уроков курса HTML/CSS Advanced и если вы хотите научиться верстать веб-сайты на профессиональном уровене, я рекомендую проходить этот курс на сайте FructCode с интерактивными упражнениями для закрепления ваших знаний полученных из курса верстки сайтов.
Только на сайте FructCode вы можете найти актуальных версии моих курсов!
Содержание
- Что такое CSS-селекторы (CSS Selectors)
- Универсальный CSS-селектор * (звездочка)
- CSS-селекторы по классу (Class selectors)
- Запись CSS-стилей через точку "." и без пробелов
- Запись CSS-стилей через запятую ","
- Запись CSS-стилей через пробел (space)
- Запись CSS-стилей через знак больше ">"
- Запись CSS-стилей через знак “~"
- Запись CSS-стилей через знак плюс "+"
- Запись CSS-стилей для HTML-элемента по атрибуту
- Вывод
Что такое CSS-селекторы (CSS Selectors)
CSS-селекторы - это специальные выражения описанные с помощью CSS (каскадные таблицы стилей), которые задают правила, как браузеру применять CSS-стили для HTML-элементов, которые определяются внутри блока CSS-стилей.
На первый взгляд вам может показаться, что определение CSS-селекторов сложное и непонятное. Но не волнуйтесь, на самом деле на практике все намного проще, чем кажется. И давайте сейчас на простых примерах рассмотрим что такое CSS-селекторы.
Видео Что такое CSS-селекторы: Способы задавать стили для HTML-элементов
Кстати, не забудь подписаться на наш YouTube канал FructCode, где вы можете найти много полезных обучающих видео о верстке сайтов.
Универсальный CSS-селектор * (звездочка)
С помощью универсального CSS-селектора * (звездочка) вы можете задавать правила какие CSS-стили применять сразу ко всем HTML тегам.
Пример кода, как задать с помощью универсального CSS-селектора * (звездочка) стили для всех HTML-элементов.
Посмотрите пример:
В итоге, ко всем HTML-тегам на странице, включая h1, span, div и другим применятся CSS-стили: размер шрифта 30px, цвет текста красный.
Универсальный CSS-селектор используется достаточно частно при создании верстки сайтов и вот почему. Дело в том, что пользователи используют различные браузеры: Google Chrome, Mozilla Firefox, Safari, Opera, Edge, различные мобильные браузеры и даже Internet Explorer старых версий. И каждый из браузеров может задавать свои CSS-стили для HTML-элементов по умолчанию. И та же HTML-форма будет выглядеть в разных браузерах по-разному.
И для того, чтобы ваш веб-сайт соответствовал макету дизайна сайта, обычно используют сброс стандартных стилей (reset css), которые задают браузеры. Reset CSS представляет набор CSS-стилей, который подключается к HTML-странице, в котором прописаны правила отображения для всевозможных HTML-элементов.
Если вы не знаете как подключить внешний файл с CSS-стилями к HTML-странице, посмотрите это видео.
При применении Reset CSS или Normalize CSS, HTML-элементы выглядит примерно одинаково в большинстве браузеров.
CSS-селекторы по классу (Class selectors)
С помощью данного css-селектора вы можете задавать стили для HTML элементов у которых установлен тот или иной class.
Простой пример CSS-селектора по классу:
Запись CSS-стилей через точку "." и без пробелов
Когда вы задаете CSS-стили через точку "." и без пробелов (как в примере ниже) - это обозначает, что CSS-стили применятся ко всем тегам <div>, у кого установлен класс .color. При этом, даже если у других html-элементов установлен class с именем .color, но этот html-элемент не является <div>, стили к данному элементу не применятся и элемент <span> с классом color не будет выделятся красным цветом.
Посмотрите пример:
А запись в виде div.color.text-color, когда без пробелов описывается несколько классов, обозначает, что стили применятся только к <div> который имеет сразу два класса .color и .color-text и не применятся стили к <div> к которому присвоен только один class с именем .color.
Посмотрите пример:
Запись CSS-стилей через запятую ","
Если вы перечисляете CSS-стили через запятую, например так: "span, li" - это обозначает, что CSS-стили будут применены и к HTML-элементу <li> и к <span> одновременно.
Посмотрите пример:
Запись CSS-стилей через пробел (space)
А так, с помощью CSS-селекторов (комбинатор потомков или descendant combinator), когда вы указываете в CSS-стилях элементы через пробел, вы можете применить стили к html-элементам, которые находятся внутри этих html-элементов вне зависимости от вложенности.
В примере ниже показано, что css-стили, при записи через пробел ul li зададут фоновый цвет всем элементам <li> только внутри тега <ul>:
Еще один пример для лучшего понимания как задать CSS-стили с помощью CSS-селекторов, когда вы пишите стили через пробел. Мы можем задать внутри <ul> всем тегам <strong>, независимо на каком уровне вложенности находится <strong>, фоновый цвет "gray":
Также можно писать вместо названия самого HTML-тега, название класса и CSS-стили будут применены внутри элемента <ul> для элемента с классом .gray и не будут зависеть от вложенности. При этом данные стили не применятся для <span> с классом .gray, так как этот <span> находится за пределами тега <ul>:
Запись CSS-стилей через знак больше ">"
При использовании комбинатора со знаком больше (>), CSS-стили задаются только для тех HTML-элементов, которые являются дочерними по отношению к задаваемому HTML-элементу.
Лучше понять как работает комбинатор “>” вам поможет пример.
Этот стиль применится только для первого потомка (child), но не будет работать для последующих:
А эти стили применятся для strong, потому-что strong - это прямой потомок <span>:
Запись CSS-стилей через знак “~"
С помощью знака “~" можно выбирать все HTML-элементы, которые являются потомками указанного элемента.
Пример как с помощью записи CSS-стилей со знаком “~” выделить все HTML-элементы <li> после <li> с классом “color”:
Запись CSS-стилей через знак плюс "+"
Если c помощью записи CSS-стилей со знаком “~" можно выбирать все HTML-элементы, которые являются потомками(child) указанного элемента, то с помощью записи плюс “+” можно выбрать только один HTML-элемент.
И вот простой пример:
Запись CSS-стилей для HTML-элемента по атрибуту
Имея название HTML-атрибута, мы можем задавать стили для данного HTML-элемента. Ярким примером может служить <input> и мы можем задавать CSS-стили исходя из атрибута.
Например у нас есть какая-то html-форма и мы хотим задать разные CSS-стили для <input> с разными type: text и password. Когда мы будем печатать текст в <input> с типом text мы хотим задать цвет текста "green", а для <input> с типом password мы хотим задать цвет текста "magenta". И с помощью CSS-селекторов по атрибуту мы можем это сделать:
Для HTML-элементов можно задавать атрибуты, которые мы можем и сами придумать. Атрибуты задаются для различных целей, когда нужно запрограммировать определенное поведение. И мы им также может задавать CSS-стили:
Вывод
Пользоваться CSS-селекторами достаточно просто и самое главное - это практика, тогда вы все очень быстро запомните! Курс HTML/CSS Advanced содержит в себе большое количество интерактивных упражнений, выполняя которые, вы будете быстрее запоминать пройденный материал.
Также рекомендуем подписаться на наш YouTube канал FructCode, где переодически появляются полезные материалы для обучения верстке сайтов и программированию.
С вами был Сергей Никонов, успехов в обучении!