Урок 6. Основы CSS — подключение, селекторы, цвета, шрифты

HTML описывает содержимое страницы, CSS — её внешний вид. Один файл стилей может оформлять сразу все страницы сайта: поменяли цвет заголовков в одном месте — он сменился везде.

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

h1 {
  color: darkblue;
  font-size: 32px;
}

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

Комментарий в CSS — между /* и */. Комментария через // в CSS нет.

Три способа подключить CSS

Отдельный файл — основной способ. Создайте рядом со страницей папку css, в ней файл style.css, а в <head> страницы добавьте ссылку на него:

<head>
  <meta charset="utf-8">
  <title>Рецепты</title>
  <link rel="stylesheet" href="css/style.css">
</head>

Путь в href пишется так же, как путь к картинке: относительно страницы (подробно — в уроке Картинки и пути к файлам).

Тег <style> в <head> — стили только для этой страницы:

<style>
  p {
    color: #333;
  }
</style>

Атрибут style у элемента — стиль для одного элемента: <p style="color: red;">. Так удобно что-то быстро проверить, но оформлять сайт так неудобно: каждый раз придётся искать стиль по всем страницам.

Селекторы

/* все абзацы */
p {
  line-height: 1.5;
}

/* элементы с классом note */
.note {
  background-color: lightyellow;
}

/* элемент с id="top" */
#top {
  border-bottom: 1px solid gray;
}

/* ссылки внутри nav */
nav a {
  color: white;
}

/* сразу несколько селекторов */
h1, h2, h3 {
  font-family: Georgia, serif;
}

/* ссылка под указателем мыши */
a:hover {
  color: red;
}

Класс — главный инструмент. Он пишется в HTML атрибутом class, а в CSS — с точкой в начале:

<p class="note">Занятие переносится.</p>
<p class="note important">Взять с собой краски.</p>

У элемента может быть несколько классов через пробел, и один класс может стоять у скольких угодно элементов. id (#top) на странице единственный, поэтому для оформления обычно хватает классов.

Имена классов чувствительны к регистру: .Note и .note — разные классы. Пишите их латиницей, маленькими буквами, слова — через дефис: .main-menu.

Частые псевдоклассы — состояния элемента: :hover (под мышью), :focus (в фокусе, например поле, в котором курсор), :first-child (первый среди соседей), :nth-child(2n) (каждый второй).

Каскад и наследование

Если к элементу подходят несколько правил, побеждает:

1. Более точный селектор: id сильнее класса, класс сильнее тега.
2. При равной точности — то правило, что написано ниже (или подключено позже).

p {
  color: black;
}
.note {
  color: green;
}
p {
  color: blue;
}

Обычный абзац будет синим (последнее правило для p сильнее первого), а <p class="note"> — зелёным: класс точнее тега, где бы он ни стоял.

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

body {
  font-family: Arial, sans-serif;
  color: #222;
}

Цвета

Один и тот же цвет можно записать по-разному:

.a { color: red; }
.b { color: #ff0000; }
.c { color: #f00; }
.d { color: rgb(255 0 0); }
.e { color: rgb(255 0 0 / 50%); }

• Имя: red, white, darkblue, tomato — около 150 готовых названий.
• HEX: #ff0000 — по две шестнадцатеричные цифры на красный, зелёный и синий (от 00 до ff). Краткая запись #f00 — то же самое.
• rgb(): три числа от 0 до 255; после косой черты — прозрачность (50% — наполовину прозрачный). Старая запись через запятые rgb(255, 0, 0) тоже работает.

color — цвет текста, background-color — цвет фона. Подобрать цвет удобно в инструментах разработчика (F12): щелчок по квадратику цвета в стилях открывает палитру.

Размеры

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

Текст и шрифты

body {
  font-family: "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.5;
}
h1 {
  font-size: 2rem;
  font-weight: 700;
  text-align: center;
}
.quote {
  font-style: italic;
}

• font-family — шрифт. Указывают несколько через запятую: если первого нет на компьютере, берётся следующий. Последним ставят общее семейство: sans-serif (без засечек), serif (с засечками), monospace (моноширинный). Название из нескольких слов — в кавычках.
• font-size — размер, font-weight — насыщенность: 400 — обычный, 700 — жирный.
• line-height — высота строки; число без единиц (1.5) — во столько раз больше размера шрифта.
• text-align — выравнивание: left, center, right, justify (по ширине).

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

Частые ошибки

• Стиль не применяется — неверный путь в href, опечатка в имени класса, забыта точка в .note. Разбор всех причин — в справке Почему не применяется стиль CSS.
• После ошибки перестала работать половина файла — пропущена закрывающая скобка }: следующие правила попали внутрь незакрытого.
• Свойство зачёркнуто и помечено значком предупреждения в инструментах разработчика — опечатка в имени свойства или в значении. CSS не сообщает об ошибках, а просто пропускает непонятное объявление.

Коротко

• Правило: селектор { свойство: значение; }.
• CSS — в отдельном файле: <link rel="stylesheet" href="css/style.css"> в <head>.
• Селекторы: тег p, класс .note, id #top, вложенность nav a, состояние a:hover.
• Точнее селектор — сильнее правило; при равенстве побеждает нижнее.
• Цвет — именем, #ff0000 или rgb(255 0 0); шрифт — списком с общим семейством в конце.
• Размер шрифта удобно задавать в rem, высоту строки — числом без единиц.

Проверьте себя