https://github.com/dvurechensky-docs/cribhtml
Синтаксис HTML и Селекторы CSS
https://github.com/dvurechensky-docs/cribhtml
css css-animations css-flexbox css-framework css-grid css-in-js css-modules css3 dvurechensky html html-css html-css-javascript html-css-js html-parser html5 html5-canvas html5-css3 html5-game
Last synced: 5 months ago
JSON representation
Синтаксис HTML и Селекторы CSS
- Host: GitHub
- URL: https://github.com/dvurechensky-docs/cribhtml
- Owner: Dvurechensky-Docs
- Created: 2025-05-12T02:29:35.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2025-05-12T02:30:35.000Z (8 months ago)
- Last Synced: 2025-08-18T23:55:36.073Z (5 months ago)
- Topics: css, css-animations, css-flexbox, css-framework, css-grid, css-in-js, css-modules, css3, dvurechensky, html, html-css, html-css-javascript, html-css-js, html-parser, html5, html5-canvas, html5-css3, html5-game
- Homepage: https://www.dvurechensky.pro/
- Size: 1.55 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
✨Dvurechensky✨
## 👥 Синтаксис HTML и Селекторы CSS 👥
☀️ Базовая Структура HTML ☀️
```html
Document
Заголовок
Текст параграфа.
```
- ``: Объявление типа документа (HTML5).
- ``: Корневой элемент HTML-документа.
- ``: Содержит метаданные о документе (заголовок, кодировка, стили, скрипты).
- ``: Указывает кодировку символов (UTF-8 для поддержки большинства языков).
- ``: Настройка области просмотра для адаптивного дизайна.
- ``: Заголовок страницы, отображаемый во вкладке браузера.
- ``: Содержит видимое содержимое страницы (текст, изображения, видео).
### 👥 Основные HTML Теги 👥
⭐ Структурные теги ⭐
* ``: Шапка сайта или раздела.
```html
Название сайта
...
```
* ``: Навигационная панель.
```html
```
* ``: Основное содержимое страницы.
```html
...
...
```
* ``: Самостоятельная часть контента (статья, пост в блоге).
```html
Заголовок статьи
Текст статьи...
```
* ``: Дополнительная информация (боковая панель).
```html
Реклама
Рекламный текст...
```
* ``: Подвал сайта или раздела.
```html
© 2023 Все права защищены
```
* ``: Раздел содержимого.
```html
Заголовок раздела
Текст раздела...
```
* `
`: Универсальный контейнер (не имеет семантического значения). ```html
Содержимое внутри div.
```
⭐ Текст ⭐
* `
` - ``: Заголовки разных уровней. ```html
Заголовок первого уровня
Заголовок второго уровня
Заголовок третьего уровня
```
Заголовок первого уровня
Заголовок второго уровня
Заголовок третьего уровня
* `
`: Параграф (абзац). ```html
Это текст параграфа.
```
Это текст параграфа.
* `
`: Перенос строки (без закрывающего тега).
```html
Это строка текста.
Это новая строка.
```
Это строка текста.
Это новая строка.
* `
`: Горизонтальная линия (без закрывающего тега).
```html
Текст над линией.
Текст под линией.
```
Текст над линией.
Текст под линией.
```html
Ссылка на example.com
```
Ссылка на example.com
* ``: Строчный контейнер (не имеет семантического значения).
```html
Это часть текста.
```
Это часть текста.
* ``: Важный текст (обычно отображается жирным шрифтом).
```html
Это важный текст.
```
Это важный текст.
* ``: Выделенный текст (обычно отображается курсивом).
```html
Это выделенный текст.
```
Это выделенный текст.
* ``: Код.
```html
let x = 5;
```
let x = 5;
* `
`: Форматированный текст (сохраняет пробелы и переносы строк). ```html
Это текст,
сохраненный с форматированием.
```
Это текст,
сохраненный с форматированием.
⭐ Списки ⭐
* `
```html
- Элемент списка 1
- Элемент списка 2
- Элемент списка 3
```
- Элемент списка 1
- Элемент списка 2
- Элемент списка 3
* `
```html
- Элемент списка 1
- Элемент списка 2
- Элемент списка 3
```
- `
- Элемент списка 1
- Элемент списка 2
- Элемент списка 3
⭐ Изображения и мультимедиа ⭐
* ``: Изображение (без закрывающего тега).
```html
```
* ``: Видео.
```html
Ваш браузер не поддерживает тег video.
```
Ваш браузер не поддерживает тег video.
* ``: Аудио.
```html
Ваш браузер не поддерживает тег audio.
```
Ваш браузер не поддерживает тег audio.
⭐ Формы ⭐
* ``: Форма.
```html
Имя:
```
- ``: Метка для элемента формы.
- ``: Элемент ввода (текст, пароль, флажок, радиокнопка, файл и т. д.).
- `type="text"`: Текстовое поле.
- `type="password"`: Поле для ввода пароля.
- `type="email"`: Поле для ввода email.
- `type="checkbox"`: Флажок.
- `type="radio"`: Радиокнопка.
- `type="file"`: Выбор файла.
- `type="submit"`: Кнопка отправки формы.
- `type="reset"`: Кнопка сброса формы.
Имя:
* ``: Многострочное текстовое поле.
```html
Введите текст...
```
Введите текст...
* ``: Выпадающий список.
```html
Volvo
Saab
Mercedes
Audi
```
- ``: Элемент выпадающего списка.
Volvo
Saab
Mercedes
Audi
* ``: Кнопка.
```html
Нажми меня
```
Нажми меня
⭐ Таблицы ⭐
* ``: Таблица.
* ``: Строка таблицы.
* ``: Заголовочная ячейка таблицы.
* ``: Ячейка данных таблицы.
```html
Имя
Возраст
Иван
30
Мария
25
```
Имя
Возраст
Иван
30
Мария
25
⭐ Встраиваемые элементы ⭐
* ``: Встраиваемый фрейм (для вставки контента с другого сайта).
```html
```
⭐ Селекторы CSS ⭐
**`CSS`** (Cascading Style Sheets) используется для стилизации HTML-элементов. Селекторы **`CSS`** определяют, к каким элементам применяются стили.
* **Селектор по тегу (Type Selector):**
```css
p {
color: blue;
}
```
Применяет стиль ко всем элементам `
`.
* **Селектор по классу (Class Selector):**
```css
.highlight {
background-color: yellow;
}
```
Применяет стиль ко всем элементам с классом `highlight`.
```html
Этот текст будет выделен.
```
* **Селектор по ID (ID Selector):**
```css
#main-title {
font-size: 24px;
}
```
Применяет стиль к элементу с ID `main-title`. (ID должен быть уникальным на странице).
```html
Главный заголовок
```
* **Универсальный селектор (Universal Selector):**
```css
* {
margin: 0;
padding: 0;
}
```
Применяет стиль ко всем элементам на странице. Используется для сброса стилей по умолчанию.
* **Селектор атрибутов (Attribute Selector):**
```css
a[href] {
color: green;
}
input[type="text"] {
border: 1px solid #ccc;
}
```
* `a[href]`: Выбирает все элементы `` с атрибутом `href`.
* `input[type="text"]`: Выбирает все элементы `` с атрибутом `type`, равным "text".
* **Селектор потомков (Descendant Selector):**
```css
ul li {
list-style-type: square;
}
```
Выбирает все элементы `
- `.
- `, которые являются *непосредственными* дочерними элементами `
- `.
* **Селектор смежных элементов (Adjacent Sibling Selector):**
```css
h2 + p {
font-style: italic;
}
```Выбирает первый элемент `
`, который непосредственно следует за элементом `
`.
* **Селектор общих элементов (General Sibling Selector):**
```css
h2 ~ p {
color: red;
}
```Выбирает все элементы `
`, которые являются общими братьями и сестрами элемента `
` (то есть находятся на одном уровне и следуют после `
`).
* **Псевдоклассы (Pseudo-classes):**
* `:hover`: Стиль применяется при наведении курсора мыши на элемент.
```css
a:hover {
color: red;
}
```* `:active`: Стиль применяется, когда элемент активирован (например, нажата кнопка).
```css
button:active {
background-color: #ccc;
}
```* `:focus`: Стиль применяется, когда элемент в фокусе (например, текстовое поле).
```css
input:focus {
border: 2px solid blue;
}
```* `:visited`: Стиль для посещенных ссылок.
```css
a:visited {
color: purple;
}
```* `:nth-child(n)`: Выбирает элемент, который является n-м потомком своего родителя
```css
li:nth-child(odd) {
background-color: #f2f2f2;
}li:nth-child(even) {
background-color: #ffffff;
}
```* **Псевдоэлементы (Pseudo-elements):**
* `::before`: Вставляет контент *перед* элементом.
```css
p::before {
content: "Читать далее: ";
}
```* `::after`: Вставляет контент *после* элемента.
```css
h1::after {
content: " - Новый заголовок";
}
```
* `::first-line`: Стилизует первую строку элемента.```css
p::first-line {
font-weight: bold;
}
```* `::first-letter`: Стилизует первую букву элемента
```css
p::first-letter {
font-size: 200%;
color: red;
}
```#### Комбинирование селекторов
Селекторы можно комбинировать для создания более сложных правил:
```css
/* Элемент
с классом "highlight" внутри элемента
с ID "content" */
#content div p.highlight {
font-size: 16px;
}
```✨Dvurechensky✨
* **Селектор дочерних элементов (Child Selector):**
```css
ul > li {
border: 1px solid black;
}
```
Выбирает все элементы `