CSS (Cascading Style Sheets) - это язык стилей, определяющий внешний вид HTML-документов. Рассмотрим основные принципы работы с CSS для оформления веб-страниц.
Содержание
Способы подключения CSS
| Метод | Синтаксис | Применение |
| Встроенные стили | style="свойство: значение" | Для единичных элементов |
| Внутренняя таблица | <style> внутри head | Для отдельных страниц |
| Внешний файл | <link rel="stylesheet" href="style.css"> | Для всего сайта |
Основные CSS-селекторы
Базовые селекторы
- Селектор элемента (div, p, h1)
- Селектор класса (.class-name)
- Селектор идентификатора (#id-name)
- Универсальный селектор (*)
Комбинированные селекторы
- Вложенность (div p)
- Дочерние элементы (ul > li)
- Соседние элементы (h1 + p)
- Группировка (h1, h2, h3)
Основные CSS-свойства
| Категория | Свойства | Пример |
| Текст | color, font-size, text-align | color: #333; |
| Блоки | width, height, margin, padding | margin: 10px; |
| Позиционирование | position, display, float | position: relative; |
Практические примеры
Стилизация кнопки
- background-color: #4CAF50;
- border: none;
- color: white;
- padding: 15px 32px;
- text-align: center;
Создание сетки
- display: flex;
- flex-wrap: wrap;
- justify-content: space-between;
- align-items: center;
Рекомендации по написанию CSS
Используйте осмысленные имена классов. Группируйте связанные стили. Комментируйте сложные участки. Придерживайтесь единого стиля написания. Минимизируйте использование !important.
