CSS Academy · Урок

Сброс CSS и Normalize

Устраняйте несогласованные стандартные стили браузеров с помощью сброса CSS и таблиц стилей Normalize.

«Сброс CSS и Normalize» — бесплатный урок CSS Academy на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения CSS Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс CSS Academy содержит 4 уроков всего.

Проблема: непоследовательные настройки браузеров по умолчанию

В каждом браузере есть встроенная таблица стилей пользовательского агента со стилями по умолчанию для заголовков, внешних и внутренних отступов, списков и элементов форм. Эти настройки различаются в разных браузерах, из-за чего внешний вид получается непоследовательным.

Сброс CSS

Сброс CSS удаляет все настройки браузера по умолчанию, предоставляя чистый лист. Знаменитый сброс Эрика Мейера устанавливает внешние и внутренние отступы, а также множество свойств в ноль или none.

<h1>Title</h1>
<p>Paragraph with reset margins.</p>
<ul><li>Item</li><li>Item</li></ul>
<ol><li>Step</li><li>Step</li></ol>

Нормализация CSS

Normalize.css использует другой подход: вместо удаления всех настроек по умолчанию он делает их единообразными в разных браузерах и исправляет известные ошибки, сохраняя полезные настройки, например размеры заголовков.

Компромиссы между сбросом и нормализацией

Сравнение:

Сброс: чистый лист, всё определяется вручную, больше работы
Нормализация: единая базовая настройка с сохранением полезных значений по умолчанию, меньше собственного кода

Современный сброс CSS

Популярный современный сброс (Джоша Комо) нацелен на наиболее значимые настройки по умолчанию:

<h1>Reset Demo</h1><h2>Sub</h2><h3>Sub</h3><h4>Sub</h4><h5>Sub</h5><h6>Sub</h6>
<p>Body text with smooth font rendering.</p>
<picture><img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='120'><rect width='300' height='120' fill='%234f8fdb'/></svg>" alt="demo" /></picture>
<video controls></video>
<canvas></canvas>
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40"><circle cx="20" cy="20" r="18" fill="tomato"/></svg>

Изображения как блочные элементы

Если задать изображениям display: block, внизу изображений внутри контейнеров исчезает стандартный встроенный зазор, вызванный свойством line-height:

<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='160'><rect width='400' height='160' fill='%23ff6347'/></svg>" alt="block image" />

Шаблон сброса списков

Удаляйте маркеры списков и отступы, когда стилизуете пользовательскую навигацию или списки пользовательского интерфейса:

<ul class="nav-list"><li>Home</li><li>Shop</li><li>About</li></ul>

Сброс стилей элементов форм

Во многих браузерах элементы форм (input, button, textarea) по умолчанию не наследуют шрифт. Распространённое исправление:

<input type="text" placeholder="Name" />
<button>Submit</button>
<textarea placeholder="Message"></textarea>
<select><option>Choice A</option></select>

Preflight в Tailwind CSS

Tailwind CSS включает собственный сброс под названием Preflight, созданный на основе modern-normalize. Если Вы используете Tailwind, сброс уже применяется автоматически.

Где размещать сброс

Всегда размещайте таблицу стилей со сбросом или нормализацией первой, до любых стилей компонентов или вспомогательных классов. Порядок каскада позволяет Вашим стилям переопределять сброс без конфликтов специфичности.

Что учитывать при создании собственного сброса

Создавайте собственный минимальный сброс, адаптированный под Ваш проект, вместо подключения полного стороннего сброса. Включайте только необходимые правила, чтобы уменьшить размер CSS.

<p>Base font-size and line-height set on the root element affect the whole page.</p>

Быстрая проверка

В чём заключается главное различие между сбросом CSS и нормализацией CSS?

Итоги

Стили браузера по умолчанию непоследовательны. Сброс CSS удаляет все настройки по умолчанию, а normalize.css делает их единообразными. Современные сбросы сосредоточены на наиболее важных правилах, таких как box-sizing: border-box, максимальная ширина изображений и наследование шрифта элементами форм. Всегда подключайте сброс первым.

Часто задаваемые вопросы

Урок «Сброс CSS и Normalize» бесплатный?

Да — полный текст урока «Сброс CSS и Normalize» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс CSS Academy, подпишись на CoddyKit PRO. Курс CSS Academy содержит 4 уроков всего.

Чему я научусь в уроке «Сброс CSS и Normalize»?

Устраняйте несогласованные стандартные стили браузеров с помощью сброса CSS и таблиц стилей Normalize. Ты практикуешь CSS Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать CSS Academy?

Предыдущий опыт не требуется. CSS Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.

Сколько времени занимает урок «Сброс CSS и Normalize»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке CSS Academy?

Да. Каждый урок CSS Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к CSS Academy