Что такое CSS и с чего начать его изучение

CSS — язык стилей, который управляет внешним видом и раскладкой HTML-документа. HTML сообщает, что перед нами заголовок, список или кнопка, а CSS определяет цвет, шрифт, расстояния, размеры и расположение на разных экранах.

CSS не заменяет правильную разметку. Настоящая <button> остаётся доступнее кликабельного <div>, даже если оба выглядят одинаково.

Подключение таблицы стилей

Создайте два файла:

<!-- index.html --><!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="styles.css"></head><body>  <main class="page">    <h1 class="page__title">Изучаем CSS</h1>    <p class="page__lead">Начнём с одного понятного компонента.</p>  </main></body></html>​

/* styles.css */body {  margin: 0;  font-family: Arial, sans-serif;  line-height: 1.6;  color: #20242c;  background-color: #f2f4f7;}​.page {  inline-size: min(100% - 2rem, 60rem);  margin-inline: auto;  padding-block: 4rem;}​.page__title {  margin-block: 0 1rem;  color: #5b21b6;}​

Путь в href вычисляется относительно HTML-файла. Если стили не применились, первым делом проверьте вкладку Network и консоль браузера.

Из чего состоит правило

.page__lead {  max-inline-size: 60ch;  font-size: 1.125rem;}​

• .page__lead — селектор;
• max-inline-size и font-size — свойства;
• 60ch и 1.125rem — значения;
• пара свойство: значение — объявление.

Точка выбирает класс. Лучше добавлять классы по назначению, чем строить длинный селектор по структуре DOM.

Первые селекторы

/* Все абзацы */p { ... }​/* Элемент с классом */.card { ... }​/* Элемент с двумя классами */.card.card--featured { ... }​/* Дочерний элемент блока */.card__title { ... }​/* Атрибут */[aria-current="page"] { ... }​/* Состояние */.button:hover { ... }​

Не начинайте с идентификаторов и селекторов вроде header div ul li a: они хрупкие и имеют лишнюю специфичность.

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

Когда несколько правил задают одно свойство, браузер применяет каскад. Учитываются происхождение, важность, слои, специфичность и порядок.

p {  color: #344054;}​.intro {  color: #5b21b6;}​

Для <p class="intro"> победит класс. Некоторые свойства, например color и font-family, наследуются от родителя. Отступы и границы обычно не наследуются.

Не лечите каждый конфликт через !important. Откройте DevTools и посмотрите, какое правило победило и почему.

Box model

Каждый элемент имеет содержимое, внутренний отступ padding, рамку border и внешний отступ margin.

*,*::before,*::after {  box-sizing: border-box;}​.card {  inline-size: 20rem;  padding: 1.5rem;  border: 1px solid #d0d5dd;  margin-block: 2rem;}​

С border-box заданная ширина включает padding и border. Это делает расчёт компонентов предсказуемее.

Поток документа, Flexbox и Grid

Сначала изучите обычный поток: блочные элементы идут друг за другом, inline-содержимое заполняет строки. Затем переходите к инструментам раскладки.

Flexbox подходит для одной оси:

.actions {  display: flex;  flex-wrap: wrap;  gap: 0.75rem;  align-items: center;}​

Grid удобен для строк и колонок:

.card-grid {  display: grid;  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));  gap: 1.5rem;}​

Не начинайте раскладку с position: absolute: она вынимает элемент из потока и плохо подходит для обычных текстовых блоков.

Адаптивность

.layout {  display: grid;  gap: 1.5rem;}​@media (min-width: 60rem) {  .layout {    grid-template-columns: minmax(0, 1fr) 18rem;  }}​

Базовый вариант работает на узком экране, а медиазапрос добавляет колонку при наличии места. Проверяйте промежуточные ширины, масштаб 200% и длинный текст.

Учебный маршрут

1. Семантический HTML и обычный поток.
2. Синтаксис, классы, наследование и каскад.
3. Box model и единицы измерения.
4. Типографика, цвета, фон и состояния ссылок.
5. Flexbox и Grid.
6. Адаптивные изображения и медиазапросы.
7. Псевдоклассы, псевдоэлементы и custom properties.
8. Доступность, производительность и архитектура компонентов.

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

Как пользоваться DevTools

В инструментах разработчика можно:

• включать и отключать объявления;
• менять значения без редактирования файла;
• видеть box model;
• находить зачёркнутые правила;
• эмулировать ширину и предпочтения пользователя;
• проверять вычисленные стили и дерево доступности.

Изменения в DevTools временные. Удачный вариант перенесите в исходный CSS и повторно проверьте страницу.

Что запомнить

Изучайте CSS от обычного потока и box model к Flexbox и Grid, а не через набор случайных свойств. Используйте понятные классы, низкую специфичность и реальные компоненты. Регулярная отладка в DevTools и проверка на разных ширинах важнее заучивания справочника.

report Сообщить об ошибке в статье