Итоги

В этом уроке мы узнали, что:

• Правило состоит из селектора и объявлений в фигурных скобках. Объявление состоит из свойства и значения: h1 { color: sienna; }.
• Комментарии пишутся между /* и */, и браузер их игнорирует.
• Селекторы выбирают элементы, которые оформляет правило:
  • универсальный селектор * выбирает все элементы,
  • селектор типа выбирает все элементы одного типа, например h2,
  • селектор класса выбирает элементы с классом, например .group для class="group". Класс могут иметь многие элементы, а у одного элемента может быть несколько классов,
  • селектор id выбирает один элемент с этим id, например #breeds,
  • селектор атрибута выбирает элементы по их атрибутам, например [target] или [target="_blank"],
  • псевдокласс выбирает элементы в определённом состоянии, например :hover — под указателем мыши.
• Селекторы можно комбинировать:
  • запятая группирует их: h1, h2 выбирает оба,
  • цепочка без пробела выбирает элементы, которые соответствуют всем частям: a[target="_blank"], .group:hover,
  • пробел выбирает потомков на любой глубине: footer p,
  • > выбирает только дочерние элементы: main > div.
• Когда несколько правил задают элементу одно и то же свойство, каскад решает, какое из них победит. Побеждает более специфичный селектор: id побеждает класс, селектор атрибута и псевдокласс, а они побеждают тип, при этом * не учитывается. Части селектора складываются. Между одинаково специфичными селекторами побеждает тот, что написан позже. Встроенные стили побеждают все селекторы.
• Некоторые свойства, в основном свойства текста, такие как color, font-family и text-align, наследуются потомками элемента, если у потомков нет собственного правила. Другие, например border и background-color, — нет.

В следующем уроке, «Цвета», мы рассмотрим все способы записи цветов в CSS.