CSS (Cascading Style Sheets, каскадные таблицы стилей) — язык, используемый для описания внешнего вида HTML-документов. Он определяет визуальные характеристики элементов: цвета, шрифты, размеры, расположение, отступы и другие параметры.
Когда браузер загружает HTML-документ, он формирует структуру страницы, состоящую из заголовков, абзацев, изображений, ссылок и других элементов. Затем на эту структуру накладываются CSS-правила, которые превращают исходный набор блоков в оформленный интерфейс.
Например, HTML-код:
<p>Пример текста</p>
будет выглядеть как обычный абзац. Если к нему применить CSS:
p {
font-size: 20px;
color: darkblue;
}
то текст изменит размер и станет синим.
CSS — обязательная часть веб-разработки, поскольку без него сайт практически не имеет визуального стиля.
Использование CSS позволяет отделить структуру документа от его оформления. Это упрощает поддержку и развитие проекта, поскольку стили собраны в одном месте и могут быть изменены без изменения HTML-кода.
CSS решает следующие задачи:
Повышение удобочитаемости.
Можно увеличить межстрочный интервал, изменить размер и цвет заголовков, добавить отступы между блоками. Это улучшает восприятие информации.
Управление визуальной идентичностью.
Цветовая схема, шрифты, элементы навигации — всё это формируется средствами CSS.
Оптимизация расположения элементов.
CSS позволяет выстраивать блоки в строки, колонки, фиксировать их положение относительно других элементов.
Создание интерактивных реакций.
При наведении на кнопку можно изменить её цвет. Эффекты переходов делают взаимодействие более плавным.
Повторное использование стилей.
Один и тот же класс может применяться к десяткам элементов. Это ускоряет работу и делает код компактным.
Без CSS страница представляет собой линейную последовательность элементов. Стилизация — ключевой шаг в превращении структуры в интерфейс.
Для задания стилей можно использовать три основных метода. Каждый подходит для своих ситуаций.
Это основной способ. Стили записываются в файл, например style.css. После этого в HTML в разделе <head> делается подключение:
<link rel="stylesheet" href="style.css">
Преимущества:
<style>Стили можно размещать непосредственно в HTML-документе:
<style>
p {
color: green;
}
</style>
Такой подход используют для небольших экспериментов или простых страниц. В больших проектах его применяют реже из-за ухудшения структуры.
Свойства можно задавать прямо внутри HTML-тега:
<p style="color: red; font-weight: bold;">Текст</p>
Этот метод имеет самый высокий приоритет, но делает код менее удобным для поддержки. На занятиях его используют для демонстрации каскада и специфичности, но в реальных проектах стараются избегать.
CSS-правило состоит из двух частей:
Пример:
.card {
background-color: white;
padding: 20px;
border-radius: 8px;
}
Селектор .card выберет все элементы с атрибутом class="card".
Селектор по тегу:
h1 {
font-size: 32px;
}
Селектор по классу:
.highlight {
background-color: yellow;
}
Селектор по идентификатору:
#main-title {
text-align: center;
}
Селектор вложенного элемента:
.card p {
color: #555;
}
Селектор псевдокласса — состояние элемента:
.btn:hover {
background-color: #555;
}
Каждый селектор задаёт набор свойств, который будет применён к выбранным элементам.
Свойство состоит из имени и значения:
color: blue;
font-size: 18px;
margin: 10px;
Свойства определяют внешний вид каждого элемента и могут перекрываться при помощи каскада.
HTML-элементы образуют древовидную структуру. Некоторые CSS-свойства автоматически наследуются от родительского элемента к дочерним. Наследуются свойства, связанные с текстом:
font-family;font-size;color;line-height.Например, если задать:
body {
color: darkslategray;
}
то все абзацы, ссылки и заголовки унаследуют этот цвет, если у них не указано собственное значение.
Однако такие свойства, как margin, padding, border, не наследуются. Это позволяет отдельно управлять геометрией каждого элемента.
Один элемент может быть выбран сразу несколькими селекторами — например, по тегу, по классу и по псевдоклассу. Если разные правила задают одно и то же свойство, браузер должен решить, какое значение станет окончательным.
Порядок применения стилей зависит от:
Типа источника.
Инлайновый стиль имеет больший приоритет, чем стиль из файла.
Специфичности селекторов.
Браузер вычисляет конкретность селектора:
селекторы по идентификатору имеют больший вес, чем селекторы по классу;
селекторы по классу — больший, чем селекторы по тегу.
Пример:
p → низкая специфичность
.text → выше
#content → ещё выше
Порядка объявления.
Если специфичность равна, преимущество имеет правило, которое расположено ниже.
Пример:
p {
color: blue;
}
.text {
color: red;
}
Если HTML содержит:
<p class="text">Текст</p>
то текст будет красным, поскольку селектор по классу имеет большую специфичность, чем селектор по тегу.
| Свойство | Описание | Возможные значения (примеры) |
|---|---|---|
color |
Цвет текста элемента | Название цвета (red, white), шестнадцатеричный код (#333333), функция rgb() или rgba() |
background-color |
Цвет фона элемента | Аналогично свойству color: именованные цвета, #f2f2f2, rgb(0, 0, 0) и так далее |
background |
Сокращенная запись фона (цвет, изображения, позиция и т. п.) | Можно задавать только цвет (background: white;) или комбинировать с изображением и положением |
font-family |
Шрифт текста | Имена шрифтов, перечисленные через запятую, например Arial, sans-serif |
font-size |
Размер шрифта | Значения в пикселях (16px, 32px), процентах (120%), относительных единицах (1.2em, 1rem) |
font-weight |
Насыщенность шрифта | normal, bold, числовые значения (400, 700) |
margin |
Внешний отступ вокруг элемента | Значения в пикселях (20px), можно задавать одно, два, три или четыре значения для разных сторон |
margin-top |
Внешний отступ сверху | Значения в единицах длины, например 30px |
padding |
Внутренний отступ между границей и содержимым | Аналогично margin: 10px, 20px 30px и так далее |
border |
Рамка вокруг элемента (ширина, стиль, цвет) | Например: 1px solid #ccc, 0 для отсутствия рамки |
border-radius |
Скругление углов рамки | Значения в пикселях (10px), процентах, можно задавать разные значения для разных углов |
width |
Ширина элемента | Фиксированные значения (260px), процент от родителя (50%) |
max-width |
Максимальная ширина элемента | Значения в пикселях (900px) или процентах; ограничивает ширину при растяжении |
display |
Тип отображения элемента | block, inline, inline-block, flex и другие |
text-align |
Выравнивание текста по горизонтали | left, right, center, justify |
text-decoration |
Оформление текста (подчеркивание и т. п.) | none, underline, line-through |
list-style |
Оформление маркеров списков | none (без маркеров), disc, circle, square и другие варианты |
box-shadow |
Тень вокруг элемента | Параметры смещения, размытия и цвета, например 0 2px 6px rgba(0, 0, 0, 0.15) |
gap |
Расстояние между элементами в контейнерах flex или grid | Значения в единицах длины (20px) |
flex-wrap |
Перенос flex-элементов на новую строку | nowrap (без переноса), wrap (c переносом), wrap-reverse |
cursor |
Вид указателя мыши при наведении | pointer (указатель ссылки или кнопки), default и другие |
transition |
Плавное изменение значений свойств | Указываются свойства, длительность и функция изменения, например 0.3s, background 0.2s |
transform |
Преобразование элемента (перемещение, масштабирование, поворот и т. п.) | Например translateY(-5px), scale(1.1) |
HTML-файл:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<header>
<h1>Learn CSS</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">Contacts</a></li>
</ul>
</nav>
</header>
<main>
<section class="cards_section">
<h2>Cards</h2>
<div class="cards_list">
<article>
<h3>Card 1</h3>
<p>This is example of the card</p>
<button class="btn">More...</button>
</article>
<article>
<h3>Card 2</h3>
<p>This is example of the card</p>
<button class="btn">More...</button>
</article>
<article class="special">
<h3>Card 3</h3>
<p>This is example of the card</p>
<button class="btn">More...</button>
</article>
<article>
<h3>Card 4</h3>
<p>This is example of the card</p>
<button class="btn">More...</button>
</article>
<article>
<h3>Card 5</h3>
<p>This is example of the card</p>
<button class="btn">More...</button>
</article>
</div>
</section>
</main>
<footer>
2005 (C) Example
</footer>
</body
</html>
CSS-файл:
/* === Основные стили для всей страницы === */
body {
/* Устанавливаем основной шрифт, который наследуют большинство текстовых элементов */
font-family: Arial, sans-serif;
/* Общий светло-серый фон документа */
background-color: #f2f2f2;
/* Убираем стандартный внешний отступ браузера вокруг страницы */
margin: 0;
}
/* === Верхняя часть страницы — шапка === */
header {
/* Тёмный фон всей шапки */
background-color: #333;
/* Белый цвет текста внутри шапки */
color: white;
/* Внутренние отступы, создающие пространство вокруг содержимого */
padding: 20px;
}
/* Стиль заголовка первого уровня внутри шапки */
header h1 {
/* Убираем стандартный внешний отступ,
чтобы заголовок не создал лишнего пространства сверху и снизу */
margin: 0;
/* Увеличенный размер шрифта для главного заголовка */
font-size: 32px;
}
/* Стилизация списка навигации внутри шапки */
header nav ul {
/* Убираем стандартные маркеры списка */
list-style: none;
/* Убираем внутренние отступы, которые браузер добавляет по умолчанию */
padding: 0;
/* Небольшой внешний отступ сверху, чтобы отделить меню от заголовка */
margin: 10px 0;
/* Используем flex-контейнер, чтобы разместить пункты меню в одну строку */
display: flex;
/* Задаём расстояние между пунктами меню */
gap: 20px;
}
/* Стилизация ссылок внутри пунктов меню навигации */
header nav li a {
/* Белый цвет текста ссылок для контраста с тёмным фоном */
color: white;
/* Убираем подчеркивание, чтобы ссылки выглядели аккуратно */
text-decoration: none;
/* Нужное свойство называется font-weight — здесь допущена опечатка,
поэтому правило не сработает. Следует использовать font-weight: bold; */
text-weight: bold; /* ← ошибка, свойство не существует */
}
/* Внешний вид ссылок меню при наведении */
header nav li a:hover {
/* Подчеркивание помогает пользователю понять, что ссылка активна */
text-decoration: underline;
}
/* === Основная секция с карточками === */
section.cards_section {
/* Максимальная ширина блока, чтобы текст не растягивался на широком экране */
max-width: 946px;
/* Центрирование секции на странице за счёт автоматических отступов */
margin: 30px auto;
/* Небольшие боковые отступы, чтобы контент не прилипал к краю окна */
padding: 0 20px;
}
/* Контейнер с карточками */
.cards_list {
/* Размещаем карточки в строку */
display: flex;
/* Расстояние между карточками */
gap: 20px;
/* Разрешаем перенос строк, если ширины недостаточно */
flex-wrap: wrap;
}
/* Общие стили для каждой карточки */
.cards_list article {
/* Белый фон карточки */
background-color: white;
/* Внутренние отступы внутри карточки */
padding: 20px;
/* Скругление углов */
border-radius: 10px;
/* Фиксированная ширина карточки */
width: 260px;
/* Лёгкая тень, создающая эффект «приподнятости» */
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
/* У карточки есть рамка, но она прозрачная.
Это помогает плавно менять цвет рамки при наведении */
border: 1px solid transparent;
/* Плавные переходы при изменении свойств (например, подъём карточки) */
transition: 0.3s;
}
/* Карточка с дополнительным классом .special */
article.special {
/* Светлый фон отличного оттенка,
чтобы выделить карточку среди остальных */
background-color: #fff7e6;
/* Здесь допущена опечатка: border-colr → border-color.
Из-за этого свойство не применится */
border-colr: #fffcc66; /* ← ошибка, браузер проигнорирует */
}
/* Стили карточки при наведении курсора */
.cards_list article:hover {
/* Карточка немного поднимается вверх */
transform: translateY(-5px);
/* Цвет рамки становится более заметным */
border-color: #ddd;
}
/* === Стили кнопки внутри карточек === */
.btn {
/* Делаем кнопку встроенно-блочным элементом,
чтобы можно было задавать ширину и отступы */
display: inline-block;
/* Внутренние отступы — вертикальные и горизонтальные */
padding: 10px 18px;
/* Тёмный фон кнопки */
background-color: #333;
/* Белый цвет текста */
color: white;
/* Убираем стандартную рамку кнопки */
border: none;
/* Скругляем углы кнопки */
border-radius: 6px;
/* Курсор-указатель сообщает, что по кнопке можно кликнуть */
cursor: pointer;
/* Отступ сверху, чтобы кнопка не прилегала к тексту */
margin-top: 10px;
/* Плавное изменение фона при наведении */
transition: background 0.2s;
}
/* Кнопка при наведении */
.btn:hover {
/* Светлее на оттенок, что создаёт простой эффект взаимодействия */
background-color: #555;
}
/* === Нижняя часть страницы — футер === */
footer {
/* Выравнивание текста по центру */
text-align: center;
/* Внутренние отступы для создания пространства */
padding: 15px;
/* Отступ сверху, чтобы отделить футер от контента */
margin-top: 30px;
/* Тёмный фон футера */
background-color: #333;
/* Белый цвет текста */
color: white;
/* Уменьшенный размер шрифта для служебной информации */
font-size: 10px;
}