update html css
This commit is contained in:
@@ -2,4 +2,50 @@
|
||||
sidebar_position: 1
|
||||
---
|
||||
|
||||
# Position
|
||||
# Position
|
||||
Источник: DeepSeek
|
||||
|
||||
Свойство position в CSS используется для определения способа позиционирования элемента на веб-странице. Оно позволяет управлять расположением элемента относительно его обычного положения в потоке документа или относительно других элементов.
|
||||
|
||||
Основные значения свойства position:
|
||||
|
||||
## Static
|
||||
- Элемент позиционируется в соответствии с нормальным потоком документа.
|
||||
- Свойства `top`, `right`, `bottom`, `left` и `z-index` не применяются.
|
||||
- Это значение используется по умолчанию для всех элементов.
|
||||
|
||||
## Relative
|
||||
- Свойство - по умолчанию
|
||||
- Элемент позиционируется относительно своего нормального положения.
|
||||
- Можно использовать свойства `top`, `right`, `bottom`, `left` для смещения элемента относительно его исходного положения.
|
||||
- Остальные элементы на странице не изменяют своего положения, как если бы элемент оставался на своем месте.
|
||||
|
||||
## Absolute
|
||||
- Элемент удаляется из нормального потока документа и позиционируется относительно ближайшего предка с позиционированием, отличным от `static` (например, `relative`, `absolute`, `fixed` или `sticky`).
|
||||
- Если такого предка нет, элемент позиционируется относительно `<body>`.
|
||||
- Можно использовать `top`, `right`, `bottom`, `left` для точного позиционирования.
|
||||
|
||||
## Fixed
|
||||
- Элемент фиксируется относительно окна браузера и не перемещается при прокрутке страницы.
|
||||
- Позиционируется относительно *viewport* (области просмотра).
|
||||
- Часто используется для создания фиксированных навигационных панелей или кнопок.
|
||||
|
||||
## Sticky
|
||||
- Элемент ведет себя как `relative`, пока не достигнет определенной точки прокрутки, после чего фиксируется на месте, как `fixed`.
|
||||
- Полезно для создания "липких" заголовков или меню, которые остаются видимыми при прокрутке.
|
||||
|
||||
## Дополнительные свойства для позиционирования:
|
||||
- `top`, `right`, `bottom`, `left`:
|
||||
- Эти свойства используются для точного позиционирования элемента относительно его контейнера или *viewport*.
|
||||
- Работают только с элементами, у которых `position` установлен в `relative`, `absolute`, `fixed` или `sticky`.
|
||||
- `z-index`:
|
||||
- Управляет порядком наложения элементов друг на друга (глубиной).
|
||||
- Работает только с элементами, у которых `position` не `static`.
|
||||
- Чем выше значение `z-index`, тем выше элемент находится в стеке.
|
||||
|
||||
## Важные моменты:
|
||||
- Элементы с `position: absolute` или `fixed` не влияют на расположение других элементов в потоке документа.
|
||||
- `z-index` работает только для элементов с позиционированием, отличным от `static`.
|
||||
- `sticky` работает только если у родительского элемента есть высота, иначе поведение может быть непредсказуемым.
|
||||
|
||||
Использование свойства `position` позволяет гибко управлять расположением элементов на странице, создавая сложные макеты и интерактивные интерфейсы.
|
||||
@@ -2,4 +2,45 @@
|
||||
sidebar_position: 2
|
||||
---
|
||||
|
||||
# Сетка flexbox, grid
|
||||
# Сетка flexbox, grid
|
||||
Источник: DeepSeek
|
||||
|
||||
## Flexbox
|
||||
Flexbox (Flexible Box Layout) — это мощная модульная система CSS, предназначенная для создания гибких и адаптивных макетов. Она позволяет легко выравнивать элементы, распределять пространство и управлять их поведением в контейнере, даже если размеры элементов неизвестны или динамически изменяются.
|
||||
|
||||
#### Основные концепции Flexbox
|
||||
|
||||
Flexbox работает с двумя основными сущностями:
|
||||
1. **Flex Container** (контейнер) — элемент, который содержит дочерние элементы (flex items). Чтобы сделать элемент flex-контейнером, нужно задать ему свойство `display: flex` или `display: inline-flex`.
|
||||
2. **Flex Items** (элементы) — дочерние элементы внутри flex-контейнера.
|
||||
|
||||
#### Преимущества Flexbox:
|
||||
- Простое создание адаптивных макетов.
|
||||
- Легкое выравнивание элементов по горизонтали и вертикали.
|
||||
- Гибкость в управлении размерами и порядком элементов.
|
||||
|
||||
#### Когда использовать Flexbox:
|
||||
- Для создания одномерных макетов (например, навигационные панели, карточки, списки).
|
||||
- Когда нужно выравнивать элементы внутри контейнера.
|
||||
- Для создания адаптивных интерфейсов.
|
||||
|
||||
## Grid
|
||||
**CSS Grid Layout** (или просто **Grid**) — это мощная система для создания двумерных макетов в CSS. В отличие от Flexbox, который работает с одномерными макетами (либо строка, либо столбец), Grid позволяет управлять как строками, так и столбцами одновременно. Это делает Grid идеальным инструментом для создания сложных, адаптивных сеток.
|
||||
|
||||
#### Основные концепции Grid
|
||||
1. **Grid Container** (контейнер) — элемент, который содержит дочерние элементы (grid items). Чтобы сделать элемент grid-контейнером, нужно задать ему свойство `display: grid` или `display: inline-grid`.
|
||||
2. **Grid Items** (элементы) — дочерние элементы внутри grid-контейнера.
|
||||
3. **Grid Lines** (линии) — линии, которые разделяют строки и столбцы. Они могут быть пронумерованы или названы.
|
||||
4. **Grid Tracks** (дорожки) — пространство между двумя соседними линиями (строки или столбцы).
|
||||
5. **Grid Cells** (ячейки) — пересечение строки и столбца (минимальная единица сетки).
|
||||
6. **Grid Areas** (области) — прямоугольные области, состоящие из одной или нескольких ячеек.
|
||||
|
||||
#### Преимущества Grid:
|
||||
- Полный контроль над строками и столбцами.
|
||||
- Простое создание сложных макетов.
|
||||
- Гибкость в управлении размерами и расположением элементов.
|
||||
|
||||
#### Когда использовать Grid:
|
||||
- Для создания двумерных макетов (например, страницы с боковой панелью, заголовком и футером).
|
||||
- Когда нужно точно контролировать расположение элементов.
|
||||
- Для создания адаптивных интерфейсов с минимальным количеством медиазапросов.
|
||||
@@ -2,4 +2,65 @@
|
||||
sidebar_position: 3
|
||||
---
|
||||
|
||||
# Семантические тэги
|
||||
# Семантические тэги
|
||||
|
||||
Источник: DeepSeek
|
||||
|
||||
Семантические теги HTML — это теги, которые четко описывают их содержимое и предназначение, делая код более понятным как для разработчиков, так и для поисковых систем. Они помогают улучшить структуру документа, упростить его чтение и повысить доступность для людей с ограниченными возможностями.
|
||||
|
||||
Основные семантические теги
|
||||
|
||||
1. `<header>`
|
||||
- Используется для шапки сайта или раздела.
|
||||
- Обычно содержит логотип, навигацию или заголовок.
|
||||
2. `<nav>`
|
||||
- Предназначен для навигационных ссылок.
|
||||
- Может использоваться в `<header>`, `<footer>` или самостоятельно.
|
||||
3. `<main>`
|
||||
- Содержит основное содержимое страницы.
|
||||
- На странице должен быть только один `<main>`.
|
||||
4. `<article>`
|
||||
- Используется для независимого, самодостаточного контента, например, статьи, поста в блоге или новости.
|
||||
- Может содержать заголовки, текст, изображения и т.д.
|
||||
5. `<section>`
|
||||
- Определяет раздел документа, например, главу или часть страницы.
|
||||
- Обычно содержит заголовок и связанный контент.
|
||||
6. `<aside>`
|
||||
- Используется для дополнительного контента, который связан с основным, но не является его частью (например, боковая панель).
|
||||
7. `<footer>`
|
||||
- Предназначен для подвала сайта или раздела.
|
||||
- Обычно содержит информацию об авторских правах, контакты или ссылки.
|
||||
8. `<figure>` и `<figcaption>`
|
||||
- `<figure>` используется для группировки медиа (изображений, диаграмм, кода) с подписью.
|
||||
- `<figcaption>` — подпись к медиа.
|
||||
9. `<time>`
|
||||
- Используется для обозначения даты или времени.
|
||||
- Может включать атрибут datetime для машинного чтения.
|
||||
10. `<mark>`
|
||||
|
||||
- Выделяет текст, который должен быть выделен (например, результаты поиска).
|
||||
|
||||
11. `<details>` и `<summary>`
|
||||
|
||||
- `<details>` создает раскрывающийся блок.
|
||||
- `<summary>` — заголовок для этого блока.
|
||||
|
||||
12. `<address>`
|
||||
- Используется для контактной информации, обычно в `<footer>`.
|
||||
|
||||
## Преимущества семантических тегов:
|
||||
|
||||
1. Улучшение доступности:
|
||||
- Семантические теги помогают скринридерам и другим вспомогательным технологиям лучше понимать структуру страницы.
|
||||
2. SEO-оптимизация:
|
||||
- Поисковые системы лучше индексируют страницы с четкой структурой.
|
||||
3. Читаемость кода:
|
||||
- Код становится более понятным и поддерживаемым.
|
||||
4. Упрощение стилизации:
|
||||
- Семантические теги позволяют легко применять стили к определенным частям страницы.
|
||||
|
||||
## Когда использовать семантические теги:
|
||||
|
||||
- Для создания структурированных и понятных веб-страниц.
|
||||
- Для улучшения доступности и SEO.
|
||||
- Для упрощения работы с кодом в команде.
|
||||
|
||||
@@ -2,4 +2,59 @@
|
||||
sidebar_position: 4
|
||||
---
|
||||
|
||||
# Блочная модель
|
||||
# Блочная модель
|
||||
Источник: DeepSeek
|
||||
|
||||
**Блочная модель CSS** (или **Box Model**) — это фундаментальная концепция, которая описывает, как элементы HTML отображаются на веб-странице. Каждый элемент на странице рассматривается как прямоугольный блок, который состоит из нескольких частей: содержимого, отступов, границ и внешних отступов. Понимание блочной модели важно для управления размерами, расположением и отступами элементов.
|
||||
|
||||
## Компоненты блочной модели
|
||||
|
||||
1. **Содержимое (Content):**
|
||||
- Это внутренняя часть элемента, где отображается текст, изображения или другие элементы.
|
||||
- Размеры содержимого определяются свойствами `width` (ширина) и `height` (высота).
|
||||
2. **Внутренний отступ (Padding):**
|
||||
- Это пространство между содержимым и границей элемента.
|
||||
- Управляется свойствами `padding-top`, `padding-right`, `padding-bottom`, `padding-left` или сокращенным свойством `padding`.
|
||||
3. **Граница (Border):**
|
||||
- Это рамка вокруг элемента, которая находится между внутренним отступом и внешним отступом.
|
||||
- Управляется свойствами `border-width`, `border-style`, `border-color` или сокращенным свойством `border`.
|
||||
4. **Внешний отступ (Margin):**
|
||||
- Это пространство между границей элемента и соседними элементами.
|
||||
- Управляется свойствами `margin-top`, `margin-right`, `margin-bottom`, `margin-left` или сокращенным свойством `margin`.
|
||||
|
||||
## Схема блочной модели
|
||||
```
|
||||
+---------------------------+
|
||||
| Margin |
|
||||
| +---------------------+ |
|
||||
| | Border | |
|
||||
| | +--------------+ | |
|
||||
| | | Padding | | |
|
||||
| | | +--------+ | | |
|
||||
| | | | Content| | | |
|
||||
| | | +--------+ | | |
|
||||
| | +--------------+ | |
|
||||
| +---------------------+ |
|
||||
+---------------------------+
|
||||
```
|
||||
|
||||
|
||||
## Размеры элемента
|
||||
Общий размер элемента складывается из:
|
||||
- Ширина: `width` + `padding-left` + `padding-right` + `border-left` + `border-right`.
|
||||
- Высота: `height` + `padding-top` + `padding-bottom` + `border-top` + `border-bottom`.
|
||||
|
||||
## Свойство box-sizing
|
||||
По умолчанию размеры элемента (`width` и `height`) относятся только к содержимому. Это может быть неудобно, так как добавление отступов и границ увеличивает общий размер элемента. Чтобы изменить это поведение, используется свойство `box-sizing`.
|
||||
|
||||
1. `content-box` (по умолчанию):
|
||||
- Размеры элемента (`width` и `height`) относятся только к содержимому.
|
||||
- Отступы и границы добавляются к общему размеру.
|
||||
2. `border-box`:
|
||||
- Размеры элемента включают содержимое, отступы и границы.
|
||||
- Это упрощает расчеты и делает поведение более предсказуемым.
|
||||
|
||||
## Вывод:
|
||||
- Блочная модель CSS состоит из **содержимого**, **внутренних отступов**, **границ** и **внешних отступов**.
|
||||
- Свойство `box-sizing` позволяет управлять тем, как учитываются отступы и границы в размерах элемента.
|
||||
- Понимание блочной модели важно для создания точных и предсказуемых макетов.
|
||||
|
||||
@@ -2,4 +2,52 @@
|
||||
sidebar_position: 5
|
||||
---
|
||||
|
||||
# Селекторы, специфичность
|
||||
# Селекторы, специфичность
|
||||
Источник: DeepSeek
|
||||
|
||||
**Специфичность селекторов** в CSS — это механизм, который определяет, какие стили будут применены к элементу, если на него влияют несколько конфликтующих правил. Специфичность рассчитывается на основе типа селекторов, и чем выше специфичность, тем выше приоритет стиля.
|
||||
|
||||
## Как работает специфичность?
|
||||
Специфичность рассчитывается как числовое значение, состоящее из четырех частей: `a, b, c, d,` где:
|
||||
- `a` — стили, указанные в атрибуте `style` (инлайновые стили).
|
||||
- `b` — количество ID-селекторов.
|
||||
- `c` — количество классов, псевдоклассов и атрибутов.
|
||||
- `d` — количество элементов и псевдоэлементов.
|
||||
|
||||
Чем больше значение в каждой части, тем выше специфичность. Например:
|
||||
- Селектор `#id` имеет специфичность `0, 1, 0, 0`.
|
||||
- Селектор `.class` имеет специфичность `0, 0, 1, 0`.
|
||||
- Селектор `div` имеет специфичность `0, 0, 0, 1`.
|
||||
|
||||
## Правила расчета специфичности
|
||||
1. **Инлайновые стили** (в атрибуте `style`) имеют наивысшую специфичность: `1, 0, 0, 0`.
|
||||
2. **ID-селекторы** (`#id`) имеют специфичность: `0, 1, 0, 0`.
|
||||
3. **Классы, псевдоклассы и атрибуты** (`.class`, `:hover`, `[type="text"]`) имеют специфичность: `0, 0, 1, 0`.
|
||||
4. **Элементы и псевдоэлементы** (`div`, `::before`) имеют специфичность: `0, 0, 0, 1`.
|
||||
5. **Универсальный селектор** (`*`) и комбинаторы (например, `>`, `+`, `~`) не увеличивают специфичность.
|
||||
|
||||
## Приоритеты
|
||||
1. **Инлайновые стили** (`style="..."`) всегда имеют наивысший приоритет.
|
||||
2. **Селекторы с `!important`:**
|
||||
- Если к стилю добавлено !important, он переопределяет все остальные правила, независимо от специфичности.
|
||||
- Пример: `color: red !important;`.
|
||||
3. **Специфичность:**
|
||||
- Если нет `!important`, применяется правило с наибольшей специфичностью.
|
||||
4. **Порядок в коде:**
|
||||
- Если специфичность одинакова, применяется последнее объявленное правило.
|
||||
|
||||
## Как управлять специфичностью?
|
||||
1. **Избегайте избыточных селекторов:**
|
||||
- Используйте минимально необходимую специфичность.
|
||||
- Например, вместо div#content используйте #content.
|
||||
2. **Используйте классы:**
|
||||
- Классы имеют умеренную специфичность и легко переопределяются.
|
||||
3. **Осторожно с `!important`:**
|
||||
- Используйте !important только в крайних случаях, так как это усложняет поддержку кода.
|
||||
4. **Порядок объявления:**
|
||||
- Если специфичность одинакова, последнее объявленное правило имеет приоритет.
|
||||
|
||||
## Вывод
|
||||
- Специфичность определяет приоритет CSS-правил.
|
||||
- Инлайновые стили и !important имеют наивысший приоритет.
|
||||
- Используйте классы и избегайте избыточной специфичности для поддержания чистоты кода.
|
||||
@@ -2,4 +2,74 @@
|
||||
sidebar_position: 6
|
||||
---
|
||||
|
||||
# Препроцессоры
|
||||
# Препроцессоры
|
||||
Источник: DeepSeek
|
||||
|
||||
**Препроцессоры CSS** — это инструменты, которые расширяют возможности стандартного CSS, добавляя такие функции, как переменные, вложенность, миксины, функции и многое другое. Они позволяют писать более структурированный, поддерживаемый и удобный код, который затем компилируется в стандартный CSS. Если вы работаете над большим проектом, использование препроцессора может сэкономить время и усилия. Наиболее популярные препроцессоры: **Sass**, **Less** и **Stylus**.
|
||||
|
||||
## Зачем использовать препроцессоры?
|
||||
1. **Переменные:**
|
||||
- Позволяют хранить значения (например, цвета, размеры шрифтов) для повторного использования.
|
||||
- Упрощают поддержку и изменение стилей.
|
||||
2. **Вложенность:**
|
||||
- Позволяют вкладывать селекторы, что делает код более читаемым и структурированным.
|
||||
3. **Миксины (Mixins):**
|
||||
- Позволяют создавать переиспользуемые блоки кода с параметрами.
|
||||
4. **Функции:**
|
||||
- Позволяют выполнять вычисления и возвращать значения.
|
||||
5. **Импорт:**
|
||||
- Позволяют разбивать код на несколько файлов и подключать их в основной файл.
|
||||
6. **Наследование:**
|
||||
- Позволяют наследовать стили от одного селектора другому.
|
||||
7. **Операции:**
|
||||
- Позволяют выполнять математические операции с числами, цветами и другими значениями.
|
||||
|
||||
## Популярные препроцессоры
|
||||
|
||||
1. **Sass** (Syntactically Awesome Style Sheets)
|
||||
- Самый популярный препроцессор.
|
||||
- Поддерживает два синтаксиса:
|
||||
- **SCSS** (Sassy CSS) — синтаксис, похожий на стандартный CSS.
|
||||
- **Sass** — более лаконичный синтаксис без фигурных скобок и точек с запятой.
|
||||
- Возможности:
|
||||
- Переменные.
|
||||
- Вложенность.
|
||||
- Миксины.
|
||||
- Наследование.
|
||||
- Функции.
|
||||
- Логические операторы и циклы.
|
||||
2. **Less**
|
||||
- Похож на Sass, но использует синтаксис, более близкий к стандартному CSS.
|
||||
- Легко интегрируется с JavaScript.
|
||||
- Возможности:
|
||||
- Переменные.
|
||||
- Вложенность.
|
||||
- Миксины.
|
||||
- Функции.
|
||||
- Операции.
|
||||
3. **Stylus**
|
||||
- Более гибкий синтаксис, который позволяет писать код без фигурных скобок, точек с запятой и даже двоеточий.
|
||||
- Возможности:
|
||||
- Переменные.
|
||||
- Вложенность.
|
||||
- Миксины.
|
||||
- Функции.
|
||||
- Логические операторы и циклы.
|
||||
|
||||
## Преимущества препроцессоров
|
||||
1. **Удобство:**
|
||||
- Код становится более читаемым и структурированным.
|
||||
2. **Повторное использование:**
|
||||
- Переменные, миксины и функции позволяют избежать дублирования кода.
|
||||
3. **Поддержка:**
|
||||
- Упрощают поддержку и обновление стилей.
|
||||
4. **Расширяемость:**
|
||||
- Добавляют мощные функции, недоступные в стандартном CSS.
|
||||
|
||||
## Недостатки препроцессоров
|
||||
1. **Компиляция:**
|
||||
- Требуется дополнительный шаг компиляции.
|
||||
2. **Кривая обучения:**
|
||||
- Необходимо изучить новый синтаксис и возможности.
|
||||
3. **Сложность отладки:**
|
||||
- Скомпилированный CSS может быть сложнее отлаживать.
|
||||
@@ -2,4 +2,113 @@
|
||||
sidebar_position: 7
|
||||
---
|
||||
|
||||
# Единицы измерения в CSS
|
||||
# Единицы измерения в CSS
|
||||
Источник: DeepSeek
|
||||
|
||||
В CSS существует множество единиц измерения, которые используются для задания размеров, отступов, шрифтов и других свойств элементов. Эти единицы можно разделить на несколько категорий: **абсолютные**, **относительные** и **специальные**.
|
||||
|
||||
- **Абсолютные единицы** (например, `px`, `in`) используются для фиксированных размеров.
|
||||
- **Относительные единицы** (например, `em`, `rem`, `%`, `vw`, `vh`) помогают создавать адаптивные и гибкие макеты.
|
||||
- **Специальные единицы** (например, `deg`, `s`, `Hz`) используются для трансформаций, анимаций и других специфических задач.
|
||||
|
||||
## Абсолютные
|
||||
Абсолютные единицы фиксированы и не зависят от других параметров, таких как размер экрана или шрифта. Они используются реже, так как не всегда подходят для создания адаптивных макетов.
|
||||
|
||||
**Основные абсолютные единицы:**
|
||||
- `px` **(пиксели):**
|
||||
- Наиболее распространенная единица.
|
||||
- 1px соответствует одному пикселю на экране.
|
||||
- Пример: `width: 200px;`.
|
||||
- `in` **(дюймы):**
|
||||
- 1in = 2.54cm.
|
||||
- Используется редко, в основном для печати.
|
||||
- Пример: `width: 2in;`.
|
||||
- `cm` **(сантиметры):**
|
||||
- Используется для печати.
|
||||
- Пример: `width: 5cm;`.
|
||||
- `mm` **(миллиметры):**
|
||||
- Используется для печати.
|
||||
- Пример: `width: 50mm;`.
|
||||
- `pt` **(пункты):**
|
||||
- 1pt = 1/72 дюйма.
|
||||
- Часто используется для печати.
|
||||
- Пример: `font-size: 12pt;`.
|
||||
- `pc` **(пики):**
|
||||
- 1pc = 12pt.
|
||||
- Используется редко.
|
||||
- Пример: `font-size: 1.5pc;`.
|
||||
|
||||
## Относительные
|
||||
|
||||
Относительные единицы зависят от других параметров, таких как размер шрифта или размер родительского элемента. Они чаще используются для создания адаптивных и гибких макетов.
|
||||
|
||||
**Основные относительные единицы:**
|
||||
- `em`:
|
||||
- Зависит от размера шрифта текущего элемента.
|
||||
- 1em = текущий размер шрифта.
|
||||
- Если размер шрифта элемента равен 16px, то `2em = 32px`.
|
||||
- Пример: `font-size: 1.5em;`.
|
||||
- `rem` **(root em):**
|
||||
- Зависит от размера шрифта корневого элемента (`<html>`).
|
||||
- 1rem = размер шрифта корневого элемента (обычно 16px).
|
||||
- Пример: `font-size: 1.2rem;`.
|
||||
- `%` **(проценты):**
|
||||
- Зависит от размера родительского элемента.
|
||||
- Пример: `width: 50%;` (ширина элемента будет 50% от ширины родителя).
|
||||
- `vw` **(viewport width):**
|
||||
- 1vw = 1% ширины области просмотра (viewport).
|
||||
- Пример: `width: 50vw;` (ширина элемента будет 50% от ширины окна браузера).
|
||||
- `vh` **(viewport height):**
|
||||
- 1vh = 1% высоты области просмотра (viewport).
|
||||
- Пример: `height: 100vh;` (высота элемента будет равна высоте окна браузера).
|
||||
- `vmin`:
|
||||
- 1vmin = 1% от меньшего из размеров (ширины или высоты) области просмотра.
|
||||
- Пример: `font-size: 5vmin;`.
|
||||
- `vmax`:
|
||||
- 1vmax = 1% от большего из размеров (ширины или высоты) области просмотра.
|
||||
- Пример: `font-size: 5vmax;`.
|
||||
- `ch`:
|
||||
- Зависит от ширины символа "0" текущего шрифта.
|
||||
- Пример: `width: 20ch;` (ширина элемента будет равна ширине 20 символов "0").
|
||||
- `ex`:
|
||||
- Зависит от высоты символа "x" текущего шрифта.
|
||||
- Используется редко.
|
||||
- Пример: `font-size: 2ex;`.
|
||||
|
||||
## Специальные единицы измерения
|
||||
Эти единицы используются для специфических задач, таких как работа с цветами или углами.
|
||||
|
||||
- `deg` **(градусы):**
|
||||
- Используется для задания углов (например, в трансформациях).
|
||||
- Пример: `transform: rotate(45deg);`.
|
||||
- `rad` **(радианы):**
|
||||
- Используется для задания углов в радианах.
|
||||
- Пример: `transform: rotate(1rad);`.
|
||||
- `turn` **(обороты):**
|
||||
- 1turn = 360deg.
|
||||
- Пример: `transform: rotate(0.5turn);`.
|
||||
- `s` **(секунды)** и `ms` **(миллисекунды):**
|
||||
- Используются для задания времени (например, в анимациях).
|
||||
- Пример: `transition: all 0.5s;`.
|
||||
- `Hz` **(герцы)** и `kHz` **(килогерцы):**
|
||||
- Используются для задания частоты (например, в анимациях).
|
||||
- Пример: `animation: pulse 2Hz;`.
|
||||
|
||||
## Единицы для работы с цветами
|
||||
- `rgb()` и `rgba()`:
|
||||
- Задают цвет в формате RGB (Red, Green, Blue) с возможностью указания прозрачности.
|
||||
- Пример: `color: rgba(255, 0, 0, 0.5);`.
|
||||
- `hsl()` и `hsla()`:
|
||||
- Задают цвет в формате HSL (Hue, Saturation, Lightness) с возможностью указания прозрачности.
|
||||
- Пример: `background-color: hsla(120, 100%, 50%, 0.3);`.
|
||||
- **Шестнадцатеричные значения**:
|
||||
- Задают цвет в формате HEX.
|
||||
- Пример: `color: #ff0000;`.
|
||||
|
||||
### Когда какие единицы использовать?
|
||||
- `px`: Для фиксированных размеров (например, границы, тени).
|
||||
- `em` и `rem`: Для размеров шрифтов и отступов, чтобы обеспечить масштабируемость.
|
||||
- `%`: Для создания адаптивных макетов (например, ширина элемента).
|
||||
- `vw` и `vh`: Для создания полноэкранных блоков или адаптивных шрифтов.
|
||||
- `ch`: Для работы с текстом (например, ограничение ширины текстового поля).
|
||||
- `deg`, `rad`, `turn`: Для трансформаций и анимаций.
|
||||
|
||||
@@ -8,7 +8,7 @@ sidebar_position: 1
|
||||
|
||||
Генераторы могут порождать (yield) множество значений одно за другим, по мере необходимости. Генераторы отлично работают с перебираемыми объектами и позволяют легко создавать потоки данных.
|
||||
|
||||
- Генераторы создаются при помощи функций-генераторов function* f(…) \{…}.
|
||||
- Генераторы создаются при помощи функций-генераторов `function* f(…) {…}`.
|
||||
- Внутри генераторов и только внутри них существует оператор yield.
|
||||
- Внешний код и генератор обмениваются промежуточными результатами посредством вызовов next/yield.
|
||||
|
||||
@@ -18,11 +18,11 @@ sidebar_position: 1
|
||||
Источник: [https://learn.javascript.ru/generators](https://learn.javascript.ru/generators)
|
||||
Для объявления генератора используется специальная синтаксическая конструкция: function*, которая называется «функция-генератор».
|
||||
|
||||
Основным методом генератора является next(). При вызове он запускает выполнение кода до ближайшей инструкции yield <значение> (значение может отсутствовать, в этом случае оно предполагается равным undefined). По достижении yield выполнение функции приостанавливается, а соответствующее значение – возвращается во внешний код:
|
||||
Основным методом генератора является next(). При вызове он запускает выполнение кода до ближайшей инструкции `yield <значение>` (значение может отсутствовать, в этом случае оно предполагается равным undefined). По достижении yield выполнение функции приостанавливается, а соответствующее значение – возвращается во внешний код:
|
||||
|
||||
Результатом метода next() всегда является объект с двумя свойствами:
|
||||
- value: значение из yield.
|
||||
- done: true, если выполнение функции завершено, иначе false.
|
||||
- **value**: значение из `yield`.
|
||||
- **done**: `true`, если выполнение функции завершено, иначе `false`.
|
||||
```js
|
||||
function* generateSequence() {
|
||||
yield 1;
|
||||
@@ -42,8 +42,8 @@ alert(JSON.stringify(one)); // {value: 1, done: false}
|
||||
## Перебор генераторов
|
||||
Как вы, наверное, уже догадались по наличию метода next(), генераторы являются перебираемыми объектами.
|
||||
|
||||
Возвращаемые ими значения можно перебирать через for..of
|
||||
Это из-за того, что перебор через for..of игнорирует последнее значение, при котором done: true. Поэтому, если мы хотим, чтобы были все значения при переборе через for..of, то надо возвращать их через yield:
|
||||
Возвращаемые ими значения можно перебирать через `for..of`
|
||||
Это из-за того, что перебор через `for..of` игнорирует последнее значение, при котором `done: true`. Поэтому, если мы хотим, чтобы были все значения при переборе через `for..of`, то надо возвращать их через `yield`:
|
||||
```js
|
||||
function* generateSequence() {
|
||||
yield 1;
|
||||
|
||||
@@ -8,23 +8,27 @@ sidebar_position: 2
|
||||
|
||||
Обычные итераторы и генераторы прекрасно работают с данными, которые не требуют времени для их создания или получения.
|
||||
|
||||
Когда мы ожидаем, что данные будут поступать асинхронно, с задержками, можно использовать их асинхронные аналоги и for
|
||||
await..of вместоfor..of.
|
||||
Когда мы ожидаем, что данные будут поступать асинхронно, с задержками, можно использовать их асинхронные аналоги и
|
||||
`for await..of` вместо `for..of`.
|
||||
|
||||
Синтаксические различия между асинхронными и обычными итераторами:
|
||||
|
||||
| | Перебираемый объект | Асинхронно перебираемый |
|
||||
|-------------------------------|-----------------------------|-----------------------------------------------------------|
|
||||
| Метод для получения итератора | Symbol.iterator | Symbol.asyncIterator |
|
||||
| next() возвращает | {value:…, done: true/false} | промис, который завершается с {value:…, done: true/false} |
|
||||
| | Перебираемый объект | Асинхронно перебираемый |
|
||||
|-------------------------------|-------------------------------|-------------------------------------------------------------|
|
||||
| Метод для получения итератора | Symbol.iterator | Symbol.asyncIterator |
|
||||
| next() возвращает | `{value:…, done: true/false}` | промис, который завершается с `{value:…, done: true/false}` |
|
||||
|
||||
Синтаксические различия между асинхронными и обычными генераторами:
|
||||
|
||||
| | Генераторы | Асинхронные генераторы |
|
||||
|-----------------------------|-----------------------------|-----------------------------------------------------------|
|
||||
| Объявление | function* | async function* |
|
||||
| generator.next() возвращает | {value:…, done: true/false} | промис, который завершается с {value:…, done: true/false} |
|
||||
| | Генераторы | Асинхронные генераторы |
|
||||
|-----------------------------|-------------------------------|-------------------------------------------------------------|
|
||||
| Объявление | function* | async function* |
|
||||
| generator.next() возвращает | `{value:…, done: true/false}` | промис, который завершается с `{value:…, done: true/false}` |
|
||||
|
||||
В веб-разработке мы часто встречаемся с потоками данных, когда они поступают по частям. Например, загрузка или выгрузка большого файла.
|
||||
В веб-разработке мы часто встречаемся с потоками данных, когда они поступают по частям. Например, загрузка или выгрузка
|
||||
большого файла.
|
||||
|
||||
Мы можем использовать асинхронные генераторы для обработки таких данных. Также заметим, что в некоторых окружениях, например, браузерах, есть и другое API, называемое Streams (потоки), который предоставляет специальные интерфейсы для работы с такими потоками данных, их преобразования и передачи из одного потока в другой (например, загрузка из одного источника и сразу отправка в другое место).
|
||||
Мы можем использовать асинхронные генераторы для обработки таких данных. Также заметим, что в некоторых окружениях,
|
||||
например, браузерах, есть и другое API, называемое Streams (потоки), который предоставляет специальные интерфейсы для
|
||||
работы с такими потоками данных, их преобразования и передачи из одного потока в другой (например, загрузка из одного
|
||||
источника и сразу отправка в другое место).
|
||||
|
||||
@@ -10,20 +10,20 @@ sidebar_position: 2
|
||||
Вы можете проверить себя, читая их и вспоминая, что они означают:
|
||||
|
||||
- Перед объявлением класса/функции/…:
|
||||
- export [default] class/function/variable ...
|
||||
- export `[default]` class/function/variable ...
|
||||
- Отдельный экспорт:
|
||||
- export {x [as y], ...}.
|
||||
- export `{x [as y], ...}`.
|
||||
- Реэкспорт:
|
||||
- export {x [as y], ...} from "module"
|
||||
- export `{x [as y], ...}` from "module"
|
||||
- export * from "module" (не реэкспортирует export default).
|
||||
- export {default [as y]} from "module" (реэкспортирует только export default).
|
||||
- export `{default [as y]}` from "module" (реэкспортирует только export default).
|
||||
|
||||
Импорт:
|
||||
- Именованные экспорты из модуля:
|
||||
- import {x [as y], ...} from "module"
|
||||
- import `{x [as y], ...}` from "module"
|
||||
- Импорт по умолчанию:
|
||||
- import x from "module"
|
||||
- import {default as x} from "module"
|
||||
- import `{default as x}` from "module"
|
||||
- Всё сразу:
|
||||
- import * as obj from "module"
|
||||
- Только подключить модуль (его код запустится), но не присваивать его переменной:
|
||||
@@ -31,4 +31,4 @@ sidebar_position: 2
|
||||
|
||||
Мы можем поставить import/export в начало или в конец скрипта, это не имеет значения.
|
||||
|
||||
💥 **Обратите внимание, что инструкции import/export не работают внутри \{...}.**
|
||||
💥 **Обратите внимание, что инструкции import/export не работают внутри `{...}`.**
|
||||
|
||||
Reference in New Issue
Block a user