{"id":30580064,"url":"https://github.com/dvurechensky-docs/cribhtml","last_synced_at":"2026-05-18T19:39:25.563Z","repository":{"id":310568190,"uuid":"981860055","full_name":"Dvurechensky-Docs/CribHtml","owner":"Dvurechensky-Docs","description":"Синтаксис HTML и Селекторы CSS","archived":false,"fork":false,"pushed_at":"2025-05-12T02:30:35.000Z","size":1630,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-08-18T23:55:36.073Z","etag":null,"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"],"latest_commit_sha":null,"homepage":"https://www.dvurechensky.pro/","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Dvurechensky-Docs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-05-12T02:29:35.000Z","updated_at":"2025-08-18T19:50:40.000Z","dependencies_parsed_at":"2025-08-18T23:55:37.758Z","dependency_job_id":"ffabf003-7e02-42be-8dbe-34dad700cfa1","html_url":"https://github.com/Dvurechensky-Docs/CribHtml","commit_stats":null,"previous_names":["dvurechensky-docs/cribhtml"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/Dvurechensky-Docs/CribHtml","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Dvurechensky-Docs%2FCribHtml","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Dvurechensky-Docs%2FCribHtml/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Dvurechensky-Docs%2FCribHtml/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Dvurechensky-Docs%2FCribHtml/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Dvurechensky-Docs","download_url":"https://codeload.github.com/Dvurechensky-Docs/CribHtml/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Dvurechensky-Docs%2FCribHtml/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":272631632,"owners_count":24967104,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-29T02:00:10.610Z","response_time":87,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["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"],"created_at":"2025-08-29T05:00:54.703Z","updated_at":"2026-05-18T19:39:25.525Z","avatar_url":"https://github.com/Dvurechensky-Docs.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e✨Dvurechensky✨\u003c/p\u003e\n\n## 👥 Синтаксис HTML и Селекторы CSS 👥\n\n\u003cp align=\"center\"\u003e\u003ch1 align=\"center\"\u003e ☀️ Базовая Структура HTML ☀️ \u003c/h1\u003e\u003c/p\u003e\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n\u003chead\u003e\n    \u003cmeta charset=\"UTF-8\"\u003e\n    \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\u003e\n    \u003ctitle\u003eDocument\u003c/title\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n    \u003ch1\u003eЗаголовок\u003c/h1\u003e\n    \u003cp\u003eТекст параграфа.\u003c/p\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n- `\u003c!DOCTYPE html\u003e`: Объявление типа документа (HTML5).\n- `\u003chtml\u003e\u003c/html\u003e`: Корневой элемент HTML-документа.\n- `\u003chead\u003e\u003c/head\u003e`: Содержит метаданные о документе (заголовок, кодировка, стили, скрипты).\n- `\u003cmeta charset=\"UTF-8\"\u003e`: Указывает кодировку символов (UTF-8 для поддержки большинства языков).\n- `\u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\u003e`: Настройка области просмотра для адаптивного дизайна.\n- `\u003ctitle\u003e\u003c/title\u003e`: Заголовок страницы, отображаемый во вкладке браузера.\n- `\u003cbody\u003e\u003c/body\u003e`: Содержит видимое содержимое страницы (текст, изображения, видео).\n\n### 👥 Основные HTML Теги 👥\n\n\u003cp align=\"center\"\u003e\u003ch1 align=\"center\"\u003e ⭐ Структурные теги ⭐ \u003c/h1\u003e\u003c/p\u003e\n\n![Struct HTML](Media/struct_html.jpg)\n![Struct 2 HTML](Media/struct2.png)\n\n*   `\u003cheader\u003e\u003c/header\u003e`: Шапка сайта или раздела.\n\n    ```html\n    \u003cheader\u003e\n        \u003ch1\u003eНазвание сайта\u003c/h1\u003e\n        \u003cnav\u003e...\u003c/nav\u003e\n    \u003c/header\u003e\n    ```\n*   `\u003cnav\u003e\u003c/nav\u003e`: Навигационная панель.\n\n    ```html\n    \u003cnav\u003e\n        \u003cul\u003e\n            \u003cli\u003e\u003ca href=\"#\"\u003eГлавная\u003c/a\u003e\u003c/li\u003e\n            \u003cli\u003e\u003ca href=\"#\"\u003eО нас\u003c/a\u003e\u003c/li\u003e\n            \u003cli\u003e\u003ca href=\"#\"\u003eКонтакты\u003c/a\u003e\u003c/li\u003e\n        \u003c/ul\u003e\n    \u003c/nav\u003e\n    ```\n*   `\u003cmain\u003e\u003c/main\u003e`: Основное содержимое страницы.\n\n    ```html\n    \u003cmain\u003e\n        \u003carticle\u003e...\u003c/article\u003e\n        \u003caside\u003e...\u003c/aside\u003e\n    \u003c/main\u003e\n    ```\n\n*   `\u003carticle\u003e\u003c/article\u003e`: Самостоятельная часть контента (статья, пост в блоге).\n\n    ```html\n    \u003carticle\u003e\n        \u003ch2\u003eЗаголовок статьи\u003c/h2\u003e\n        \u003cp\u003eТекст статьи...\u003c/p\u003e\n    \u003c/article\u003e\n    ```\n\n*   `\u003caside\u003e\u003c/aside\u003e`: Дополнительная информация (боковая панель).\n\n    ```html\n    \u003caside\u003e\n        \u003ch3\u003eРеклама\u003c/h3\u003e\n        \u003cp\u003eРекламный текст...\u003c/p\u003e\n    \u003c/aside\u003e\n    ```\n\n*   `\u003cfooter\u003e\u003c/footer\u003e`: Подвал сайта или раздела.\n\n    ```html\n    \u003cfooter\u003e\n        \u003cp\u003e© 2023 Все права защищены\u003c/p\u003e\n    \u003c/footer\u003e\n    ```\n\n*   `\u003csection\u003e\u003c/section\u003e`: Раздел содержимого.\n\n    ```html\n    \u003csection\u003e\n        \u003ch2\u003eЗаголовок раздела\u003c/h2\u003e\n        \u003cp\u003eТекст раздела...\u003c/p\u003e\n    \u003c/section\u003e\n    ```\n\n*   `\u003cdiv\u003e\u003c/div\u003e`: Универсальный контейнер (не имеет семантического значения).\n\n    ```html\n    \u003cdiv\u003e\n        \u003cp\u003eСодержимое внутри div.\u003c/p\u003e\n    \u003c/div\u003e\n    ```\n\n\u003cp align=\"center\"\u003e\u003ch1 align=\"center\"\u003e ⭐ Текст ⭐ \u003c/h1\u003e\u003c/p\u003e\n\n*   `\u003ch1\u003e\u003c/h1\u003e` - `\u003ch6\u003e\u003c/h6\u003e`: Заголовки разных уровней.\n\n    ```html\n    \u003ch1\u003eЗаголовок первого уровня\u003c/h1\u003e\n    \u003ch2\u003eЗаголовок второго уровня\u003c/h2\u003e\n    \u003ch3\u003eЗаголовок третьего уровня\u003c/h3\u003e\n    ```\n\u003ch1\u003eЗаголовок первого уровня\u003c/h1\u003e\n\u003ch2\u003eЗаголовок второго уровня\u003c/h2\u003e\n\u003ch3\u003eЗаголовок третьего уровня\u003c/h3\u003e\n\n\u003cbr\u003e\n\u003chr style=\"border: 1px solid aqua;\"\u003e\n\u003cbr\u003e\n\n*   `\u003cp\u003e\u003c/p\u003e`: Параграф (абзац).\n\n    ```html\n    \u003cp\u003eЭто текст параграфа.\u003c/p\u003e\n    ```\n\u003cp\u003eЭто текст параграфа.\u003c/p\u003e\n\n\u003cbr\u003e\n\u003chr style=\"border: 1px solid aqua;\"\u003e\n\u003cbr\u003e\n\n*   `\u003cbr\u003e`: Перенос строки (без закрывающего тега).\n\n    ```html\n    Это строка текста.\u003cbr\u003e\n    Это новая строка.\n    ```\nЭто строка текста.\u003cbr\u003e\nЭто новая строка.\n\n\u003cbr\u003e\n\u003chr style=\"border: 1px solid aqua;\"\u003e\n\u003cbr\u003e\n\n*   `\u003chr\u003e`: Горизонтальная линия (без закрывающего тега).\n\n    ```html\n    \u003cp\u003eТекст над линией.\u003c/p\u003e\n    \u003chr\u003e\n    \u003cp\u003eТекст под линией.\u003c/p\u003e\n    ```\n\u003cp\u003eТекст над линией.\u003c/p\u003e\n\u003chr\u003e\n\u003cp\u003eТекст под линией.\u003c/p\u003e\n\n\u003cbr\u003e\n\u003chr style=\"border: 1px solid aqua;\"\u003e\n\u003cbr\u003e\n\n*   `\u003ca\u003e\u003c/a\u003e`: Ссылка (анкор).\n\n    ```html\n    \u003ca href=\"https://sites.google.com/view/dvurechensky\"\u003eСсылка на example.com\u003c/a\u003e\n    ```\n\u003ca href=\"https://sites.google.com/view/dvurechensky\"\u003eСсылка на example.com\u003c/a\u003e\n\n\u003cbr\u003e\n\u003chr style=\"border: 1px solid aqua;\"\u003e\n\u003cbr\u003e\n\n\n*   `\u003cspan\u003e\u003c/span\u003e`: Строчный контейнер (не имеет семантического значения).\n\n    ```html\n    \u003cp\u003eЭто \u003cspan\u003eчасть\u003c/span\u003e текста.\u003c/p\u003e\n    ```\n\u003cp\u003eЭто \u003cspan\u003eчасть\u003c/span\u003e текста.\u003c/p\u003e\n\n\u003cbr\u003e\n\u003chr style=\"border: 1px solid aqua;\"\u003e\n\u003cbr\u003e\n\n*   `\u003cstrong\u003e\u003c/strong\u003e`: Важный текст (обычно отображается жирным шрифтом).\n\n    ```html\n    \u003cp\u003eЭто \u003cstrong\u003eважный\u003c/strong\u003e текст.\u003c/p\u003e\n    ```\n\u003cp\u003eЭто \u003cstrong\u003eважный\u003c/strong\u003e текст.\u003c/p\u003e\n\n\u003cbr\u003e\n\u003chr style=\"border: 1px solid aqua;\"\u003e\n\u003cbr\u003e\n\n*   `\u003cem\u003e\u003c/em\u003e`: Выделенный текст (обычно отображается курсивом).\n\n    ```html\n    \u003cp\u003eЭто \u003cem\u003eвыделенный\u003c/em\u003e текст.\u003c/p\u003e\n    ```\n\u003cp\u003eЭто \u003cem\u003eвыделенный\u003c/em\u003e текст.\u003c/p\u003e\n\n\u003cbr\u003e\n\u003chr style=\"border: 1px solid aqua;\"\u003e\n\u003cbr\u003e\n\n*   `\u003ccode\u003e\u003c/code\u003e`: Код.\n\n    ```html\n    \u003ccode\u003e\n    let x = 5;\n    \u003c/code\u003e\n    ```\n\u003ccode\u003e\nlet x = 5;\n\u003c/code\u003e\n\n\u003cbr\u003e\n\u003chr style=\"border: 1px solid aqua;\"\u003e\n\u003cbr\u003e\n\n*   `\u003cpre\u003e\u003c/pre\u003e`:  Форматированный текст (сохраняет пробелы и переносы строк).\n\n    ```html\n    \u003cpre\u003e\n    Это   текст,\n    сохраненный с форматированием.\n    \u003c/pre\u003e\n    ```\n\u003cpre\u003e\nЭто   текст,\nсохраненный с форматированием.\n\u003c/pre\u003e\n\n\n\u003cp align=\"center\"\u003e\u003ch1 align=\"center\"\u003e ⭐ Списки ⭐ \u003c/h1\u003e\u003c/p\u003e\n\n*   `\u003cul\u003e\u003c/ul\u003e`: Неупорядоченный список.\n\n    ```html\n    \u003cul\u003e\n        \u003cli\u003eЭлемент списка 1\u003c/li\u003e\n        \u003cli\u003eЭлемент списка 2\u003c/li\u003e\n        \u003cli\u003eЭлемент списка 3\u003c/li\u003e\n    \u003c/ul\u003e\n    ```\n\n\u003cul\u003e\n    \u003cli\u003eЭлемент списка 1\u003c/li\u003e\n    \u003cli\u003eЭлемент списка 2\u003c/li\u003e\n    \u003cli\u003eЭлемент списка 3\u003c/li\u003e\n\u003c/ul\u003e \n\n\u003cbr\u003e\n\u003chr style=\"border: 1px solid aqua;\"\u003e\n\u003cbr\u003e\n\n*   `\u003col\u003e\u003c/ol\u003e`: Упорядоченный список.\n\n    ```html\n    \u003col\u003e\n        \u003cli\u003eЭлемент списка 1\u003c/li\u003e\n        \u003cli\u003eЭлемент списка 2\u003c/li\u003e\n        \u003cli\u003eЭлемент списка 3\u003c/li\u003e\n    \u003c/ol\u003e\n    ```\n    - `\u003cli\u003e\u003c/li\u003e`: Элемент списка.\n\n\u003col\u003e\n    \u003cli\u003eЭлемент списка 1\u003c/li\u003e\n    \u003cli\u003eЭлемент списка 2\u003c/li\u003e\n    \u003cli\u003eЭлемент списка 3\u003c/li\u003e\n\u003c/ol\u003e\n\n\u003cp align=\"center\"\u003e\u003ch1 align=\"center\"\u003e ⭐ Изображения и мультимедиа ⭐ \u003c/h1\u003e\u003c/p\u003e\n\n*   `\u003cimg\u003e`: Изображение (без закрывающего тега).\n\n    ```html\n    \u003cimg src=\"\" alt=\"Описание изображения\"\u003e\n    ```\n\n\u003cimg src=\"Media/image_crib.png\" alt=\"Описание изображения\"\u003e\n\n\u003cbr\u003e\n\u003chr style=\"border: 1px solid aqua;\"\u003e\n\u003cbr\u003e\n\n*   `\u003cvideo\u003e\u003c/video\u003e`: Видео.\n\n    ```html\n    \u003cvideo width=\"320\" height=\"240\" controls\u003e\n        \u003csource src=\"Media/Pump.mp4\" type=\"video/mp4\"\u003e\n        Ваш браузер не поддерживает тег video.\n    \u003c/video\u003e\n    ```\n\n\u003cvideo width=\"320\" height=\"240\" controls\u003e\n    \u003csource src=\"Media/Pump.mp4\" type=\"video/mp4\"\u003e\n    Ваш браузер не поддерживает тег video.\n\u003c/video\u003e\n\n\u003cbr\u003e\n\u003chr style=\"border: 1px solid aqua;\"\u003e\n\u003cbr\u003e\n\n*   `\u003caudio\u003e\u003c/audio\u003e`: Аудио.\n\n    ```html\n    \u003caudio controls\u003e\n        \u003csource src=\"Media/ambience_bar_ground_larger.wav\" type=\"audio/mpeg\"\u003e\n        Ваш браузер не поддерживает тег audio.\n    \u003c/audio\u003e\n    ```\n\u003caudio controls\u003e\n    \u003csource src=\"Media/ambience_bar_ground_larger.wav\" type=\"audio/mpeg\"\u003e\n    Ваш браузер не поддерживает тег audio.\n\u003c/audio\u003e\n\n\u003cp align=\"center\"\u003e\u003ch1 align=\"center\"\u003e ⭐ Формы ⭐ \u003c/h1\u003e\u003c/p\u003e\n\n*   `\u003cform\u003e\u003c/form\u003e`: Форма.\n\n    ```html\n    \u003cform action=\"/submit\" method=\"post\"\u003e\n        \u003clabel for=\"name\"\u003eИмя:\u003c/label\u003e\n        \u003cinput type=\"text\" id=\"name\" name=\"name\"\u003e\u003cbr\u003e\u003cbr\u003e\n        \u003cinput type=\"submit\" value=\"Отправить\"\u003e\n    \u003c/form\u003e\n    ```\n\n    - `\u003clabel\u003e\u003c/label\u003e`: Метка для элемента формы.\n    - `\u003cinput\u003e`: Элемент ввода (текст, пароль, флажок, радиокнопка, файл и т. д.).\n\n        - `type=\"text\"`: Текстовое поле.\n        - `type=\"password\"`: Поле для ввода пароля.\n        - `type=\"email\"`: Поле для ввода email.\n        - `type=\"checkbox\"`: Флажок.\n        - `type=\"radio\"`: Радиокнопка.\n        - `type=\"file\"`: Выбор файла.\n        - `type=\"submit\"`: Кнопка отправки формы.\n        - `type=\"reset\"`: Кнопка сброса формы.\n\n\u003cform action=\"/submit\" method=\"post\"\u003e\n    \u003clabel for=\"name\"\u003eИмя:\u003c/label\u003e\n    \u003cinput type=\"text\" id=\"name\" name=\"name\"\u003e\u003cbr\u003e\u003cbr\u003e\n    \u003cinput type=\"submit\" value=\"Отправить\"\u003e\n\u003c/form\u003e\n\n\u003cbr\u003e\n\u003chr style=\"border: 1px solid aqua;\"\u003e\n\u003cbr\u003e\n\n*   `\u003ctextarea\u003e\u003c/textarea\u003e`: Многострочное текстовое поле.\n\n    ```html\n    \u003ctextarea rows=\"4\" cols=\"50\"\u003eВведите текст...\u003c/textarea\u003e\n    ```\n\n\u003ctextarea rows=\"4\" cols=\"50\"\u003eВведите текст...\u003c/textarea\u003e\n\n\u003cbr\u003e\n\u003chr style=\"border: 1px solid aqua;\"\u003e\n\u003cbr\u003e\n\n*   `\u003cselect\u003e\u003c/select\u003e`: Выпадающий список.\n\n    ```html\n    \u003cselect name=\"cars\" id=\"cars\"\u003e\n        \u003coption value=\"volvo\"\u003eVolvo\u003c/option\u003e\n        \u003coption value=\"saab\"\u003eSaab\u003c/option\u003e\n        \u003coption value=\"mercedes\"\u003eMercedes\u003c/option\u003e\n        \u003coption value=\"audi\"\u003eAudi\u003c/option\u003e\n    \u003c/select\u003e\n    ```\n\n    - `\u003coption\u003e\u003c/option\u003e`: Элемент выпадающего списка.\n\n\u003cselect name=\"cars\" id=\"cars\"\u003e\n    \u003coption value=\"volvo\"\u003eVolvo\u003c/option\u003e\n    \u003coption value=\"saab\"\u003eSaab\u003c/option\u003e\n    \u003coption value=\"mercedes\"\u003eMercedes\u003c/option\u003e\n    \u003coption value=\"audi\"\u003eAudi\u003c/option\u003e\n\u003c/select\u003e\n\n\u003cbr\u003e\n\u003chr style=\"border: 1px solid aqua;\"\u003e\n\u003cbr\u003e \n\n*   `\u003cbutton\u003e\u003c/button\u003e`: Кнопка.\n\n    ```html\n    \u003cbutton type=\"button\"\u003eНажми меня\u003c/button\u003e\n    ```\n\n\u003cbutton type=\"button\"\u003eНажми меня\u003c/button\u003e\n    \n\u003cp align=\"center\"\u003e\u003ch1 align=\"center\"\u003e ⭐ Таблицы ⭐ \u003c/h1\u003e\u003c/p\u003e\n\n*   `\u003ctable\u003e\u003c/table\u003e`: Таблица.\n*   `\u003ctr\u003e\u003c/tr\u003e`: Строка таблицы.\n*   `\u003cth\u003e\u003c/th\u003e`: Заголовочная ячейка таблицы.\n*   `\u003ctd\u003e\u003c/td\u003e`: Ячейка данных таблицы.\n\n    ```html\n    \u003ctable\u003e\n        \u003ctr\u003e\n            \u003cth\u003eИмя\u003c/th\u003e\n            \u003cth\u003eВозраст\u003c/th\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003eИван\u003c/td\u003e\n            \u003ctd\u003e30\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003eМария\u003c/td\u003e\n            \u003ctd\u003e25\u003c/td\u003e\n        \u003c/tr\u003e\n    \u003c/table\u003e\n    ```\n\n\u003ctable\u003e\n    \u003ctr\u003e\n        \u003cth\u003eИмя\u003c/th\u003e\n        \u003cth\u003eВозраст\u003c/th\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003eИван\u003c/td\u003e\n        \u003ctd\u003e30\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003eМария\u003c/td\u003e\n        \u003ctd\u003e25\u003c/td\u003e\n    \u003c/tr\u003e\n\u003c/table\u003e\n\n\u003cp align=\"center\"\u003e\u003ch1 align=\"center\"\u003e ⭐ Встраиваемые элементы ⭐ \u003c/h1\u003e\u003c/p\u003e\n\n*   `\u003ciframe\u003e\u003c/iframe\u003e`: Встраиваемый фрейм (для вставки контента с другого сайта).\n\n    ```html\n    \u003ciframe src=\"https://rutube.ru/channel/44085490/\" width=\"600\" height=\"400\"\u003e\u003c/iframe\u003e\n    ```\n\n\u003ciframe src=\"https://rutube.ru/channel/44085490/\" width=\"600\" height=\"400\"\u003e\u003c/iframe\u003e\n\n\u003cp align=\"center\"\u003e\u003ch1 align=\"center\"\u003e ⭐ Селекторы CSS ⭐ \u003c/h1\u003e\u003c/p\u003e\n\n**`CSS`** (Cascading Style Sheets) используется для стилизации HTML-элементов. Селекторы **`CSS`** определяют, к каким элементам применяются стили.\n\n*   **Селектор по тегу (Type Selector):**\n\n    ```css\n    p {\n        color: blue;\n    }\n    ```\n\n    Применяет стиль ко всем элементам `\u003cp\u003e`.\n\n*   **Селектор по классу (Class Selector):**\n\n    ```css\n    .highlight {\n        background-color: yellow;\n    }\n    ```\n\n    Применяет стиль ко всем элементам с классом `highlight`.\n\n    ```html\n    \u003cp class=\"highlight\"\u003eЭтот текст будет выделен.\u003c/p\u003e\n    ```\n\n*   **Селектор по ID (ID Selector):**\n\n    ```css\n    #main-title {\n        font-size: 24px;\n    }\n    ```\n\n    Применяет стиль к элементу с ID `main-title`. (ID должен быть уникальным на странице).\n\n    ```html\n    \u003ch1 id=\"main-title\"\u003eГлавный заголовок\u003c/h1\u003e\n    ```\n\n*   **Универсальный селектор (Universal Selector):**\n\n    ```css\n    * {\n        margin: 0;\n        padding: 0;\n    }\n    ```\n\n    Применяет стиль ко всем элементам на странице.  Используется для сброса стилей по умолчанию.\n\n*   **Селектор атрибутов (Attribute Selector):**\n\n    ```css\n    a[href] {\n        color: green;\n    }\n\n    input[type=\"text\"] {\n        border: 1px solid #ccc;\n    }\n    ```\n\n    *   `a[href]`:  Выбирает все элементы `\u003ca\u003e` с атрибутом `href`.\n    *   `input[type=\"text\"]`: Выбирает все элементы `\u003cinput\u003e` с атрибутом `type`, равным \"text\".\n\n*   **Селектор потомков (Descendant Selector):**\n\n    ```css\n    ul li {\n        list-style-type: square;\n    }\n    ```\n\n    Выбирает все элементы `\u003cli\u003e`, которые являются потомками элемента `\u003cul\u003e`.\n\n*   **Селектор дочерних элементов (Child Selector):**\n\n    ```css\n    ul \u003e li {\n        border: 1px solid black;\n    }\n    ```\n\n    Выбирает все элементы `\u003cli\u003e`, которые являются *непосредственными* дочерними элементами `\u003cul\u003e`.\n\n*   **Селектор смежных элементов (Adjacent Sibling Selector):**\n\n    ```css\n    h2 + p {\n        font-style: italic;\n    }\n    ```\n\n    Выбирает первый элемент `\u003cp\u003e`, который непосредственно следует за элементом `\u003ch2\u003e`.\n\n*   **Селектор общих элементов (General Sibling Selector):**\n\n    ```css\n    h2 ~ p {\n        color: red;\n    }\n    ```\n\n    Выбирает все элементы `\u003cp\u003e`, которые являются общими братьями и сестрами элемента `\u003ch2\u003e` (то есть находятся на одном уровне и следуют после `\u003ch2\u003e`).\n\n*   **Псевдоклассы (Pseudo-classes):**\n\n    *   `:hover`:  Стиль применяется при наведении курсора мыши на элемент.\n\n        ```css\n        a:hover {\n            color: red;\n        }\n        ```\n\n    *   `:active`:  Стиль применяется, когда элемент активирован (например, нажата кнопка).\n\n        ```css\n        button:active {\n            background-color: #ccc;\n        }\n        ```\n\n    *   `:focus`: Стиль применяется, когда элемент в фокусе (например, текстовое поле).\n\n        ```css\n        input:focus {\n            border: 2px solid blue;\n        }\n        ```\n\n    *   `:visited`: Стиль для посещенных ссылок.\n\n        ```css\n        a:visited {\n           color: purple;\n        }\n        ```\n\n    * `:nth-child(n)`: Выбирает элемент, который является n-м потомком своего родителя\n\n        ```css\n        li:nth-child(odd) {\n            background-color: #f2f2f2;\n        }\n\n        li:nth-child(even) {\n            background-color: #ffffff;\n        }\n        ```\n\n*   **Псевдоэлементы (Pseudo-elements):**\n\n    *   `::before`:  Вставляет контент *перед* элементом.\n\n        ```css\n        p::before {\n            content: \"Читать далее: \";\n        }\n        ```\n\n    *   `::after`: Вставляет контент *после* элемента.\n\n        ```css\n        h1::after {\n            content: \" - Новый заголовок\";\n        }\n        ```\n    *   `::first-line`:  Стилизует первую строку элемента.\n\n        ```css\n        p::first-line {\n            font-weight: bold;\n        }\n        ```\n\n    * `::first-letter`: Стилизует первую букву элемента\n\n        ```css\n        p::first-letter {\n            font-size: 200%;\n            color: red;\n        }\n        ```\n\n#### Комбинирование селекторов\n\nСелекторы можно комбинировать для создания более сложных правил:\n\n```css\n/* Элемент \u003cp\u003e с классом \"highlight\" внутри элемента \u003cdiv\u003e с ID \"content\" */\n#content div p.highlight {\n  font-size: 16px;\n}\n```\n\n\u003cp align=\"center\"\u003e✨Dvurechensky✨\u003c/p\u003e","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdvurechensky-docs%2Fcribhtml","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdvurechensky-docs%2Fcribhtml","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdvurechensky-docs%2Fcribhtml/lists"}