Базовый синтаксис CSS: селекторы, свойства и значения

Что такое CSS и зачем он нужен? 🎨

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

Без CSS веб-страницы выглядели бы как документы из 90-х: черно-белые, с синими ссылками и моноширинным шрифтом. Но мы ведь не в прошлом, правда?

Основная структура: селекторы, свойства и значения

Синтаксис CSS строится на трёх китах:

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

🔍 Селектор

Указывает, к какому элементу (или элементам) применяются стили.

h1 {
    color: red;
}

Здесь h1 — селектор, который выбирает все заголовки первого уровня.

Типы селекторов

1️⃣ Простые селекторы

Селектор	Пример	Описание
По тегу	`p`	Выбирает все элементы `<p>`
По классу	`.header`	Выбирает все элементы с `class="header"`
По ID	`#main`	Выбирает элемент с `id="main"` (уникальный!)

Пример:

.special {
    font-weight: bold;
    color: #ff5733;
}

💡 Совет от Данилы Бежина: Используйте классы чаще, чем ID — так код будет гибче.

2️⃣ Комбинированные селекторы

Можно комбинировать селекторы для более точного выбора:

div.box → Выбирает <div class="box">
ul li → Выбирает все <li> внутри <ul> (вложенность!)
button.primary → Выбирает кнопки с классом primary

nav a {
    text-decoration: none;
    color: darkblue;
}

Свойства и значения

Свойства определяют, что именно мы меняем (цвет, шрифт, отступы), а значения — как (красный, Arial, 20px).

🔥 Топ-5 базовых свойств

1. Цвет текста

p { color: #333; }

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

h2 { font-size: 24px; }

3. Фоновый цвет

body { background-color: #f4f4f4; }

4. Внешние отступы

.card { margin: 10px; }

5. Внутренние отступы

.container { padding: 20px; }

🌟 Запомните:
- margin — отступ снаружи элемента.
- padding — отступ внутри элемента.

Пример: стилизуем кнопку

Допустим, у нас есть HTML:

<button class="btn">Нажми меня</button>

CSS:

.btn {
    background-color: #4CAF50; /* Зелёный фон */
    color: white;             /* Белый текст */
    padding: 10px 20px;       /* Внутренние отступы */
    border: none;             /* Убираем границу */
    border-radius: 5px;       /* Закругляем углы */
    cursor: pointer;          /* Курсор-указатель */
}

.btn:hover {
    background-color: #45a049; /* Меняем цвет при наведении */
}

Что произошло?

.btn — стилизуем саму кнопку.
.btn:hover — добавляем эффект при наведении.

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

CSS работает по принципу каскада: если несколько правил применяются к одному элементу, браузер выбирает самое "сильное".

p { color: black; }       /* Правило 1 */
.special { color: red; }  /* Правило 2 */

Если у <p class="special"> будет красный текст, потому что класс "весит" больше, чем тег.

Итоги

✅ Селекторы — выбирают элементы (теги, классы, ID).
✅ Свойства — определяют, что менять (цвет, шрифт, отступы).
✅ Значения — задают конкретные параметры (red, 20px, bold).
✅ Каскадность — правила могут переопределять друг друга.

Теперь вы готовы превратить любой HTML в стильную веб-страницу! 🚀