**HTML, CSS для начинающих - Полный курс (2025). Урок №5:CSS: Введение. Обнуляющие стили. — Transcript & Summary | SozAI**
Source: https://sozai.app/transcript/html-css-beginners-full-course-lesson-5-css-introduction-reset-styles/
Урок 5 курса по HTML и CSS: подключение CSS-файла, сброс стилей браузера по умолчанию для списков, ссылок, заголовков, форм и отступов.
## Key Takeaways
- Браузеры применяют стили по умолчанию, которые различаются между собой, поэтому их нужно сбрасывать
- Файл reset.css позволяет получить единообразную основу для последующей стилизации
- Свойство inherit позволяет элементам наследовать стили от родителя
- Универсальный селектор и обнуление отступов упрощают начальную настройку страницы
## What the video covers
- Введение в CSS: зачем нужны стили и почему браузеры применяют стандартные стили к HTML-тегам
- Создание файла reset.css в папке css и подключение его к HTML через тег link
- Синтаксис CSS: селектор, фигурные скобки, свойство, значение, точка с запятой, комментарии
- Использование селектора через запятую для применения одинаковых стилей к нескольким тегам (html и body)
- Сброс маркеров списков через list-style-type: none
- Использование Live Server в VS Code для автоматического обновления страницы при изменении кода
- Сброс подчёркивания и цвета ссылок с помощью text-decoration и color: inherit
- Сброс размера и жирности шрифта заголовков h1–h3 через наследование
- Сброс рамок, фона и цвета у элементов формы (input, textarea, button, fieldset)
- Универсальный селектор \* для обнуления margin и padding у всех элементов, настройка box-sizing и outline
## Chapters
1. 00:00 Введение в CSS и цели урока
2. 00:30 Стили по умолчанию и создание reset.css
3. 00:58 Синтаксис CSS и подключение файла к HTML
4. 02:07 Сброс стилей html, body и списков
5. 02:58 Live Server и сброс ссылок
6. 03:36 Сброс заголовков и элементов формы
7. 05:24 Универсальный селектор и финальные штрихи
Answers
## Questions about this video
Зачем нужен файл reset.css в этом уроке?
Он нужен для сброса стилей, которые браузеры применяют к HTML-тегам по умолчанию. Так стили выглядят одинаково во всех браузерах и можно начать писать собственные стили с чистого листа.
Как подключить CSS-файл к HTML-странице?
Внутри тега head нужно написать тег link и указать в атрибуте href путь к CSS-файлу, например css/reset.css. После этого стили начнут применяться к странице.
Что делает свойство inherit и зачем оно используется?
Свойство inherit заставляет элемент получать значение свойства от своего родителя. В уроке его используют для ссылок, заголовков и элементов формы, чтобы они не отличались от обычного текста.
## Full Transcript — Download SRT & Markdown
00:00
Speaker A
Привет Сегодня мы начнём знакомство с CSS разберёмся Как подключить стили к странице и подготовим основу для будущих уроков Готов давай начинать на прошлых уроках мы создавали структуру сайта теперь Наша задача - превратить эту структуру в красивый и удобный сайт Вы
00:13
Speaker A
наверняка заметили что разные теги в HTML выглядят по-разному Например у заголовков уже есть отступы сверху снизу жирный шрифт большой размер текста ссылки имеют синий цвет Нижняя подчёркивание списки имеют различные маркеры если это нумерованный список то 1 2 3 если маркированный то просто леты
00:30
Speaker A
и элементы формы тоже имеют разные стили по умолчанию это происходит из-за того что браузеры применяют свои стандартные стили к HTML тегам при этом в разных браузерах эти стили выглядят по-разному поэтому перед тем как приступить к написанию собственных стилей мы создадим
00:44
Speaker A
файл resit CSS в котором сбросим стили у тегов по умолчанию перейдём в наш проект создадим новую папку назовём её CSS А уже внутри папки создаём новый файл называем его ре CSS для того чтобы задать стиль или сбросить стиль мы
00:58
Speaker A
должны обратиться к HTML элементу сделать это можно несколькими способами можно обращаться по селектору класса по селектору тега по селектору идентификатора все эти способы мы будем изучать позже Сегодня мы будем обращаться только по селектору класса Но для того чтобы наши стили применялись к
01:13
Speaker A
HTML странице мы должны подключить наш файл resit CSS к HTML для этого переходим в HTML внутри тега Head пишем Link нажимаем Tab в вхв атрибуте мы должны указать путь к нашему CSS файл у нас это папка CSS внутри неё файл resit
01:27
Speaker A
CSS сохраняем HTML файл Теперь мы можем приступить к сбросу стилей давайте я здесь комментарии ставлю комментарий комментарий CSS пишется так всё что внутри этой конструкции является комментарием то есть мы должны обратиться к HTML элементу через селектор затем открываем фигурные скобки
01:42
Speaker A
здесь будет какое-то имя свойство А через двоеточие значение этого свойства после значения мы должны поставить точку с запятой вот такой синтаксис CSS Давайте начнём с тега HTML и сразу через запятую напишем Tag Body оператор запятая позволяет нам задавать для
01:58
Speaker A
разных тегов одинаковые стили То есть у нас для тега HTML и для тега Body будут одинаковые стили свойство hte отвечает за высоту блоков зададим значение 100% чтобы у нас г HTML и Tag Body были высотой 100% то есть растягивались на
02:13
Speaker A
весь экран перейдём в браузер Какие теги У нас есть для которых нужно сбросить стили по умолчанию и первое что мы видим У нас есть ссылка и список давайте как раз для списка сбросим стили то есть мы пишем ol Обращаемся к тегу у и ol и для
02:27
Speaker A
этих двух тегов удаляем вот эти маркеры по умолчанию то есть то буллеты и цифры для нумерованного списка Для этого нам нужно обратиться к свойству list Style Type и значение Non указать то есть полностью отключить входим в браузер смотрим и цифры и буллеты исчезли так
02:41
Speaker A
как мы уже дошли до стилизации нашего HTML файла постоянно писать стили переходить в браузер и обновлять страницу чтобы увидеть изменения очень неудобно поэтому давайте мы закроем браузер перейдём в S код установим расширение Live Севе Вот так оно называется устанавливаете его себе после
02:57
Speaker A
установки у вас в с коде появится Вот такая иконка Go Live кликаем на эту иконку и расширение Live Север запускает локальный сервер котором запускает наш файл Index HTML теперь когда мы внесём любые изменения в HTML или CSS нам
03:11
Speaker A
достаточно просто сохранить Давайте просто здесь удалим то что мы написали нажмём ctr S стили уже изменились прийдём обратно восстановим то что мы удалили переходим в браузер стили применили Теперь давайте для ссылки уберём Вот это нижнее подчёркивание и синий цвет Для этого Обращаемся к тегу
03:27
Speaker A
ссылка и внутри пишем свойство Color оно отвечает за цвет пишем такое ключевое слово как inherit оно отвечает за наследование то есть ссылка будет наследовать цвет у своего родителя и также укажем Text decoration это свойство отвечает за подчёркивание по
03:42
Speaker A
умолчанию оно underline то есть есть подчёркивание но мы установим Non и отключим его сохраняем переходим в браузер видим что ссылка унаследовала тёмный цвет такой же как у Body по умолчанию и нижнего подчёркивания тоже нет следующие теги теги заголовков H1 H2
03:56
Speaker A
и H3 мы используем также через запятую фигурные скобки и внутри пишем Font size это свойство отвечает за размер шрифта тоже задаём inherit также Font Weight Font Weight отвечает за жирность текста здесь мы тоже укажем свойство inherit смотрим браузер теперь наши заголовки
04:12
Speaker A
ничем не отличаются от обычного текста вот эти стили по умолчанию для тега Strong Mark em и так далее мы не будем обнулять мы просто их не будем использовать поэтому перейдём к сразу к форме и сбросим стили для тегов внутри
04:24
Speaker A
формы для этого обратимся к Input через запятую тестя дальше у нас есть там Button и для этих тегов зададим несколько свойств здесь мы напишем такое универсальное свойство фон чтобы теги формы унаследовали значение для шрифта init также отключим борр Делаем его по
04:39
Speaker A
умолчанию борде - это граница рамка у тегов переходим и видим что ни inp ни тек ни кнопки теперь не имеют бордера также установим Color inh для того чтобы цвет текста внутри формы тоже наследовался теперь отдельно для текст Давайте уберём вот этот Арей Где мы
04:56
Speaker A
можем по умолчанию растягивать как угодно текст Для этого обратимся текст и свойство resize поставим значение Non теперь значение жёстко установлено и мы не можем растягивать поле ещё у нас осталась рамка у FS Давайте сбросим её Обращаемся к FS также задаём значение
05:12
Speaker A
Border Non практически все стили по умолчанию мы сбросили для наших тегов за исключением того что у нас между тегами ещё присутствуют отступы и для того чтобы мы каждому тегу не прописывали везде merin 0 merin 0 merin отвечает за
05:24
Speaker A
внешний отступ мы можем обратиться с помощью универсального селектора пишется он вот так звёздочка звёздочка значит что мы Обращаемся абсолютно ко всем элементам на HTML странице мы задаём merion ноль то есть внешний отступ со всех сторон Ноль панг - это свойство
05:38
Speaker A
отвечающее за внутренний отступ тоже устанавливаем ноль ещё одно свойство оно может показаться сначала непонятным бок сайзинг по умолчанию Она идёт Content BX но мы устанавливаем Border BX для чего мы сейчас задаём вот это свойство с этим значением будет более Понятно в
05:53
Speaker A
следующих уроках когда мы доберёмся до блочной модели CSS если кратко то значение Border B помогает нам лучше рассчитывать размеры блоков переходим в браузер и видим что все отступы сброшены теперь у нас сплошной текст вот здесь это не отступ это у нас текст эрия
06:07
Speaker A
сейчас когда мы становимся в фокус инпутов или крия у нас появляется ещё одно свойство по умолчанию Это outline Давайте его тоже обнули для этого мы также Обращаемся к инпут текст и внутри этого блока напишем outline со значением Non переходим в браузер теперь у нас у
06:23
Speaker A
активного поля нет никакой подсветки в следующем уроке мы начнём писать свои стили и научимся управлять внешним видом текста подписывайся на канал Ставь лайк увидимся в следующем видео
Topics: CSS HTML сброс стилей reset.css верстка веб-разработка для начинающих селекторы Live Server
Учить по этому видео
- [Карточки по этому видео](https://sozai.app/ru/tools/flashcard-maker/?from=transcript&id=91433)
- [Тест по этому видео](https://sozai.app/ru/tools/quiz-generator/?from=transcript&id=91433)
- [Кроссворд по этому видео](https://sozai.app/ru/tools/crossword-maker/?from=transcript&id=91433)
- [Филворд по этому видео](https://sozai.app/ru/tools/word-search-maker/?from=transcript&id=91433)
- [Шпаргалка по этому видео](https://sozai.app/ru/tools/study-guide-maker/?from=transcript&id=91433)
Бесплатно, составлено ИИ по этой расшифровке. Без регистрации.
---
This is the markdown twin of https://sozai.app/transcript/html-css-beginners-full-course-lesson-5-css-introduction-reset-styles/ — the same content, without the markup.
Published by SozAI (https://sozai.app). Reuse and quotation are allowed with attribution and a link back.
Machine-readable index: https://sozai.app/llms.txt · data API: https://sozai.app/api/