vault backup: 2026-05-30 19:03:22

2026-05-30 19:03:22 +03:00
parent a54f2b19c3
commit 7a4f2ced46
16 changed files with 1986 additions and 19 deletions
@@ -0,0 +1,84 @@
+---
+status: seed
+type: concept
+tags: [css, web-development, selectors, box-model]
+created: 2026-05-30
+updated: 2026-05-30
+title: CSS: Основы, селекторы и блочная модель
+source: ["[[11-css-основы_селекторы.pdf]]", "[[12-css-базовые_свойства.pdf]]", "[[12-css-блочная_модель.pdf]]", "[[12-css-фон.pdf]]"]
+---
+
+# CSS: Основы и селекторы
+
+**CSS (Cascading Style Sheets)** — язык таблиц стилей для оформления HTML-документов.
+
+## Подключение CSS
+1. **Внешняя таблица:** `<link rel="stylesheet" href="style.css">`.
+2. **Внутренние стили:** Тег `<style>` в `<head>`.
+3. **Встроенные (inline) стили:** Атрибут `style` у тега.
+
+## Селекторы
+- **Универсальный:** `*` — все элементы.
+- **По тегу:** `h1`, `p`.
+- **По классу:** `.className`.
+- **По ID:** `#idName`.
+- **Потомки:** `div p` (все `p` внутри `div`).
+- **Дочерние:** `div > p` (только прямые наследники).
+- **Соседние:** `h1 + p` (первый `p` после `h1`).
+- **По атрибуту:** `a[href^="https://"]`.
+
+### Псевдоклассы и псевдоэлементы
+- `:hover`, `:focus`, `:active`.
+- `:nth-child(odd/even/n)`.
+- `::before`, `::after` (используются с `content`).
+
+## Каскадность и Специфичность
+Если правила конфликтуют, побеждает то, у которого выше специфичность:
+1. Inline стили (1, 0, 0, 0)
+2. ID (0, 1, 0, 0)
+3. Классы, атрибуты, псевдоклассы (0, 0, 1, 0)
+4. Теги и псевдоэлементы (0, 0, 0, 1)
+
+---
+
+# Блочная модель (Box Model)
+
+Каждый элемент в CSS — это прямоугольный блок.
+
+- **Content:** Содержимое (текст, изображение).
+- **Padding:** Внутренние поля (между контентом и рамкой).
+- **Border:** Рамка.
+- **Margin:** Внешние отступы (между рамкой и соседями).
+
+### box-sizing
+- `content-box` (по умолчанию): `width` задает только ширину контента.
+- `border-box`: `width` включает в себя `padding` и `border`.
+
+## Свойство display
+- `block`: Занимает всю ширину, начинается с новой строки.
+- `inline`: Ширина по контенту, не позволяет задавать `width/height`.
+- `inline-block`: Строчный элемент, но с возможностью задавать размеры и отступы.
+- `none`: Убирает элемент из документа.
+
+---
+
+# Базовые свойства оформления
+
+## Текст и шрифты
+- `font-family`, `font-size`, `font-weight`.
+- `text-align`, `text-transform` (`uppercase`, `capitalize`).
+- `text-decoration` (`underline`, `none`).
+- `line-height`, `letter-spacing`.
+
+## Фон (Background)
+- `background-color`.
+- `background-image: url(...)`.
+- `background-size: cover / contain`.
+- `background-repeat: no-repeat`.
+- `background-position: center`.
+
+## Границы и тени
+- `border: 1px solid black;`.
+- `border-radius: 5px;` (скругление углов).
+- `box-shadow: x y blur spread color;`.
+- `transition: 0.3s;` (плавные переходы).