Синтаксис CSS

Целью CSS является определение макета и стиля элементов HTML. Синтаксис очень прост:

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

Вы можете прочитать это так:

кто { что: как; }

CSS представляет собой процесс из трёх частей:

• селектор определяет, на какой элемент или элементы нацелиться;
• свойство определяет характеристики для изменения;
• значение определяет, как изменить эту характеристику.

Весь этот блок (селектор, свойство, значение) является правилом CSS.

Быстрый пример

Допустим, вы хотите изменить цвет всех <blockquote>.

<blockquote>Что-то с чем-то</blockquote>

Сосредоточьтесь на имени тега (и забудьте об угловых скобках <> и тексте). В нашем случае останется только blockquote. Есть прямая связь между именем тега и селектором.

Давайте используем его в нашем CSS как селектор и применим некоторые стили:

blockquote { background: lightgreen; }

Интересно. Но теперь цвет текста на деле не сочетается с цветом фона. Так что улучшим:

blockquote {
  background: lightgreen;
  color: darkgreen;
}

Здесь произошли две вещи:

• мы добавили вторую пару свойство/значение, оставив при этом только один селектор: вы можете установить столько свойств, сколько пожелаете, для любого набора селекторов;
• мы помещаем каждую пару свойство/значение на отдельной строке: как и в HTML, пробелы не важны. А вот специальные символы ({ } : и 😉 имеют значение. В результате вы можете отформатировать CSS как пожелаете, чтобы сделать его более удобным для чтения, при этом его синтаксис остаётся корректным.

Тег <blockquote> это блочный элемент и у него есть строчный аналог <q>. Поскольку оба они служат одной цели (но в разных ситуациях), мы хотели бы стилизовать их одинаково. Для этого мы могли бы скопировать и вставить правила CSS, а затем просто изменить селектор, но есть, как вы уже догадались, более быстрый способ:

q,
blockquote {
  background: lightgreen;
  color: darkgreen;
}

Теперь у нас есть два селектора и два свойства. Следовательно, мы имеем набор селекторов и набор свойств (с соответствующими значениями).

У нас может быть несколько селекторов, несколько свойств, а иногда (но редко) несколько значений.

Комментарии

Как и в HTML может быть удобно писать комментарии CSS:

/* Это комментарий CSS */
q,
blockquote {
  background: lightgreen;
  color: darkgreen;
}
/*
  Комментарии предназначены только для чтения людьми
  и компьютер их разбирать не будет
*/