Auto | arch-x1: 2026-06-05 13:24:09
This commit is contained in:
Dmitry
@@ -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