Dmitry
136 lines
5.5 KiB
Markdown
136 lines
5.5 KiB
Markdown
---
|
||
status: processing
|
||
type: concept
|
||
tags:
|
||
- css
|
||
- web-development
|
||
- selectors
|
||
- box-model
|
||
created: 2026-05-30
|
||
updated: 2026-06-08
|
||
source:
|
||
- "[[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)
|
||
![[Pasted image 20260608083946.png]]
|
||
```css
|
||
body .content { color: red; }
|
||
div p { color: blue; }
|
||
```
|
||
|
||
`body .content` сильнее, потому что содержит класс `.content`. Класс весит больше, чем селектор элемента.
|
||
|
||
Короткое правило:
|
||
|
||
- `#id` сильнее `.class`;
|
||
- `.class` сильнее `div`;
|
||
- если специфичность одинаковая, побеждает правило, которое написано ниже.
|
||
|
||
Наследование — это когда дочерний элемент получает значение свойства от родителя, например `font-family` или `color`. Не все свойства наследуются: `margin`, `padding`, `border`, `width` обычно не наследуются.
|
||
|
||
---
|
||
|
||
# Блочная модель (Box Model)
|
||
|
||
Каждый элемент в CSS — это прямоугольный блок.
|
||
|
||
- **Content:** Содержимое (текст, изображение).
|
||
- **Padding:** Внутренние поля (между контентом и рамкой).
|
||
- **Border:** Рамка.
|
||
- **Margin:** Внешние отступы (между рамкой и соседями).
|
||
|
||
## Box-sizing
|
||
- `content-box` (по умолчанию): `width` задает только ширину контента.
|
||
- `border-box`: `width` включает в себя `padding` и `border`.
|
||
|
||
Если задано:
|
||
|
||
```css
|
||
width: 100px;
|
||
padding: 10px;
|
||
border: 5px solid;
|
||
box-sizing: border-box;
|
||
```
|
||
|
||
Реальная ширина блока останется `100px`: внутрь этой ширины войдут контент, `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;`.
|
||
- `text-shadow: x y blur color;` — тень текста.
|
||
- `transition: 0.3s;` (плавные переходы).
|
||
|
||
## Простыми словами для экзамена
|
||
|
||
CSS выбирает элементы селекторами и применяет к ним свойства. Если несколько правил спорят за одно свойство, решают каскад, специфичность и порядок.
|
||
|
||
Частые селекторы:
|
||
|
||
- `*` — все элементы;
|
||
- `p` — все `<p>`;
|
||
- `.card` — элементы с классом `card`;
|
||
- `#main` — элемент с id `main`;
|
||
- `article p` — все `p` внутри `article`;
|
||
- `article > p` — только прямые дочерние `p`;
|
||
- `h2 + p` — первый соседний `p` сразу после `h2`;
|
||
- `input[required]` — поля с атрибутом `required`.
|
||
|
||
Для текста часто нужны: `font-family`, `font-size`, `font-weight`, `font-style`, `text-align`, `text-decoration`, `line-height`, `letter-spacing`, `text-shadow`.
|