Auto | arch-x1: 2026-06-05 13:24:09
This commit is contained in:
Dmitry
@@ -1,12 +1,12 @@
|
||||
---
|
||||
status: stable
|
||||
status: processing
|
||||
type: concept
|
||||
tags:
|
||||
- network
|
||||
- networking
|
||||
- nat
|
||||
created: 2025-12-17
|
||||
updated: 2026-05-07
|
||||
updated: 2026-06-05
|
||||
aliases:
|
||||
- NAT
|
||||
---
|
||||
@@ -91,5 +91,20 @@ PAT - это совершенно иная по сути работы систе
|
||||
|Повышение безопасности за счёт скрытия внутренней топологии|Сложности с туннелированием (IPsec и др.)|
|
||||
|Лёгкая смена публичной схемы адресации без перенастройки хостов|Нарушение работы сервисов, требующих входящих соединений или UDP|
|
||||
|
||||
## Простыми словами для экзамена
|
||||
|
||||
NAT нужен, чтобы частные адреса локальной сети могли ходить в интернет через один или несколько публичных адресов.
|
||||
|
||||
Домашний пример:
|
||||
|
||||
- ноутбук имеет `192.168.1.10`;
|
||||
- телефон имеет `192.168.1.11`;
|
||||
- роутер имеет публичный адрес провайдера;
|
||||
- сайты видят запросы как пришедшие от публичного адреса роутера.
|
||||
|
||||
PAT — самый частый вариант NAT. Он различает внутренние устройства по портам. Поэтому один публичный IP может обслуживать много внутренних клиентов одновременно.
|
||||
|
||||
Главная идея: IP меняется на границе сети, а таблица NAT запоминает, кому вернуть ответ.
|
||||
|
||||
## Связанные заметки
|
||||
- [[Terraform]] — NAT-шлюзы и пулы IP-адресов — типовые сетевые ресурсы, которые Terraform декларативно управляет в облачной инфраструктуре (VPC, subnets)
|
||||
- [[Terraform]] — NAT-шлюзы и пулы IP-адресов — типовые сетевые ресурсы, которые Terraform декларативно управляет в облачной инфраструктуре (VPC, subnets)
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
---
|
||||
title: OAuth 2.0
|
||||
status: seed
|
||||
status: processing
|
||||
type: concept
|
||||
tags: [web, security, oauth, authorization]
|
||||
created: 2026-06-04
|
||||
updated: 2026-06-04
|
||||
updated: 2026-06-05
|
||||
source: "[[00_базовые_понятия.pdf]]"
|
||||
aliases:
|
||||
- OAuth 2
|
||||
@@ -41,6 +41,20 @@ OAuth 2.0 — протокол авторизации, который позво
|
||||
|
||||
OAuth 2.0 — про авторизацию. Сам по себе он не обязан доказывать личность пользователя как протокол аутентификации; для входа поверх OAuth обычно используют OpenID Connect.
|
||||
|
||||
## Простыми словами для экзамена
|
||||
|
||||
OAuth 2.0 нужен, чтобы не отдавать пароль стороннему приложению.
|
||||
|
||||
Пример: сайт просит "войти через GitHub".
|
||||
|
||||
1. Сайт перенаправляет пользователя на GitHub.
|
||||
2. Пользователь подтверждает доступ на GitHub.
|
||||
3. GitHub возвращает сайту код авторизации.
|
||||
4. Сайт меняет код на access token.
|
||||
5. Сайт ходит в API GitHub с этим токеном.
|
||||
|
||||
Токен можно ограничить по сроку и правам (`scope`). Это безопаснее, чем дать приложению пароль от аккаунта.
|
||||
|
||||
## Связи
|
||||
|
||||
- [[Веб-аутентификация и авторизация]]
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
---
|
||||
title: Веб-аутентификация и авторизация
|
||||
status: seed
|
||||
status: processing
|
||||
type: concept
|
||||
tags: [web, security, authentication, authorization, oauth]
|
||||
created: 2026-06-04
|
||||
updated: 2026-06-04
|
||||
updated: 2026-06-05
|
||||
source: "[[00_базовые_понятия.pdf]]"
|
||||
aliases:
|
||||
- Идентификация, аутентификация и авторизация
|
||||
@@ -38,6 +38,22 @@ Authorization: Bearer eyJhbGciOi...
|
||||
|
||||
Bearer-токен даёт доступ тому, кто им владеет. Поэтому токены нужно хранить аккуратно, ограничивать срок их жизни и уметь отзывать.
|
||||
|
||||
## Простыми словами для экзамена
|
||||
|
||||
Три термина часто путают:
|
||||
|
||||
- идентификация — пользователь назвал себя: "я `ivan@example.com`";
|
||||
- аутентификация — система проверила доказательство: пароль, код, ключ;
|
||||
- авторизация — система решила, что этому пользователю можно: читать, создавать, удалять.
|
||||
|
||||
Пример:
|
||||
|
||||
1. Ввод логина — идентификация.
|
||||
2. Проверка пароля — аутентификация.
|
||||
3. Проверка роли `admin` перед удалением записи — авторизация.
|
||||
|
||||
HTTP сам по себе не помнит пользователя между запросами. Поэтому веб-приложения используют cookies, сессии или токены.
|
||||
|
||||
## Связи
|
||||
|
||||
- [[OAuth 2.0]]
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
---
|
||||
title: Подсети и маска подсети
|
||||
status: seed
|
||||
status: processing
|
||||
type: concept
|
||||
tags: [network, networking, subnet, ipv4]
|
||||
created: 2026-06-04
|
||||
updated: 2026-06-04
|
||||
updated: 2026-06-05
|
||||
source: "[[00_базовые_понятия.pdf]]"
|
||||
aliases:
|
||||
- Маска подсети
|
||||
@@ -58,6 +58,21 @@ Loopback-диапазон:
|
||||
|
||||
- `127.0.0.0/8`, чаще всего `127.0.0.1` как `localhost`.
|
||||
|
||||
## Простыми словами для экзамена
|
||||
|
||||
Подсеть — это часть большой сети. Маска говорит, какие биты IP-адреса считаются номером сети, а какие остаются под устройства.
|
||||
|
||||
Пример: `192.168.1.10/24`.
|
||||
|
||||
- `/24` означает: первые 24 бита — сеть.
|
||||
- Адрес сети: `192.168.1.0`.
|
||||
- Хостовая часть: последнее число.
|
||||
- Типичный диапазон устройств: `192.168.1.1` ... `192.168.1.254`.
|
||||
|
||||
Чем больше число после `/`, тем меньше подсеть. `/24` меньше, чем `/16`, потому что под хосты остаётся меньше бит.
|
||||
|
||||
На экзамене часто спрашивают не точный расчёт, а смысл: маска нужна, чтобы понять, находится ли адрес в той же локальной сети или пакет нужно отправлять через шлюз.
|
||||
|
||||
## Связи
|
||||
|
||||
- [[IP-адрес]]
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
---
|
||||
status: stable
|
||||
status: processing
|
||||
type: concept
|
||||
tags:
|
||||
- network
|
||||
@@ -7,7 +7,7 @@ tags:
|
||||
- protocols
|
||||
- dns
|
||||
created: 2025-12-17
|
||||
updated: 2026-05-07
|
||||
updated: 2026-06-05
|
||||
aliases:
|
||||
- DNS
|
||||
---
|
||||
@@ -46,4 +46,27 @@ DNS - Domain Name System Аналог: контактная книга в тел
|
||||
|
||||
1. Recursive (рекурсивный) - запрос IP-адреса по домену.
|
||||
2. Iterative (итеративный) - запрос IP-адреса, либо авторитативного DNS сервера.
|
||||
3. Inverse (обратный) - запрос доменного имени по IP-адресу.
|
||||
3. Inverse (обратный) - запрос доменного имени по IP-адресу.
|
||||
|
||||
## Простыми словами для экзамена
|
||||
|
||||
DNS превращает понятное человеку имя сайта в IP-адрес, понятный сети.
|
||||
|
||||
Упрощённая цепочка:
|
||||
|
||||
1. Браузер проверяет свой кэш.
|
||||
2. ОС проверяет локальные данные, например `hosts`.
|
||||
3. Resolver спрашивает DNS-серверы.
|
||||
4. Root-сервер подсказывает сервер зоны верхнего уровня.
|
||||
5. TLD-сервер подсказывает авторитативный сервер домена.
|
||||
6. Авторитативный сервер отдаёт нужную запись.
|
||||
|
||||
Частые записи:
|
||||
|
||||
- `A` — домен в IPv4.
|
||||
- `AAAA` — домен в IPv6.
|
||||
- `CNAME` — псевдоним на другое имя.
|
||||
- `MX` — почтовые серверы домена.
|
||||
- `TXT` — текстовые данные, часто для подтверждений и SPF/DKIM.
|
||||
|
||||
DNS не загружает сайт. Он только помогает найти адрес, куда потом пойдёт HTTP/HTTPS-запрос.
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
---
|
||||
title: HTTP, HTTPS и HTTP/3
|
||||
status: seed
|
||||
status: processing
|
||||
type: concept
|
||||
tags: [web, network, networking, protocols, http, https, http3]
|
||||
created: 2026-06-04
|
||||
updated: 2026-06-04
|
||||
updated: 2026-06-05
|
||||
source: "[[00_базовые_понятия.pdf]]"
|
||||
aliases:
|
||||
- HTTP, HTTPS и HTTP/3
|
||||
@@ -114,6 +114,38 @@ HTTP/3 работает поверх QUIC, а QUIC работает поверх
|
||||
|
||||
HTTP/3 не меняет смысл методов, заголовков и кодов ответа. Меняется транспортный слой.
|
||||
|
||||
## Простыми словами для экзамена
|
||||
|
||||
HTTP — это правила разговора браузера и сервера.
|
||||
|
||||
Запрос отвечает на вопрос: "что клиент хочет?". Ответ отвечает: "что сервер вернул?".
|
||||
|
||||
Пример GET:
|
||||
|
||||
```http
|
||||
GET /posts/?page=2 HTTP/1.1
|
||||
Host: example.com
|
||||
```
|
||||
|
||||
Пример POST:
|
||||
|
||||
```http
|
||||
POST /login/ HTTP/1.1
|
||||
Host: example.com
|
||||
Content-Type: application/x-www-form-urlencoded
|
||||
|
||||
username=ivan&password=secret
|
||||
```
|
||||
|
||||
Главное различие:
|
||||
|
||||
- `GET` обычно получает данные; параметры видны в URL.
|
||||
- `POST` обычно отправляет данные в теле запроса; подходит для форм, создания объектов, логина.
|
||||
|
||||
HTTPS — это не "другой HTTP", а HTTP внутри защищённого TLS-соединения. Порт HTTP — `80`, HTTPS — `443`.
|
||||
|
||||
HTTP/3 использует QUIC поверх UDP. Для экзамена достаточно помнить: HTTP/3 уменьшает задержки и проблему блокировки потоков при потере пакетов.
|
||||
|
||||
## Связи
|
||||
|
||||
- [[TCP vs UDP]]
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
---
|
||||
status: stable
|
||||
status: processing
|
||||
type: concept
|
||||
tags:
|
||||
- network
|
||||
- networking
|
||||
- protocols
|
||||
created: 2025-12-17
|
||||
updated: 2026-05-07
|
||||
updated: 2026-06-05
|
||||
aliases:
|
||||
- IP-адрес
|
||||
---
|
||||
@@ -21,4 +21,18 @@ IP-адрес - это просто набор из 32 нулей и едини
|
||||
|
||||
Статика - задается вручную и не меняется в ходе работы. Динамика - задается автоматически посредством DHCP-сервера из определенного ему пула IP.
|
||||
|
||||
Т.к. переход на IPv6 дорог, да и иметь всем конкретный IP не очень безопасно, придумали [[NAT]] (Network Address Translation) и его надстройку PAT (Port Address Translation). Суть в том, что много устройств могут выходить в сеть под "одним" белым (внешним) IP. Но есть нюанс, при маршрутизации трафика к белому IP добавляется порт, который уточняет, к какому именно устройству сети и с каким "внутренним" IP направить эти пакеты.
|
||||
Т.к. переход на IPv6 дорог, да и иметь всем конкретный IP не очень безопасно, придумали [[NAT]] (Network Address Translation) и его надстройку PAT (Port Address Translation). Суть в том, что много устройств могут выходить в сеть под "одним" белым (внешним) IP. Но есть нюанс, при маршрутизации трафика к белому IP добавляется порт, который уточняет, к какому именно устройству сети и с каким "внутренним" IP направить эти пакеты.
|
||||
|
||||
## Простыми словами для экзамена
|
||||
|
||||
IP-адрес отвечает на вопрос: "на какой узел сети нужно доставить пакет?". В вебе это похоже на адрес дома: домен `example.com` сначала через [[DNS]] превращается в IP-адрес, а затем по этому адресу устанавливается соединение.
|
||||
|
||||
IPv4 записывается как четыре числа от `0` до `255`, например `192.168.1.10`. Внутри это 32 бита. IPv6 длиннее: 128 бит, записывается шестнадцатеричными блоками, например `2001:db8::1`.
|
||||
|
||||
Важно различать:
|
||||
|
||||
- публичный IP — маршрутизируется в интернете;
|
||||
- приватный IP — используется внутри локальных сетей: `10.0.0.0/8`, `172.16.0.0/12`, `192.168.0.0/16`;
|
||||
- `127.0.0.1` или `localhost` — обращение к самому себе.
|
||||
|
||||
Один IP указывает устройство или интерфейс, но не конкретное приложение. За приложение отвечает [[Сетевые порты|порт]].
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
---
|
||||
title: URI, URL, URN
|
||||
status: seed
|
||||
status: processing
|
||||
type: concept
|
||||
tags: [web, network, networking, uri, url, urn]
|
||||
created: 2026-06-04
|
||||
updated: 2026-06-04
|
||||
updated: 2026-06-05
|
||||
source: "[[00_базовые_понятия.pdf]]"
|
||||
aliases:
|
||||
- URI, URL, URN
|
||||
@@ -68,6 +68,28 @@ URI (Uniform Resource Identifier) — общий идентификатор ре
|
||||
|
||||
Главное правило: все URL являются URI, но не все URI являются URL.
|
||||
|
||||
## Простыми словами для экзамена
|
||||
|
||||
Самая короткая схема:
|
||||
|
||||
- URI — любой идентификатор ресурса.
|
||||
- URL — URI, который говорит, где ресурс лежит и как его получить.
|
||||
- URN — URI, который даёт устойчивое имя, но не обязательно говорит, где ресурс скачать.
|
||||
|
||||
Пример URL:
|
||||
|
||||
```text
|
||||
https://example.com/articles/1?print=true#comments
|
||||
```
|
||||
|
||||
В нём:
|
||||
|
||||
- `https` — схема;
|
||||
- `example.com` — хост;
|
||||
- `/articles/1` — путь;
|
||||
- `?print=true` — параметры запроса;
|
||||
- `#comments` — фрагмент внутри страницы.
|
||||
|
||||
## Связи
|
||||
|
||||
- [[HTTP, HTTPS и HTTP3]]
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
---
|
||||
title: Сетевые порты
|
||||
status: seed
|
||||
status: processing
|
||||
type: concept
|
||||
tags: [network, networking, ports, tcp, udp, web]
|
||||
created: 2026-06-04
|
||||
updated: 2026-06-04
|
||||
updated: 2026-06-05
|
||||
source: "[[00_базовые_понятия.pdf]]"
|
||||
aliases:
|
||||
- Сетевые порты
|
||||
@@ -46,6 +46,23 @@ aliases:
|
||||
| `3389` | RDP |
|
||||
| `8080` | альтернативный HTTP |
|
||||
|
||||
## Простыми словами для экзамена
|
||||
|
||||
IP-адрес выбирает компьютер, порт выбирает программу на этом компьютере.
|
||||
|
||||
Пример: сервер имеет IP `203.0.113.10`.
|
||||
|
||||
- `203.0.113.10:80` — обычный HTTP.
|
||||
- `203.0.113.10:443` — HTTPS.
|
||||
- `203.0.113.10:22` — SSH.
|
||||
|
||||
Если в URL порт не указан, браузер берёт порт по схеме:
|
||||
|
||||
- `http://example.com` → порт `80`;
|
||||
- `https://example.com` → порт `443`.
|
||||
|
||||
Порт клиента обычно временный и выбирается автоматически. Порт сервера обычно известный и заранее открыт сервисом.
|
||||
|
||||
## Связи
|
||||
|
||||
- [[HTTP, HTTPS и HTTP3]]
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
---
|
||||
status: seed
|
||||
status: processing
|
||||
type: concept
|
||||
tags:
|
||||
- css
|
||||
@@ -8,7 +8,7 @@ tags:
|
||||
- adaptive-design
|
||||
- responsive-web
|
||||
created: 2026-05-30
|
||||
updated: 2026-05-31
|
||||
updated: 2026-06-05
|
||||
source:
|
||||
- '[[14-css-adaptive.pdf]]'
|
||||
- '[[17-css-grid.pdf]]'
|
||||
@@ -46,6 +46,13 @@ aliases:
|
||||
- `flex-basis` (базовый размер),
|
||||
- `order` (порядок отображения).
|
||||
|
||||
Главная ось зависит от `flex-direction`:
|
||||
|
||||
- `row` — главная ось горизонтальная;
|
||||
- `column` — главная ось вертикальная.
|
||||
|
||||
`justify-content` выравнивает по главной оси. `align-items` выравнивает по поперечной оси. Значение `align-items` по умолчанию — `stretch`.
|
||||
|
||||
---
|
||||
|
||||
# Grid Layout
|
||||
@@ -56,6 +63,8 @@ aliases:
|
||||
- `grid-template-columns: repeat(3, 1fr);` (3 колонки равной ширины).
|
||||
- `grid-template-rows: auto 1fr;`.
|
||||
- **Единица fr:** Доля свободного пространства.
|
||||
- **Функция `repeat`:** сокращает повторяющиеся колонки или строки.
|
||||
- **Функция `minmax`:** задаёт минимальный и максимальный размер трека.
|
||||
- **Отступы:** `gap: 10px;`.
|
||||
- **Размещение элементов:**
|
||||
- `grid-column: 1 / 3;` (от 1-й до 3-й линии).
|
||||
@@ -76,3 +85,42 @@ header { grid-area: header; }
|
||||
# Сравнение Flex и Grid
|
||||
- **Flexbox:** Лучше для одномерных структур (меню, тулбары) и распределения пространства между элементами.
|
||||
- **Grid:** Лучше для сложных макетов всей страницы, перекрытия элементов и точного контроля над строками и столбцами одновременно.
|
||||
|
||||
## Простыми словами для экзамена
|
||||
|
||||
Flexbox — раскладка в одном направлении: строка или колонка. Grid — раскладка сразу по двум направлениям: строки и столбцы.
|
||||
|
||||
Flex-контейнер создаётся так:
|
||||
|
||||
```css
|
||||
.menu {
|
||||
display: flex;
|
||||
}
|
||||
```
|
||||
|
||||
Строчный flex-контейнер:
|
||||
|
||||
```css
|
||||
.menu {
|
||||
display: inline-flex;
|
||||
}
|
||||
```
|
||||
|
||||
Grid-контейнер:
|
||||
|
||||
```css
|
||||
.layout {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
grid-template-rows: auto minmax(200px, 1fr);
|
||||
}
|
||||
```
|
||||
|
||||
Термины Grid:
|
||||
|
||||
- grid lines — линии сетки;
|
||||
- grid tracks — строки или столбцы между линиями;
|
||||
- grid cells — ячейки;
|
||||
- grid areas — именованные области.
|
||||
|
||||
`fr` делит свободное место. `1fr 2fr` означает: второй столбец получит в два раза больше свободного места, чем первый.
|
||||
|
||||
@@ -8,7 +8,7 @@ tags:
|
||||
- tables
|
||||
- forms
|
||||
created: 2026-05-30
|
||||
updated: 2026-05-30
|
||||
updated: 2026-06-05
|
||||
title: "Основы HTML (структура, таблицы, формы)"
|
||||
source:
|
||||
- '[[10-html_основы_НП.pdf]]'
|
||||
@@ -273,3 +273,42 @@ HTML-валидация работает в браузере до отправк
|
||||
<button type="submit">Зарегистрироваться</button>
|
||||
</form>
|
||||
```
|
||||
|
||||
## Простыми словами для экзамена
|
||||
|
||||
### Документ и `head`
|
||||
|
||||
`<head>` хранит служебную информацию, а не видимый контент. Там обычно находятся:
|
||||
|
||||
- `<meta charset="UTF-8">`;
|
||||
- `<meta name="viewport" content="width=device-width, initial-scale=1.0">`;
|
||||
- `<title>`;
|
||||
- `<link rel="stylesheet" href="...">`;
|
||||
- `<script src="..."></script>`.
|
||||
|
||||
`viewport` особенно важен для мобильных устройств: без него страница может отображаться как уменьшенная десктопная версия.
|
||||
|
||||
### Нормальный поток
|
||||
|
||||
Нормальный поток — это стандартный порядок раскладки элементов без `position`, `flex`, `grid` и других специальных режимов. Блочные элементы идут сверху вниз, строчные элементы идут внутри строки слева направо.
|
||||
|
||||
### Пробелы и переносы
|
||||
|
||||
В обычном HTML несколько пробелов подряд схлопываются в один. Перенос строки в коде тоже обычно становится пробелом. Для явного переноса используют `<br>`, но абзацы лучше разделять через `<p>`.
|
||||
|
||||
### Формы
|
||||
|
||||
`id` нужен для связи с `label` и для уникального обращения к элементу. `name` нужен серверу: именно под этим именем значение поля уходит в запросе.
|
||||
|
||||
```html
|
||||
<label for="email">Email</label>
|
||||
<input id="email" name="email" type="email" required>
|
||||
```
|
||||
|
||||
`radio` выбирает один вариант из группы с одинаковым `name`. `checkbox` подходит для независимых флажков, где можно выбрать несколько вариантов.
|
||||
|
||||
У `<button>` лучше явно указывать `type`:
|
||||
|
||||
- `type="submit"` — отправляет форму;
|
||||
- `type="button"` — обычная кнопка;
|
||||
- `type="reset"` — сбрасывает форму.
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
---
|
||||
status: seed
|
||||
status: processing
|
||||
type: concept
|
||||
tags:
|
||||
- css
|
||||
@@ -7,7 +7,7 @@ tags:
|
||||
- selectors
|
||||
- box-model
|
||||
created: 2026-05-30
|
||||
updated: 2026-05-31
|
||||
updated: 2026-06-05
|
||||
source:
|
||||
- "[[12-css-базовые_свойства.pdf]]"
|
||||
- "[[12-css-блочная_модель.pdf]]"
|
||||
@@ -46,6 +46,23 @@ aliases:
|
||||
3. Классы, атрибуты, псевдоклассы (0, 0, 1, 0)
|
||||
4. Теги и псевдоэлементы (0, 0, 0, 1)
|
||||
|
||||
Пример:
|
||||
|
||||
```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)
|
||||
@@ -61,6 +78,17 @@ aliases:
|
||||
- `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`.
|
||||
@@ -88,4 +116,22 @@ aliases:
|
||||
- `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`.
|
||||
|
||||
Reference in New Issue
Block a user