Что такое CSS и зачем он нужен
HTML определяет структуру документа: заголовки, абзацы, изображения и списки. CSS задаёт внешний вид HTML-элементов. Разделение содержания и оформления позволяет менять дизайн, сохраняя разметку.
CSS относится к декларативным языкам: вы описываете результат, а браузер рассчитывает отображение. JavaScript, или JS, обычно отвечает за поведение страницы, например расчёт суммы заказа.
Без авторского CSS остаётся оформление браузера: крупные заголовки, выделенные ссылки, отступы между абзацами. Ваши стили меняют эту основу под макет.
В карточке товара HTML содержит название, фото и описание. CSS размещает их рядом, задаёт фон и оформляет кнопку.
Как подключить CSS к HTML-документу
Основные способы подключения CSS: внешний файл, тег style и атрибут style у отдельного элемента. Для начала удобно создать index.html и style.css в одной папке. Подключение общего файла позволяет менять оформление нескольких страниц в одном месте.
Есть и правило @import: оно подключает другую таблицу внутри CSS. Например, @import url(base.css); помещают перед обычными правилами. Исключения для служебных правил описаны в справочнике MDN.
Внешняя таблица стилей
В head добавьте link с rel=stylesheet и путём к файлу в href. Если файл лежит в папке styles, укажите styles/style.css. Ниже приведён готовый HTML-документ для проверки подключения.
Стили внутри документа
Тег style в head содержит CSS-код целиком. Он удобен для учебного примера; на нескольких страницах такие стили придётся повторять.
Стиль у отдельного элемента
Атрибут style содержит объявления, например color: red;, без селектора и скобок. Он подходит для точечной проверки, но усложняет общие настройки.
<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Проверка CSS</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="card">
<h1>Моя первая страница</h1>
<p>Этот абзац станет красным.</p>
</main>
</body>
</html>Синтаксис CSS: селектор, свойство и значение
Структура обычного правила CSS: сначала селектор, затем блок объявлений в фигурных скобках. Селектор выбирает элементы страницы. Каждое объявление состоит из свойства и значения, разделённых двоеточием. Между объявлениями ставят точку с запятой.
Сохраните предыдущий HTML как index.html, а следующий CSS как style.css в той же папке. Откройте index.html в браузере: абзац станет красным, карточка получит рамку и отступы.
Комментарий CSS записывают между /* и */. Он поясняет код и не влияет на оформление.
Проверяйте скобки, двоеточия и допустимые значения. Отступы в коде помогают читать его, но не заменяют разделители объявлений.
/* Общие настройки текста */
body {
font-family: Arial, sans-serif;
}
.card {
max-width: 36rem;
margin: 20px auto;
padding: 10px 20px;
border: 1px solid #333;
}
p {
color: red;
font-weight: bold;
}Селекторы CSS: как выбрать нужные элементы
Селекторы CSS выбирают элементы по типу, классу, атрибуту или состоянию. Класс подходит для повторяющихся карточек. Значение id в корректном HTML должно быть уникальным внутри документа.
В CSS .card выбирает класс, а #header выбирает идентификатор. В HTML значения class и id пишут без точки и решётки.
Запятая объединяет селекторы, пробел выбирает потомков. Селектор .card a затронет ссылки внутри карточек; .card, a затронет карточки и все ссылки.
| Селектор | Что выбирает | Когда применять |
|---|---|---|
| p | Все элементы p | Общее оформление абзацев |
| .card | Элементы с классом card | Повторяющиеся карточки |
| #header | Элемент с id header | Конкретная область документа |
| .card a | Ссылки внутри .card на любом уровне вложенности | Оформление ссылок карточки |
| a:hover | Ссылку при наведении указателя | Изменение внешнего вида при наведении |
| h1, h2 | Элементы h1 и h2 | Общие свойства разных заголовков |
| img[src] | Изображения с атрибутом src | Отбор по наличию атрибута |
| * | Все элементы | Общие настройки, например box-sizing |
| .card > p | Абзацы, непосредственно вложенные в .card | Отбор прямых потомков |
| h2 + p | Абзац сразу после h2 с тем же родителем | Оформление первого абзаца раздела |
| p::first-line | Первую строку абзаца | Оформление части элемента псевдоэлементом |
Шрифты, цвет и фон: основные свойства CSS
Начните с читаемого текста: задайте шрифт, размер и межстрочный интервал. Цвет текста меняет color, а фон элемента меняет background-color.
Цвет можно задать именем red, кодом #ff0000 или функцией rgb(255 0 0). Запись rgb(255 0 0 / 50%) добавляет прозрачность. Значения здесь учебные, палитру выбирайте с учётом контраста текста и фона.
Свойство font-family определяет шрифт, font-size задаёт размер, font-weight управляет насыщенностью. Параметр line-height меняет высоту строки. Значение text-align: center выравнивает текст по центру внутри блока, но не перемещает сам блок.
Общие шрифты удобно задавать для body: текстовые свойства наследуются потомками. Отдельным заголовкам можно назначить свой размер и тень text-shadow.
Размеры CSS допускают разные единицы измерения. px обозначает CSS-пиксель, rem связан с размером шрифта корневого элемента. Для width значение в процентах обычно рассчитывается относительно ширины содержащего блока. Выбор единицы зависит от свойства и задачи.
В font-family: Arial, sans-serif браузер сначала пробует Arial, затем доступный шрифт без засечек. Это запасной вариант, а не название конкретного шрифта. Фоновую картинку задаёт background-image: url(image.png);, а повторение отключает background-repeat: no-repeat;.
Блочная модель CSS
Блочная модель CSS объясняет, из чего складывается размер блока. В центре находится область содержания, или content: текст, изображение и вложенные элементы. Далее идут внутренний отступ padding, граница border и внешний отступ margin.
Padding отделяет содержимое от рамки; margin оставляет место снаружи. В записи padding: 10px 20px первое значение задаёт верхний и нижний отступы, второе задаёт левый и правый.
При box-sizing: content-box ширина width относится к области содержания. Padding и border увеличивают наружную ширину. При box-sizing: border-box заданная ширина включает внутренние отступы и рамку. Внешний margin в эту ширину не входит.
Для центрирования изображения в обычном потоке задайте display: block; max-width: 100%; height: auto; margin: 0 auto;. Когда картинка уже контейнера, автоматические боковые отступы делят свободное место поровну.
Каскад, специфичность и наследование в CSS
Каскад CSS определяет итоговое значение, когда к одному элементу подходят разные объявления. Отсюда название «каскадные таблицы стилей».
Браузер учитывает применимость объявлений, их происхождение, важность и слои каскада. Затем сравнивает специфичность селекторов. При дальнейшем равенстве учитывается близость области @scope, если она задана, и порядок записи.
Без слоёв и !important класс .note имеет большую специфичность, чем p. При прочих равных решает порядок записи.
Наследование работает иначе: некоторые свойства переходят от родителя к потомкам. Например, color и font-family могут прийти от body, а margin обычно не наследуется. Собственное объявление color у дочернего элемента заменяет унаследованный цвет.
Пометка !important повышает приоритет объявления внутри каскада, но не побеждает любой стиль. Сначала найдите источник конфликта в инструментах разработчика.
CSS-вёрстка: Flexbox, Grid и позиционирование
За расположение элементов отвечает отдельная группа возможностей CSS. В обычном потоке блоки следуют друг за другом, а строчный текст заполняет строки. Для управляемого макета применяются Flexbox, Grid и позиционирование.
Flexbox для ряда или колонки
Свойство display: flex создаёт гибкий контейнер. Его непосредственные дочерние элементы можно выстроить вдоль основной оси, выровнять и разделить промежутками gap. Такой CSS подходит для меню, ряда кнопок или строки с изображением и описанием.
Grid для сетки
С помощью display: grid вы задаёте строки и столбцы. CSS Grid удобен для каталога, где карточки должны занимать согласованные ячейки. Flexbox и Grid могут использоваться вместе: сетка снаружи, гибкое расположение содержимого внутри карточки.
Float и position
Float задаёт обтекание элемента текстом. Для основного макета рассмотрите Flexbox или Grid. Position: relative сохраняет место элемента в потоке; position: absolute исключает его из потока. Position: fixed обычно привязывает элемент к области просмотра; отдельные свойства предков могут изменить эту привязку.
Адаптивный CSS: пример для разных экранов
Адаптивный дизайн помогает сохранять удобную структуру при изменении ширины окна. Медиазапрос CSS проверяет условие и применяет вложенные объявления, когда оно выполнено. Ниже карточка становится колонкой при ширине области просмотра до 600 CSS-пикселей включительно.
Display: flex включает раскладку, а flex-direction: column меняет её направление. Число 600 выбрано для примера. В проекте границу определяет ширина, при которой содержимому становится тесно.
- Откройте страницу в браузере и постепенно уменьшайте ширину окна.
- Проверьте длинный заголовок, подписи кнопок и крупное изображение.
- Найдите момент, когда блоки перестают помещаться рядом.
- Измените CSS в медиазапросе и повторите проверку с реальным содержанием.
.card {
display: flex;
gap: 1rem;
}
@media (max-width: 600px) {
.card {
flex-direction: column;
}
}Развитие CSS и поддержка браузерами
Первые уровни CSS описывали язык целиком; затем стандарт разделили на модули, которые развиваются независимо. Поэтому CSS3 не обозначает одну завершённую версию, а единой спецификации CSS4 нет. На сентябрь 2026 года учите конкретные возможности и проверяйте их совместимость.
В справочнике MDN у каждого свойства есть таблица Browser compatibility. Сверяйте её с браузерами и устройствами посетителей. Правило @supports позволяет применить CSS при поддержке указанной возможности. Сначала задайте базовое оформление, затем добавьте улучшение внутри проверки.
Препроцессоры и CSS-фреймворки
Препроцессор Sass преобразует исходный код с дополнительными возможностями в обычный CSS. Браузеру подключают полученный файл. Переменные Sass обрабатываются при сборке; переменные CSS участвуют в каскаде браузера.
CSS-фреймворк предоставляет готовые стили и компоненты: например, сетки, кнопки и формы. Устройство такого набора показано в документации Bootstrap. Для первых упражнений он необязателен: сначала полезно разобраться, как селекторы и свойства формируют результат.
Как начать изучать CSS на практике
Для начала достаточно текстового редактора и браузера. Используйте пример выше, меняя одно свойство за раз и наблюдая результат.
Следующее упражнение: добавьте изображение, затем несколько карточек и расположите их в ряд. Проверяйте CSS с длинным текстом и на узком экране.
Если оформление не изменилось, откройте инструменты разработчика и выберите нужный элемент. Проверьте загрузку файла, совпадение класса и перечёркнутые объявления. Панель вычисленных стилей поможет увидеть итоговое значение свойства.
Помощь с CSS
Если вы меняете CSS на действующем сайте, сначала сохраните исходный файл. Проверяйте не только главную страницу: общие классы могут использоваться в каталоге, статьях и формах.
Нужна помощь с оформлением? Посмотрите услугу дизайн сайта и опишите нужные экраны и ограничения вёрстки. seosite1 делает сайты с 2009 года и работает удалённо по всей России. Цену и сроки называем после брифа.