vault backup: 2026-05-30 19:03:22

2026-05-30 19:03:22 +03:00
parent a54f2b19c3
commit 7a4f2ced46
16 changed files with 1986 additions and 19 deletions
@@ -0,0 +1,70 @@
+---
+status: seed
+type: concept
+tags: [css, flexbox, grid, adaptive-design, responsive-web]
+created: 2026-05-30
+updated: 2026-05-30
+title: CSS: Адаптивность, Flexbox и Grid
+source: ["[[14-css-adaptive.pdf]]", "[[17-css-grid.pdf]]", "[[18-css-flex.pdf]]"]
+---
+
+# Адаптивная верстка
+
+Адаптивность (AWD) и отзывчивость (RWD) позволяют сайту корректно отображаться на любых устройствах.
+
+## Медиазапросы (@media)
+Синтаксис:
+```css
+@media screen and (max-width: 768px) {
+    /* Стили для планшетов и телефонов */
+}
+```
+- **Mobile First:** Сначала стили для мобильных, затем `min-width`.
+- **Desktop First:** Сначала для десктопов, затем `max-width`.
+
+---
+
+# Flexbox (Flexible Box Layout)
+Одномерная модель раскладки (по одной оси).
+
+- **Контейнер:** `display: flex;` / `inline-flex;`.
+- **Направление:** `flex-direction: row | column | row-reverse`.
+- **Перенос:** `flex-wrap: wrap | nowrap`.
+- **Выравнивание по главной оси:** `justify-content: flex-start | center | space-between | space-around`.
+- **Выравнивание по поперечной оси:** `align-items: center | stretch`.
+- **Свойства элементов:** 
+    - `flex-grow` (коэффициент роста), 
+    - `flex-shrink` (сжатие), 
+    - `flex-basis` (базовый размер),
+    - `order` (порядок отображения).
+
+---
+
+# Grid Layout
+Двумерная модель раскладки (строки + столбцы).
+
+- **Контейнер:** `display: grid;`.
+- **Определение сетки:** 
+    - `grid-template-columns: repeat(3, 1fr);` (3 колонки равной ширины).
+    - `grid-template-rows: auto 1fr;`.
+- **Единица fr:** Доля свободного пространства.
+- **Отступы:** `gap: 10px;`.
+- **Размещение элементов:**
+    - `grid-column: 1 / 3;` (от 1-й до 3-й линии).
+    - `grid-row: 2 / span 2;` (со 2-й линии на 2 ячейки).
+- **Именованные области:**
+```css
+.container {
+    grid-template-areas: 
+        "header header"
+        "sidebar content"
+        "footer footer";
+}
+header { grid-area: header; }
+```
+
+---
+
+# Сравнение Flex и Grid
+- **Flexbox:** Лучше для одномерных структур (меню, тулбары) и распределения пространства между элементами.
+- **Grid:** Лучше для сложных макетов всей страницы, перекрытия элементов и точного контроля над строками и столбцами одновременно.
@@ -0,0 +1,84 @@
+---
+status: seed
+type: concept
+tags: [css, web-development, selectors, box-model]
+created: 2026-05-30
+updated: 2026-05-30
+title: CSS: Основы, селекторы и блочная модель
+source: ["[[11-css-основы_селекторы.pdf]]", "[[12-css-базовые_свойства.pdf]]", "[[12-css-блочная_модель.pdf]]", "[[12-css-фон.pdf]]"]
+---
+
+# 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;` (плавные переходы).
@@ -0,0 +1,59 @@
+---
+status: seed
+type: concept
+tags: [bootstrap, web-development, css-framework, grid-system]
+created: 2026-05-30
+updated: 2026-05-30
+title: Основы Bootstrap
+source: ["[[21-bootstrap-1.pdf]]"]
+---
+
+# Bootstrap 5
+
+**Bootstrap** — популярный HTML/CSS/JS фреймворк для быстрой разработки адаптивных интерфейсов.
+
+## Быстрый старт
+Для использования через CDN добавьте в `<head>`:
+```html
+<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.x/dist/css/bootstrap.min.css" rel="stylesheet">
+```
+И скрипты перед `</body>`:
+```html
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.x/dist/js/bootstrap.bundle.min.js"></script>
+```
+
+## Контрольные точки (Breakpoints)
+- **X-Small (`<576px`)**: по умолчанию.
+- **Small (`sm` ≥576px)**.
+- **Medium (`md` ≥768px)**.
+- **Large (`lg` ≥992px)**.
+- **Extra large (`xl` ≥1200px)**.
+- **Extra extra large (`xxl` ≥1400px)**.
+
+## Сетка (Grid System)
+Базируется на Flexbox и состоит из контейнеров, строк и колонок (12 колонок в ряду).
+
+```html
+<div class="container">
+  <div class="row">
+    <div class="col-12 col-md-8">Основной контент</div>
+    <div class="col-6 col-md-4">Сайдбар</div>
+  </div>
+</div>
+```
+- `.container`: фиксированная ширина (меняется на брейкпоинтах).
+- `.container-fluid`: всегда 100% ширины.
+- `.row`: обертка для колонок.
+- `.col-{breakpoint}-{size}`: настройка ширины колонки.
+
+## Основные классы-утилиты
+- **Отступы:** `m-3` (margin), `p-2` (padding), `mt-1` (margin-top).
+- **Цвета:** `text-primary`, `bg-dark`, `btn-success`.
+- **Типографика:** `h1`, `display-1`, `text-center`, `fw-bold`.
+- **Flexbox:** `d-flex`, `justify-content-between`, `align-items-center`.
+
+## Компоненты
+Bootstrap предоставляет готовые стили для:
+- Кнопок (`btn`), форм, навигационных панелей (`navbar`).
+- Карточек (`card`), алертов (`alert`), модальных окон.
+- Пагинации, списков, таблиц.
@@ -0,0 +1,111 @@
+---
+status: seed
+type: concept
+tags: [html, web-development, structure, tables, forms]
+created: 2026-05-30
+updated: 2026-05-30
+title: Основы HTML (структура, таблицы, формы)
+source: ["[[10-html_основы_НП.pdf]]", "[[13-html-таблицы.pdf]]", "[[15-html-формы-1.pdf]]"]
+---
+
+# Основы HTML
+
+**HTML (Hypertext Markup Language)** — язык разметки для структурирования и отображения веб-страниц. 
+
+## Структура HTML-документа
+Базовый шаблон (HTML5):
+```html
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Заголовок страницы</title>
+</head>
+<body>
+    <!-- Контент страницы -->
+</body>
+</html>
+```
+- `<!DOCTYPE html>` — объявление типа документа.
+- `<head>` — метаданные (не отображаются в браузере).
+- `<body>` — основное содержимое.
+
+### Метатег Viewport
+Критичен для мобильных устройств. Позволяет контролировать масштаб.
+```html
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+```
+
+## Основные теги и семантика
+HTML5 вводит семантические теги для улучшения понимания структуры поисковиками и программами экранного доступа:
+- `<header>`, `<nav>`, `<main>`, `<section>`, `<article>`, `<aside>`, `<footer>`.
+
+### Текст и форматирование
+- **Заголовки:** `<h1>`...`<h6>`.
+- **Абзацы и переносы:** `<p>`, `<br>`.
+- **Логическое выделение:** `<strong>` (важное, жирный), `<em>` (акцент, курсив), `<code>` (код).
+- **Контейнеры:** `<div>` (блочный), `<span>` (строчный).
+
+### Списки
+- **Маркированный:** `<ul>` + `<li>`.
+- **Нумерованный:** `<ol>` + `<li>`.
+
+### Ссылки и изображения
+- **Ссылка:** `<a href="URL" target="_blank">Текст</a>`.
+- **Изображение:** `<img src="path" alt="описание" width="500">`.
+
+---
+
+## Таблицы
+Используются для отображения структурированных данных. Не рекомендуются для верстки макета.
+
+**Структура таблицы:**
+```html
+<table>
+    <caption>Заголовок таблицы</caption>
+    <thead>
+        <tr>
+            <th>Заголовок столбца 1</th>
+            <th>Заголовок столбца 2</th>
+        </tr>
+    </thead>
+    <tbody>
+        <tr>
+            <td>Данные 1</td>
+            <td>Данные 2</td>
+        </tr>
+    </tbody>
+    <tfoot>
+        <tr>
+            <td>Итог 1</td>
+            <td>Итог 2</td>
+        </tr>
+    </tfoot>
+</table>
+```
+- **Объединение ячеек:** `colspan` (по горизонтали), `rowspan` (по вертикали).
+
+---
+
+## Формы
+Инструмент для сбора данных пользователя.
+
+**Базовая форма:**
+```html
+<form action="/handler-url/" method="post">
+    <label for="username">Имя:</label>
+    <input type="text" id="username" name="name" placeholder="Введите имя">
+    
+    <button type="submit">Отправить</button>
+</form>
+```
+
+### Элементы управления:
+- `<input>`: `type="text"`, `password`, `email`, `number`, `checkbox`, `radio`, `file`, `date`, `hidden`.
+- `<select>` + `<option>`: выпадающий список.
+- `<textarea>`: многострочный ввод текста.
+- `<fieldset>` + `<legend>`: группировка связанных полей.
+
+### Атрибуты валидации:
+- `required`, `minlength`, `maxlength`, `min`, `max`, `pattern` (регулярные выражения).