Таблицы стилей CSS: селекторы, свойства и блочная модель

Если HTML отвечает за структуру и скелет веб-страницы (текст, заголовки, кнопки), то за визуальную красоту, стиль, цвета, анимации и адаптивную верстку отвечает CSS.

CSS (Cascading Style Sheets — каскадные таблицы стилей) — формальный язык описания внешнего вида веб-документов.

Фундаментальный принцип веб-разработки — разделение обязанностей (Separation of Concerns):

• HTML хранит содержание и смысл документа;

• CSS определяет визуальное оформление;

• JavaScript добавляет интерактивность и реакцию на действия пользователя.

Благодаря CSS можно полностью изменить дизайн и цветовую гамму миллиона страниц сайта, отредактировав всего один внешний стилевой файл style.css.

CSS-правило состоит из двух частей: селектора и блока объявлений в фигурных скобках:

селектор {

свойство: значение;

свойство2: значение2;

}

Селектор указывает браузеру, к каким именно элементам страницы применить оформление:

1. Селектор по тегу — стилизует все теги данного типа на странице:

p { color: red; font-size: 16px; }

(все абзацы станут красными);

2. Селектор по классу (начинается с точки .) — самый популярный и гибкий селектор:

.card-button { background-color: #0089a0; border-radius: 8px; }

В HTML тегу задается атрибут class="card-button";

3. Селектор по идентификатору (начинается с решетки #) — уникальный стиль для одного элемента на странице:

#header-logo { width: 120px; }.

В веб-дизайне абсолютно каждый элемент страницы браузер воспринимает как невидимый прямоугольный бокс (коробку).

Блочная модель Box Model состоит из четырех концентрических слоев (изнутри наружу):

1. Контент (Content) — непосредственно область текста, кнопки или изображения (ширина width и высота height);

2. Внутренний отступ (Padding) — расстояние от контента до внутренней границы рамки (создает «воздух» внутри кнопки или карточки);

3. Рамка (Border) — видимая или прозрачная граница элемента (толщина, стиль solid/dashed, цвет);

4. Внешний отступ (Margin) — пустое пространство снаружи рамки, отделяющее данный элемент от соседних блоков.

Существуют три способа связать стили с HTML-документом:

1. Внешний файл стилей (рекомендуемый способ) — отдельный файл style.css, подключаемый в секции <head> одной строкой:

<link rel="stylesheet" href="style.css">

2. Внутренние стили — блок тегов <style>...</style> внутри <head> документа;

3. Встроенные (inline) стили — атрибут style="..." прямо в открывающем теге (например, <p style="color: blue;">). Используются редко, так как засоряют разметку.