2.1 Синтаксис

Таблица стилей состоит из инструкций (правил), которые описывают, как должны отображаться элементы на странице. Принцип CSS достаточно прост. Сначала мы выбираем элемент или группу элементов, которым мы хотим задать какие-то правила отображения. Затем, для каждого элемента или группы, прописываем значения для каждого свойства, которое мы хотим поменять. Элемент или группа элементов в CSS называются селектором.

Базовый синтаксис языка CSS выглядит так:

селектор {
    свойство: значение;
    свойство: значение;
    свойство: значение;
}

Селекторы

Селекторы бывают нескольких типов:

* - любой элемент;
em - элементы с таким тегом;
#id - элемент с таким идентификатором;
.class - элементы с таким классом;
[name="value"] - элементы с атрибутом со значением value атрибута name;

Данные селекторы можно комбинировать. Существуют несколько основных видов комбинации селекторов.

Последовательное комбинирование селекторов

Селекторы можно записать последовательно, без пробелов, чтобы найти элементы на странице, которые одновременно удовлетворяют всем описанным условиям:

em#id - элемент <em> cо значением идентификатора id;
em.class - элементы <em> со значением класса class;
em.class1.class2 - элементы <em> которые одновременно обладают классами class1 и class2;
em#id.class - элемент <em> со значением идентификатора id и значением класса class;
input[type="checkbox"] - элементы <input> со значением checkbox атрибута type;
input#id[type="checkbox"] - элемент <input> со значением идентификатора id и значением checkbox атрибута type;
input#id.class[type="checkbox"] - элемент <input> со значением идентификатора id, значением класса class и значением checkbox атрибута type.

Большинство этих записей избыточно. Например, нет смысла комбинировать идентификаторы с другими селекторами, потому что мы в итоге получим либо один, либо ноль элементов. И в целом, по методологии БЭМ (о которой мы поговорим несколько позже), рекомендуются использовать только комбинацию классов, отходя от указания тегов и идентификаторов.

Отношения

Есть несколько типов отношений между селекторами:

div span - все элементы <span>, которые вложены в <div> (на любом уровне вложенности);
div > span - все элементы <span>, которые являются потомками <div>;
div ~ span - все элементы <span>, которые следуют после <div>;
div + span - все элементы <span>, которые расположены непосредственно возле <div> и следуют после него;

Первые два отношения используются чаще всего. Последние - реже. Редкие отношения вам могут пригодиться при стилизации полей форм, т.к. она достаточно проблематична без использования дополнительных соседствующих элементов.

2.1 Синтаксис