Обновить 90 Library/Programming/Web/Основы, селекторы и блочная модель.md

2026-06-03 15:12:46 +00:00
parent 50cb20762d
commit a473fd83c3
1 changed files with 0 additions and 0 deletions
@@ -0,0 +1,92 @@
+---
+status: seed
+type: concept
+tags:
+- css
+- web-development
+- selectors
+- box-model
+created: 2026-05-30
+updated: 2026-05-31
+source:
+- '[[11-css-основы_селекторы.pdf]]'
+- '[[12-css-базовые_свойства.pdf]]'
+- '[[12-css-блочная_модель.pdf]]'
+- '[[12-css-фон.pdf]]'
+aliases:
+- 'CSS: Основы и селекторы'
+---
+# 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;` (плавные переходы).