День 2 | Основы CSS — Продвинутый курс по верстке сайтов

Что такое CSS?

CSS (Cascading Style Sheets) — это язык стилей, который описывает, как должны выглядеть HTML элементы на странице. Если HTML — это структура (скелет), то CSS — это внешний вид (одежда).

Зачем нужен CSS? Без CSS все элементы на странице отображались бы в стандартном виде браузера: чёрный текст на белом фоне, без отступов, без цветов, без красоты. CSS позволяет сделать страницу красивой и удобной для пользователя.

Подключение CSS к HTML

Есть три способа подключить CSS к HTML:

Способ 1: Внешний файл (рекомендуется)

<!-- В <head> -->
<link rel="stylesheet" href="style.css">

Преимущества:

Один файл CSS можно использовать для многих HTML страниц
Код не смешивается с HTML
Браузер может кэшировать CSS файл (быстрее загрузка)

Способ 2: Внутри HTML (в теге <style>)

<style>
  h1 {
    color: red;
  }
</style>

Используется редко, обычно для небольших стилей или когда нельзя использовать внешний файл.

Способ 3: Инлайн стили (в атрибуте style)

<h1 style="color: red;">Заголовок</h1>

Не рекомендуется! Смешивает HTML и CSS, сложно поддерживать. Используйте только в крайних случаях.

Синтаксис CSS

CSS состоит из правил. Каждое правило выглядит так:

селектор {
  свойство: значение;
  другое-свойство: значение;
}

Разберём по частям:

Селектор — указывает, к какому элементу применяются стили
Фигурные скобки {} — содержат свойства и значения
Свойство — что мы хотим изменить (например, color, font-size)
Значение — как мы хотим изменить (например, red, 16px)
Точка с запятой ; — разделяет свойства (обязательна!)

Селекторы

Селектор — это способ выбрать элемент, к которому применяются стили. Есть несколько типов селекторов:

1. Селектор элемента (тега)

h1 {
  color: red;
}

p {
  font-size: 16px;
}

Применяется ко всем элементам этого типа на странице.

2. Селектор класса

.button {
  background: blue;
}

.text-center {
  text-align: center;
}

Применяется ко всем элементам с этим классом. Класс указывается в HTML через атрибут class:

<button class="button">Кнопка</button>
<p class="text-center">Текст по центру</p>

Важно: В CSS класс начинается с точки (.), в HTML — без точки!

3. Селектор ID

#header {
  background: #333;
}

#main-content {
  padding: 20px;
}

Применяется к элементу с этим ID. ID должен быть уникальным на странице (только один элемент с таким ID).

<header id="header">...</header>
<main id="main-content">...</main>

Важно: В CSS ID начинается с решётки (#), в HTML — без решётки!

Когда использовать класс, а когда ID?

Класс — если элемент может повторяться (кнопки, карточки)
ID — если элемент уникальный (header, footer, main)

4. Вложенные селекторы

/* Все параграфы внутри .container */
.container p {
  color: blue;
}

/* Все ссылки внутри .nav */
.nav a {
  color: white;
}

Пробел между селекторами означает "внутри". Первый селектор — родитель, второй — потомок.

Базовые свойства CSS

Цвет текста

color: red;
color: #F36049;
color: rgb(243, 96, 73);
color: rgba(243, 96, 73, 0.8); /* с прозрачностью */

Размер шрифта

font-size: 16px;
font-size: 1.5em;
font-size: 1.2rem;

Единицы измерения:

px — пиксели (фиксированный размер)
em — относительно размера родителя
rem — относительно размера корневого элемента (html)
% — проценты

Отступы

/* margin — внешние отступы */
margin: 20px;              /* все стороны */
margin: 20px 10px;         /* верх/низ, лево/право */
margin: 20px 10px 5px;     /* верх, лево/право, низ */
margin: 20px 10px 5px 15px; /* верх, право, низ, лево */

/* padding — внутренние отступы */
padding: 20px;
padding: 20px 10px;
padding-top: 20px;
padding-left: 10px;

Ширина и высота

width: 300px;
width: 50%;
width: 100%;

height: 200px;
height: auto; /* автоматическая высота по содержимому */

Фон

background-color: #F36049;
background: #F36049;
background: url("image.jpg");
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

Каскадность и специфичность

Каскадность — это принцип, по которому браузер определяет, какие стили применять, если есть конфликты.

Правила:

Последний стиль имеет приоритет (если одинаковые селекторы)
Более специфичный селектор побеждает менее специфичный
Стили с !important имеют наивысший приоритет (не рекомендуется использовать!)

Специфичность (приоритет):

Селектор элемента: 1 балл
Селектор класса: 10 баллов
Селектор ID: 100 баллов
Инлайн стили: 1000 баллов

Браузер выбирает стиль с наибольшим количеством баллов.

Наследование

Некоторые свойства CSS наследуются от родителя к потомкам:

✅ Наследуются: color, font-family, font-size, line-height
❌ Не наследуются: margin, padding, width, height, background

Псевдоклассы

Псевдоклассы — это специальные ключевые слова, которые добавляются к селектору для выбора элементов в определённом состоянии.

Основные псевдоклассы:

:hover — при наведении курсора
:active — при нажатии (клике)
:focus — когда элемент в фокусе (например, input при вводе)
:visited — для посещённых ссылок
:first-child — первый дочерний элемент
:last-child — последний дочерний элемент
:nth-child(n) — n-й дочерний элемент
:not(селектор) — все элементы, кроме указанных

Практические примеры:

/* Каждая вторая строка таблицы */
tr:nth-child(even) {
  background: #f5f5f5;
}

/* Каждая третья карточка */
.card:nth-child(3n) {
  margin-right: 0;
}

/* Все элементы кроме первого */
.item:not(:first-child) {
  margin-top: 20px;
}

Псевдоэлементы

Псевдоэлементы — это ключевые слова, которые позволяют стилизовать определённые части элемента.

Основные псевдоэлементы:

::before — создаёт элемент перед содержимым
::after — создаёт элемент после содержимого
::first-line — первая строка текста
::first-letter — первая буква текста
::selection — выделенный текст

Важно для ::before и ::after:

Обязательно нужно свойство content (даже если пустое: content: "")
По умолчанию display: inline
Можно использовать для декоративных элементов, иконок, подчёркиваний

Практическое задание

Создайте файл style.css
Подключите его к HTML файлу через <link>
Стилизуйте заголовки (h1, h2) — цвет, размер
Стилизуйте параграфы — цвет, размер, межстрочный интервал
Создайте класс .button и стилизуйте кнопку
Добавьте :hover эффект для кнопки
Создайте класс .container для ограничения ширины контента
Поэкспериментируйте с отступами (margin, padding)
Попробуйте разные селекторы (элемент, класс, вложенные)
Используйте псевдоклассы (:hover, :first-child, :nth-child)
Используйте псевдоэлементы (::before, ::after) для декоративных элементов

Что дальше?

Отлично! Теперь вы знаете основы CSS, включая псевдоклассы и псевдоэлементы. В следующем уроке мы изучим Flexbox — мощный инструмент для создания макетов и выравнивания элементов.

Материалы по теме

Глоссарий digital-терминов Глоссарий
Статьи блога по разработке и SEO Блог
Практические чеклисты по внедрению Чеклисты
Ваш сайт тормозит? Вот сколько денег вы теряете каждый день Статья

День 2 | Основы CSS

Что такое CSS?

Подключение CSS к HTML

Способ 1: Внешний файл (рекомендуется)

Способ 2: Внутри HTML (в теге <style>)

Способ 3: Инлайн стили (в атрибуте style)

Синтаксис CSS

Селекторы

1. Селектор элемента (тега)

2. Селектор класса

3. Селектор ID

4. Вложенные селекторы

Базовые свойства CSS

Цвет текста

Размер шрифта

Отступы

Ширина и высота

Фон

Каскадность и специфичность

Наследование

Псевдоклассы

Основные псевдоклассы:

Псевдоэлементы

Основные псевдоэлементы:

Практическое задание

Что дальше?

Материалы по теме

Оставить заявку