CSS - это язык стилей: с его помощью ты описываешь, как должна выглядеть HTML-разметка - какого цвета текст, какой ширины блок, где отступ. Сам HTML отвечает только за структуру и смысл страницы, а CSS - за её внешний вид. Браузер читает оба файла вместе и применяет стили к нужным элементам.
В этом уроке
Попробуй прямо в этом окне: замени tomato на любой другой цвет, например dodgerblue, и посмотри, что изменится справа - именно так браузер применяет CSS сразу после того, как встретит новое правило.
Что означает аббревиатура CSS
CSS расшифровывается как Cascading Style Sheets - «каскадные таблицы стилей». Ключевое слово здесь «стили»: CSS ничего не добавляет на страницу и не меняет её смысл, он только описывает внешний вид того, что уже размечено в HTML. Слово «каскадные» станет понятнее в третьей части урока - оно про то, как браузер решает, какое правило применить, если их несколько.
Правильное ожидание от CSS: оформление находится отдельно от разметки, в собственном правиле.
<style>
p { color: #b5651d; }
</style> - настоящее CSS-правило: оформление вынесено отдельно, его легко найти и поменять.
Неправильное ожидание - красить содержимое прямо в HTML, старым способом:
<font color="red">Текст</font> - тег <font> устарел ещё до появления CSS; современные браузеры его иногда понимают, но оформление намертво вшито в разметку, и его неудобно менять.
Из чего состоит CSS-правило
Любое CSS-правило состоит из двух частей: селектора и объявлений в фигурных скобках. Селектор указывает, к какому элементу применить стиль - например, h1 означает «все заголовки первого уровня». Внутри скобок пишут одно или несколько объявлений вида «свойство: значение;» - свойство и значение разделены двоеточием, а в конце каждого объявления обязательно ставится точка с запятой.
h1 { color: #b5651d; font-size: 32px; } - два объявления, каждое закончено точкой с запятой, браузер применит оба.
h1 { color: #b5651d font-size: 32px; } - после первого значения нет точки с запятой; браузер не может понять, где заканчивается одно объявление и начинается другое, и отбрасывает всё правило целиком.
Как браузер применяет CSS к странице
Браузер сначала строит из HTML дерево элементов страницы, затем читает CSS и подбирает, какие правила подходят к каким элементам по их селекторам, - и только после этого рисует страницу на экране с учётом найденных стилей. Если для одного элемента подходит сразу несколько правил с одинаковым селектором, побеждает то, что находится ниже по коду, - это и называется каскадом.
p { color: #b5651d; }
p { color: blue; } - итоговый цвет текста будет blue: это правило идёт ниже, и при прочих равных побеждает именно оно.
Неправильное ожидание - что применятся оба правила сразу или что побеждает то, что написано первым:
p { color: blue; }
p { color: #b5651d; } - при том же самом раскладе итоговый цвет уже #b5651d, потому что теперь ниже находится он.
Частые ошибки новичков
| Ошибка | Что происходит | Как исправить |
|---|---|---|
| Забыть точку с запятой между объявлениями | Браузер не понимает, где заканчивается одно объявление и начинается следующее, и может отбросить всё правило | Ставить точку с запятой после каждого объявления, включая последнее |
Написать color = red вместо color: red |
Браузер не узнаёт такое объявление и просто игнорирует его - страница остаётся неоформленной | Использовать двоеточие между свойством и значением, а не знак равенства |
Оформлять текст старыми HTML-тегами вроде <font> или <center> |
Оформление жёстко привязано к разметке - его неудобно найти и поменять, а сами теги устарели | Выносить любое оформление в CSS-правило, а не в HTML-теги |
| Ждать, что при конфликте правил победит то, что написано первым | При одинаковой силе правил побеждает то, что находится ниже по коду - это осознанное поведение каскада, а не ошибка | Размещать более важные правила ниже в файле или явно повышать их специфичность |
Шпаргалка
| Термин | Значение |
|---|---|
| CSS | Cascading Style Sheets - «каскадные таблицы стилей», язык оформления HTML-страниц |
| Правило | Селектор плюс объявления в фигурных скобках, например h1 { color: tomato; } |
| Селектор | Часть правила, которая указывает, к каким элементам применить стиль |
| Объявление | Пара «свойство: значение;» внутри правила, например color: tomato; |
| Каскад | Механизм, который решает, какое из конфликтующих правил применить - обычно побеждает то, что ниже по коду |
Коротко: отвечаем на вопросы
Можно ли сделать страницу вообще без CSS?
Технически да - браузер всё равно покажет HTML. Но выглядеть это будет как обычный текст сверху вниз, чёрным по белому, без цветов и продуманного расположения блоков - примерно как страницы в самом начале интернета.
Куда лучше подключать CSS - прямо в HTML-файл или отдельным файлом?
Для небольших примеров, как в этом уроке, годится и код внутри самой страницы. Но для настоящего сайта стили обычно выносят в отдельный файл - подробно разберём все три способа подключения CSS в следующем уроке.
Обязательно ли ставить точку с запятой после самого последнего объявления в правиле?
Формально для последнего объявления в правиле браузер её простит. Но если потом добавить ещё одно свойство после него и забыть поставить точку с запятой, оба объявления слипнутся и перестанут работать - поэтому проще всегда ставить её по привычке, после каждого объявления.
Что будет, если браузер не понимает какое-то CSS-свойство или значение?
Браузер молча пропускает именно это объявление и продолжает применять остальные стили дальше - страница не сломается целиком. Это специально заложенное поведение CSS, а не ошибка.
