93 lines
3.5 KiB
Markdown
93 lines
3.5 KiB
Markdown
---
|
||
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;` (плавные переходы).
|