Что такое CSS?
CSS (Cascading Style Sheets) — это язык стилей, который используется для управления внешним видом и дизайном веб-страниц. Если HTML создаёт структуру веб-сайта, то CSS формирует его внешний вид: задаёт цвета, шрифты, размеры, расположение элементов и так далее. Без CSS HTML-страницы выглядели бы простыми и нестилизованными.
Проще говоря: если HTML — это стены и комнаты дома, то CSS — его краска, мебель и украшения. А JavaScript — это «электрика», которая включает свет и открывает двери.
CSS предложил в 1994 году Хокон Виум Ли (Håkon Wium Lie), а первый официальный стандарт — CSS1 — был принят в 1996 году.
Для чего нужен CSS?
🎨 Задание цветов, фонов и границ
🔠 Управление шрифтами, их размерами и стилями
📏 Настройка размеров элементов, их расположения, внешних (margin) и внутренних (padding) отступов
📱 Создание адаптивного дизайна (responsive design) для различных устройств
⚙️ Добавление анимаций и переходов
📐 Создание структуры страницы (layout) — с помощью Flexbox и Grid
🔹 Основные понятия
- Селектор (selector) — указывает, к какому HTML-элементу применяется стиль. Например: p, .btn, #header.
- Свойство (property) — стилевая характеристика, применяемая к элементу. Например: color, font-size, background-color.
- Значение (value) — конкретный параметр, назначенный свойству. Например: color: red;, font-size: 16px;.
- Media queries — позволяют задавать разные стили для разных размеров экрана.
Полное CSS-правило выглядит так:
css
.btn {
background-color: #FF8C00;
color: white;
font-size: 16px;
}
Здесь .btn — селектор, background-color — свойство, а #FF8C00 — значение. На сайтах цвета часто записываются именно так — в формате HEX: #FF8C00 — это оранжевый цвет.
Пример media query — при ширине экрана меньше 768 пикселей шрифт становится меньше:
css
@media (max-width: 768px) {
body {
font-size: 14px;
}
}
Что означает «Cascading»?
Слово «Cascading» («каскадные») в названии обозначает главный принцип CSS. К одному элементу одновременно могут применяться несколько правил. В таких случаях браузер по определённым правилам решает, какой стиль победит. Упрощённо:
- более конкретный селектор сильнее общего: #id > .class > p;
- из одинаковых по силе правил побеждает то, что написано позже.
Три способа подключения CSS
1. Inline CSS — прямо в атрибуте style HTML-элемента:
html
<h1 style="color: blue;">Заголовок</h1>
2. Internal CSS — внутри HTML-документа, с помощью тега <style>:
html
<style>
p { color: green; }
</style>
3. External CSS — в отдельном файле .css, который подключается к HTML:
html
<link rel="stylesheet" href="style.css">
В больших проектах чаще всего используется третий способ: один CSS-файл управляет внешним видом всего сайта, и для изменения дизайна достаточно поправить его в одном месте.
Как работает CSS?
При загрузке страницы браузер сначала читает HTML и строит его структуру — DOM. Затем он читает правила CSS и по селекторам применяет к каждому элементу нужные стили. В результате на экране появляется красочная, аккуратная страница.
Как выглядит веб-сайт без CSS?
Только текст и изображения, идущие друг за другом, — без какого-либо дизайна. С помощью CSS сайты становятся привлекательными, удобными и современными.
Часто задаваемые вопросы
Является ли CSS языком программирования? Нет. CSS — это язык стилей: в нём нет циклов, условий и алгоритмов, как в языках программирования. Но для каждого, кто хочет создавать веб-сайты, это одна из основных технологий, которую нужно изучать вместе с HTML и JavaScript.
Хотите применить эти знания на практике и получить реальные результаты? Начните обучение на курсе «IT и Компьютерная инженерия» и шаг за шагом приобретайте практические навыки. Подробнее о курсе — перейдите по ссылке: Курс «IT и Компьютерная инженерия».