Основы CSS

1 Где живёт CSS

Где пишутся стили? Есть три способа: прямо в теге, в HTML-файле и в отдельном файле.

Приоритет. Стили, которые загружаются в браузер позже, имеют более высокий приоритет по отношению к остальным. Сначала всегда загружается внешний файл, затем — элемент style, затем — атрибут style.

Основное правило: более поздняя инструкция отменяет более раннюю.

2 Базовый формат CSS

Инструкция CSS собирается из селектора, свойства и значения:

h1 {
  color: red;
  /* красный цвет текста */
}

Пробелы и переносы строк не влияют на работу кода — их вставляют, чтобы инструкции легче читались.

Значение по умолчанию. У каждого свойства есть заранее заданное значение — оно применяется, если своё не указано и не унаследовано. Например, у font-weight по умолчанию normal: текст не жирный, даже если про насыщенность нигде не написано.

3 Область применения стилей: селекторы

Селектор — это указатель: он говорит браузеру, каким элементам достанется стиль. Три главных способа указать элемент — по тегу, по классу и по идентификатору:

Как это выглядит вживую:

<!-- HTML -->
<p id="intro">Знакомься: капибара</p>
<p>Капибара живёт у воды</p>
<p class="fact">Капибара — самый крупный грызун</p>

/* CSS */ p      { color: gray; }
.fact  { background-color: #ABDBDB; }
#intro { font-weight: bold; }

Чтобы найти стиль элемента в чужом коде: посмотри в HTML его class или id — и найди такой же селектор в CSS.

4 Псевдоклассы

Стиль может применяться только при наступлении события — такие классы называются псевдоклассами. Имя тега и псевдокласс соединяются двоеточием:

a:hover  { color: red; }   /* при наведении указателя на ссылку */
a:active { color: #EE3B96; } /* пока ссылка активна */

:hover срабатывает, пока на элементе указатель мыши. :active — активное состояние: между нажатием и отпусканием кнопки мыши. Псевдокласс active указывают после hover.

5 Как указать цвет и длину

Цвет в CSS складывается из трёх составляющих: красной (red), зелёной (green) и синей (blue). Чем выше значение составляющей, тем интенсивнее цвет. Способы записи:

Размеры элементов задают в единицах:

Если значение равно нулю, единицы измерения можно не указывать: padding: 0;

6 Свойства шрифта и текста

7 Блочная модель

Каждый элемент, описанный в коде HTML, занимает прямоугольную область — блок. Блок состоит из содержимого, внутренних отступов, границы и внешних отступов:

Одно число в margin или padding задаёт одинаковый отступ со всех четырёх сторон. Четыре числа — по сторонам в порядке: сверху, справа, снизу, слева. Два — первое сверху и снизу, второе слева и справа. Отдельную сторону задают своим свойством: margin-top, padding-left и так далее.

div {
  width: 100px; padding: 10px; border: 2px solid #CE7C9F; margin: 20px;
  background-color: #F3EEE7;
}

8 Свойства фона

9 Отображение и размещение

Свойство display задаёт способ отображения элемента:

Обычно браузер сам расставляет элементы по порядку — как они идут в коде. Свойство position позволяет сдвинуть элемент с его обычного места. Значения отличаются тем, от чего отсчитывается сдвиг:

Куда и насколько сдвигать, задают свойства top, bottom, left, right — отступ от соответствующего края.

Если границы элементов перекрываются, порядок наложения меняют свойством z-index: значение — целое число, чем оно выше, тем ближе элемент к переднему плану. Чтобы z-index работал, у элемента должно быть значение position, отличное от static.

10 Гибкая компоновка: флексбокс и колонки

Флексбокс (flexbox, flexible box) — контейнер, размещение и размер которого можно гибко регулировать. Раньше макеты собирали свойствами float и position; флексбокс упрощает эту работу.

Свойство задаётся родительскому элементу: display: flex — контейнер занимает всю ширину, display: inline-flex — пространство, ограниченное содержимым. Родительский элемент становится флекс-контейнером, вложенные в него — флекс-элементами:

#container {
  display: flex;
}

Попробуй сам: переключай значения — флекс-элементы перестроятся, а код ниже обновится.

Многоколоночная вёрстка раскладывает содержимое в несколько колонок, как в газете: column-count — количество колонок, column-width — ширина колонки, columns: 5em 2; — оба значения одним свойством. Расстояние между колонками — column-gap.

11 Движение: прозрачность, градиент, переходы

Переходы обеспечивают плавную смену одного стиля другим: цвет, размер или положение меняются не скачком, а в течение заданного времени. Указываются только первый и последний стили — промежуточные состояния браузер рассчитывает сам. transition-property — какие свойства менять (несколько — через запятую), transition-duration — за сколько времени (в секундах или миллисекундах):

div {
  width: 100px;
  background-color: #F3EEE7;
  transition-property: width, background-color; transition-duration: 3s;
}
div:hover {
  width: 200px;
  background-color: #ABDBDB;
}