Знакомство с CSS: селекторы, цвета и шрифты

Подключаем стили

CSS пишут в отдельном файле и подключают в <head>:

HTML

<head>
  <meta charset="utf-8">
  <title>Пиццерия</title>
  <link rel="stylesheet" href="style.css">
</head>

Один файл стилей подключается ко всем страницам сайта. Поменяли цвет кнопки в одном месте — он поменялся везде.

Как устроено правило

CSS

h1 {
  color: #2d5a44;
  font-size: 32px;
}

h1 — селектор: к каким элементам применяется правило;
в фигурных скобках — объявления: свойство, двоеточие, значение, точка с запятой.

Селекторы

Селектор	Пример	Кого выбирает
по тегу	`p`	все абзацы
по классу	`.price`	все элементы с `class="price"`
по id	`#header`	один элемент с `id="header"`
вложенности	`.card p`	абзацы внутри элементов с классом `card`

HTML

<p class="price">450 ₽</p>
<p class="price old">590 ₽</p>

CSS

.price {
  font-weight: bold;
}

.old {
  color: gray;
  text-decoration: line-through;
}

Классы — главный инструмент вёрстки. Один класс можно дать многим элементам, а одному элементу — несколько классов через пробел. id уникален на странице, и для оформления его используют редко.

Цвета, шрифты и текст

Цвет задают названием, HEX-кодом или в RGB:

CSS

.title {
  color: #2d5a44;              /* HEX — самый частый способ */
  background-color: rgb(243, 245, 239);
}

Самые нужные свойства текста:

CSS

body {
  font-family: Arial, sans-serif;  /* шрифт и запасной вариант */
  font-size: 16px;
  line-height: 1.5;                /* межстрочный интервал */
  color: #18201c;
}

.note {
  font-weight: bold;
  text-align: center;
}

В font-family перечисляют несколько шрифтов: если первого нет на компьютере, браузер возьмёт следующий.

Цвет удобно брать из макета дизайнера или подбирать в инструментах разработчика: если нажать на образец цвета в панели стилей, откроется палитра.

Каскад: кто победит

CSS расшифровывается как «каскадные таблицы стилей». Каскад — это правила, по которым браузер решает, какое из спорящих свойств применить:

Более точный селектор сильнее: id сильнее класса, класс сильнее тега.
При равной точности побеждает правило, которое стоит ниже в файле.

CSS

p { color: black; }
.note { color: red; }   /* класс точнее тега: абзац с классом note будет красным */

Наследование

Некоторые свойства передаются вложенным элементам. Если задать шрифт и цвет для body, их получат все элементы внутри — поэтому базовое оформление текста пишут один раз. Наследуются в основном свойства текста: шрифт, цвет, размер, межстрочный интервал. Отступы, рамки и фон — нет.

Попробуйте сами. Для страницы из прошлых уроков задайте: шрифт Arial для всей страницы, тёмно-зелёный цвет заголовков, серый цвет для абзацев с классом muted, а для цен с классом price — жирный шрифт и размер 20px.

Решение

CSS

body {
  font-family: Arial, sans-serif;
  line-height: 1.5;
}

h1,
h2 {
  color: #2d5a44;
}

.muted {
  color: #5d685f;
}

.price {
  font-weight: bold;
  font-size: 20px;
}

Селекторы можно перечислять через запятую: h1, h2 получат одно и то же правило. Каждый селектор на отдельной строке — так файл стилей легче читать.