CSS3: способы подключения, color, font, width, text-align и каскад

Если HTML — это стены дома, то CSS — его отделка: цвета, шрифты, размеры и расположение. В этом уроке узнаем, как подключить CSS к странице тремя способами, научимся выбирать элементы селекторами, разберём первые свойства — color, font, width, text-align — и поймём, как браузер решает, какой стиль победит, если их несколько. Последнее называется каскадом, и это самая важная идея CSS.

Что такое CSS

CSS (Cascading Style Sheets — «каскадные таблицы стилей») — язык, который описывает, как выглядят элементы HTML. Сам HTML отвечает только за смысл, а CSS — за внешний вид.

Любое CSS-правило устроено одинаково:

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

• h1 — селектор: к каким элементам применить правило;
• { ... } — блок объявлений;
• color: navy; — объявление: свойство color, двоеточие, значение navy, точка с запятой.

Читается так: «всем заголовкам h1 сделать цвет тёмно-синим и размер шрифта 32 пикселя».

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

1. Инлайн-стили (атрибут style)

Стиль пишется прямо в теге:

<p style="color: red; font-size: 20px;">Красный абзац</p>

Удобно для быстрого эксперимента, но плохо для реального проекта: стиль привязан к одному элементу, его нельзя переиспользовать, а HTML превращается в кашу.

2. Внутренние стили (тег style)

Стили пишутся в <head> внутри тега <style>:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Внутренние стили</title>
    <style>
        p {
            color: green;
        }
    </style>
</head>
<body>
    <p>Все абзацы зелёные</p>
    <p>И этот тоже</p>
</body>
</html>

Работает в пределах одной страницы. Если страниц десять — придётся копировать стили в каждую.

3. Внешний файл (тег link) — основной способ

Стили выносятся в отдельный файл style.css, а в HTML подключаются тегом <link>:

my-site/
├── index.html
└── css/
    └── style.css

<head>
    <meta charset="UTF-8">
    <title>Внешние стили</title>
    <link rel="stylesheet" href="css/style.css">
</head>

/* css/style.css */
body {
  color: #333;
}

• rel="stylesheet" — «это таблица стилей»;
• href — путь к файлу относительно HTML-файла;
• /* ... */ — комментарий в CSS.

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

Селекторы

Селектор отвечает на вопрос «кого красим?».

<h1 id="logo">Atlas</h1>
<p class="note">Обычная заметка</p>
<p class="note important">Важная заметка</p>
<ul class="menu">
    <li><a href="#">Главная</a></li>
</ul>

/* по тегу: все абзацы */
p {
  font-size: 16px;
}

/* по классу: все элементы с class="note" */
.note {
  color: gray;
}

/* по id: единственный элемент с id="logo" */
#logo {
  color: purple;
}

/* вложенность: ссылки внутри .menu */
.menu a {
  color: teal;
}

/* группа: одно правило для нескольких селекторов */
h1, h2, h3 {
  font-family: Arial, sans-serif;
}

/* все элементы */
* {
  box-sizing: border-box;
}

• Класс (.имя) можно дать многим элементам, а одному элементу — несколько классов через пробел (class="note important"). Это главный инструмент верстальщика.
• id (#имя) должен быть уникальным на странице. Для стилей его используют редко, чаще — для якорных ссылок и JavaScript.
• Пробел между селекторами означает «внутри»: .menu a — любые a внутри .menu.
• * — универсальный селектор, выбирает всё. Свойство box-sizing разберём в уроке про блочную модель.

Цвет: color и background-color

color задаёт цвет текста, background-color — цвет фона.

.card {
  color: white;
  background-color: #2b6cb0;
}

Цвет можно записать несколькими способами:

#333 — это короткая запись #333333 (тёмно-серый). Подбирать цвета удобно прямо в VS Code: наведите курсор на квадратик цвета рядом со значением, откроется палитра. Старая запись rgba(0, 0, 0, 0.5) с запятыми тоже работает и часто встречается в чужом коде.

Шрифт: свойства font

body {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  font-style: normal;
  line-height: 1.5;
}

h1 {
  font-size: 40px;
  font-weight: 700;
}

• font-family — шрифт. Указывают список через запятую: если первого нет на компьютере, берётся следующий. В конце всегда пишут общее семейство: sans-serif (без засечек), serif (с засечками) или monospace (моноширинный). Названия с пробелами — в кавычках.
• font-size — размер шрифта. Пока используем пиксели (px), другие единицы — в следующем уроке.
• font-weight — жирность: от 100 (очень тонкий) до 900 (очень жирный); 400 = normal, 700 = bold.
• font-style — normal или italic (курсив).
• line-height — высота строки. Число без единиц (1.5) означает «в 1,5 раза больше размера шрифта» — так текст легче читать.

Есть сокращённое свойство font, которое задаёт всё сразу:

p {
  /* стиль, жирность, размер/высота строки, семейство */
  font: italic 400 18px/1.6 Arial, sans-serif;
}

В сокращении размер и семейство обязательны, а порядок важен. Новичкам удобнее писать свойства по отдельности. Подключать собственные шрифты научимся в уроке Шрифты и картинки.

Другие полезные свойства текста

.title {
  text-transform: uppercase;    /* ВСЕ БУКВЫ ЗАГЛАВНЫЕ */
  letter-spacing: 2px;          /* расстояние между буквами */
  text-decoration: underline;   /* подчёркивание; none — убрать */
}

a {
  text-decoration: none;        /* убрать подчёркивание у ссылок */
}

Размеры: width и height

.box {
  width: 300px;
  height: 150px;
  background-color: lightblue;
}

.wide {
  width: 50%;          /* половина ширины родителя */
  max-width: 600px;    /* но не больше 600px */
}

• width и height задают ширину и высоту.
• % считается от родителя: width: 50% — половина ширины контейнера, в котором лежит элемент.
• max-width и min-width ограничивают размер: элемент может сжиматься и растягиваться, но не выходит за рамки.

Не задавайте height блокам с текстом без нужды: текста станет больше — он вылезет за границы. Пусть высота подстраивается под содержимое сама.

Выравнивание текста: text-align

h1 {
  text-align: center;
}

.price {
  text-align: right;
}

.article {
  text-align: justify;
}

text-align выравнивает содержимое внутри блока — текст и строчные элементы, в том числе картинки. Сам блок оно не двигает: чтобы поставить по центру div шириной 300px, нужен margin: 0 auto из следующего урока.

Каскад и приоритетность

Что будет, если на один элемент действуют несколько правил с разными значениями? Браузер выбирает победителя по правилам каскада. Отсюда и слово «каскадные» в названии CSS.

Правило 1. Порядок: побеждает последнее

При одинаковой силе селекторов выигрывает правило, которое написано ниже:

p { color: red; }
p { color: blue; }   /* абзацы будут синими */

То же с файлами: если подключить два CSS-файла, второй перекроет первый при равных селекторах.

Правило 2. Специфичность: побеждает более точный селектор

Специфичность — это «вес» селектора. Чем точнее селектор указывает на элемент, тем он сильнее.

Веса складываются по разрядам и сравниваются слева направо, как номера версий:

<p id="intro" class="note">Какого я цвета?</p>

#intro { color: green; }   /* 0-1-0-0 — побеждает */
p.note { color: blue; }    /* 0-0-1-1 */
.note  { color: gray; }    /* 0-0-1-0 */
p      { color: red; }     /* 0-0-0-1 */

Текст будет зелёным: id весит больше любого количества классов. Порядок правил здесь не важен — он решает только при равной специфичности.

Правило 3. !important

p {
  color: orange !important;
}

!important перебивает почти всё, включая инлайн-стили. Звучит удобно, но это «кувалда»: потом, чтобы перебить такой стиль, придётся снова писать !important, и стили превращаются в войну. Используйте только в крайних случаях.

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

Некоторые свойства наследуются: если задать их родителю, дети получат их автоматически. Обычно наследуются свойства текста — color, font-family, font-size, line-height, text-align. Размеры, фоны и отступы не наследуются.

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

Это одно правило задаёт шрифт и цвет текста для всей страницы. Но у ссылок и кнопок есть собственные стили браузера, поэтому они могут «не послушаться» — их настраивают отдельно.

Собираем всё вместе

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Карточка</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="card">
        <h2 class="card-title">Капучино</h2>
        <p class="card-text">Эспрессо с молоком и нежной пенкой.</p>
        <p class="card-price">200 сом</p>
    </div>
</body>
</html>

body {
  font-family: Arial, sans-serif;
  color: #333;
  background-color: #f5f5f5;
}

.card {
  width: 300px;
  background-color: white;
}

.card-title {
  font-size: 24px;
  text-align: center;
  color: #6b3e26;
}

.card-text {
  line-height: 1.5;
}

.card-price {
  font-weight: 700;
  text-align: right;
}

• body задаёт шрифт и цвет текста для всего, что внутри (наследование);
• .card — белый блок шириной 300px на сером фоне;
• у .card-title свой цвет: правило по классу точнее, чем унаследованный цвет от body.

Отступов пока нет, поэтому текст прилипает к краям карточки. Это исправим в следующем уроке — Позиционирование, единицы измерения и блочная модель.

Практика

1. Три способа. Создайте страницу с тремя абзацами и покрасьте первый инлайн-стилем, второй через <style>, третий через внешний style.css. Результат: три абзаца трёх разных цветов.
2. Типографика. Подключите внешний файл и задайте body шрифт Arial, sans-serif, размер 16px, высоту строки 1.6, а заголовкам — свой цвет и text-align: center. Результат: вся страница одним шрифтом, заголовки по центру.
3. Классы. Сделайте список из пяти товаров, где два помечены классом sale (красный цвет и жирный шрифт). Результат: выделены только нужные пункты.
4. Битва селекторов. Дайте одному абзацу id, class и напишите четыре правила с разными цветами (по тегу, классу, тегу с классом, id). Предскажите цвет, затем проверьте в DevTools, какие правила зачёркнуты. Результат: прогноз совпал с реальностью.
5. Карточка товара. Повторите пример с карточкой, но для трёх товаров с общими классами. Результат: три одинаково оформленные карточки с разным текстом, все стили — в одном style.css.

Итоги

• CSS-правило = селектор + объявления свойство: значение;.
• Основной способ подключения — внешний файл через <link rel="stylesheet" href="...">.
• Классы — главный инструмент для стилей; id уникален и почти не используется для оформления.
• color — цвет текста, font-* — шрифт, width/height — размеры, text-align — выравнивание содержимого.
• Каскад решает спор так: !important → специфичность → порядок в коде.
• Свойства текста наследуются от родителей; проверяйте победителя в DevTools.