Глава 1 · Урок 1 из 6
Что такое CSS
Что такое CSS и зачем он нужен: как HTML описывает смысл страницы, а CSS — её вид, из чего состоит правило и почему стили живут отдельно от разметки.
Цель урока
Понять, какую задачу решает CSS, чем он отличается от HTML и из каких частей состоит самое простое правило.
Смысл и оформление
Веб-страница собирается из двух слоёв. HTML отвечает за смысл: здесь заголовок, здесь абзац, здесь список, а вот ссылка. CSS (Cascading Style Sheets, каскадные таблицы стилей) отвечает за вид: какого цвета заголовок, какой шрифт у абзацев, как пункты списка стоят — столбиком или в ряд.
Без CSS страница всё равно работает: браузер покажет её со своими стилями по умолчанию — чёрный текст на белом, синие подчёркнутые ссылки, крупные жирные заголовки. CSS заменяет эти умолчания вашими решениями.
<h1>Прогноз на завтра</h1>
<p>Утром облачно, днём <strong>солнце</strong>, вечером дождь.</p>h1 {
color: darkslateblue;
font-family: Georgia, serif;
}
p {
max-width: 30em;
line-height: 1.6;
}
strong {
color: darkorange;
}Результат
Попробуйте мысленно убрать CSS из примера: текст и его смысл останутся теми же, изменится только внешний вид. Это главное разделение, на котором построен веб.
Из чего состоит правило
Стили записываются правилами. Правило говорит: «вот этим элементам — вот такое оформление».
h1 {
color: darkslateblue;
font-size: 2rem;
}h1— селектор: он выбирает, к каким элементам применить правило. Здесь — ко всем заголовкам первого уровня.- Фигурные скобки ограничивают блок объявлений.
color: darkslateblue;— объявление: слева свойство (что меняем), справа через двоеточие значение (на что меняем). Объявления разделяются точкой с запятой.
Свойств в CSS несколько сотен: цвета, шрифты, отступы, размеры, раскладка, анимации. Все они собраны в справочнике, а учебник знакомит с ними по порядку.
Почему «каскадные»
Одному элементу могут подходить сразу несколько правил: из стилей браузера, из вашего файла, из атрибута style. Каскад — это алгоритм, который решает, какое объявление победит, когда они спорят. Ему посвящена отдельная глава учебника, а пока достаточно знать, что спор всегда решается предсказуемо.
Зачем стили отдельно от разметки
Если оформление живёт в отдельном файле, один и тот же файл стилей подключается ко всем страницам сайта. Захотели другой цвет ссылок — поменяли одну строку, и он поменялся везде. Разметка при этом остаётся чистой: её легче читать, её понимают поисковики и программы экранного доступа.
Ещё одно следствие: одна разметка может выглядеть по-разному в разных условиях. CSS умеет подстраивать страницу под ширину экрана, тёмную тему, печать на бумаге — и всё это без изменения HTML.
Что запомнить
- HTML описывает, что на странице есть, CSS — как это выглядит.
- Правило CSS — это селектор и блок объявлений в фигурных скобках.
- Объявление — пара «свойство: значение», объявления разделяются точкой с запятой.
- Один файл стилей оформляет сколько угодно страниц, поэтому вид сайта меняется в одном месте.
Проверьте себя
Практика
Задача 1
Оформите заголовок
Сделайте заголовок тёмно-синим (darkblue), а абзац — серым (gray) с межстрочным интервалом 1.6.
<h1>Заметки путешественника</h1>
<p>Сегодня мы дошли до озера и разбили лагерь у старой сосны.</p>Ожидаемый результат
Показать решение
h1 {
color: darkblue;
}
p {
color: gray;
line-height: 1.6;
}Задача 2
Найдите ошибки в правиле
В правиле три ошибки, из-за которых часть объявлений не сработает. Найдите и исправьте их.
p
color: green
font-size 18px;
}Показать решение
p {
color: green;
font-size: 18px;
}Не хватало открывающей фигурной скобки, точки с запятой после green и двоеточия после font-size.