Как вы уже видели, некоторые теги в HTML документе имеют уже встроенные стандартные стили. Как, например, у параграфа
<p>
есть отступы сверху и снизу. А заголовки
<h>
имеют не только отступы, но и размер шрифта, которые отличается от всего остального текста в документе.
Чаще всего при современной вёрстке сайтов эти стандартные стили нам будут только мешать. Потому что по дизайну расстояния между параграфами или заголовками будут разные и они могут не совпадать со встроенными стилями.
Что бы каждый раз не переназначать отступы для каждого отдельного элемента, в современном коде принято сбрасывать все отступы сразу во всем файле HTML.
Разберёмся, как это можно сделать на примере нашей статьи про Lego, которую мы начали форматировать в предыдущих уроках.
Мы видим, что сейчас у заголовков и параграфов есть отступы не только сверху и снизу, но и слева. Изображение так же имеет больший отступ слева, как и список. Все это встроенные стандартные стили - мы их не задавали.
Как мы уже знаем, стили мы задаем в файле CSS. Откройте в VS Code файл
style.css
для вашей статьи. Напомню, что он лежит в папке "css"
Ранее в этом файле мы прописали цвет бэкграунда
background-color: lightgray;
.
Сейчас мы посмотрим какие существуют варианты сброса отступов, а далее будем применять нужный именно нам:
- Прописать через
*
новые значения для внешних и внутренних отступов (margin, padding). Так как мы хотим сбросить имеющиеся значения нам нужно поставить отступы ноль пикселей.
Вот что получится при таких параметрах
Метод переназначения стилей через
*
не совсем корректен в данном случае, так как*
в CSS обращается абсолютно ко всем элементам, даже если у них нет стандартных встроенных стилей. Что загружает систему, так как браузер будет последовательно проходить по всем элементам и обнулять стили даже там, где этого делать не нужно. И если в нашем случае с довольно простым кодом это никак не повлияет на загрузку страницы, то в большом проекте, такие действия не желательны. - Есть еще один вариант для сброса всех встроенных стандартных стилей. Такой файл называют reset.css и в нем прописывают все параметры для сброса. Отступов, размеров заголовков, обозначений для списков и тд. Но прописывать все эти параметры руками не очень удобно, всегда есть шанс что-то упустить или убрать слишком много. Подробно не будем останавливаться на этом методе, так как использовать его в своей практике мы не будем. Просто знайте, что существует такая возможность полностью сбросить все стили прописывая код руками в отдельном файле reset.
- Третий способ, который мы будем использовать для сброса стандартных встроенных стилей -
normalize.css
Это уже готовый файл, который вы можете скачать и применять к своим проектам. Просто смотрите самую последнюю версию, она будет учитывать все новые фишки браузеров и облегчит вам работу со стилизацией кода.
Сейчас последняя версия v8.0.1
Скачать можно на сайте https://necolas.github.io/normalize.css/
Для того чтобы применить сброс стилей создайте в папке со статьей про Lego файлnormalize.css
(не забудьте, что файлы.css
лежат у нас в соответствующей папке).
Откройте файлnormalize.css
в VS Code
Нажмите на сайте кнопку Download и скопируйте весь текст, который есть в браузере (для выделения всего текста используйте горячие клавиши Win + A).
Вставьте скопированный текст в файлnormalize.css
и сохраните изменения.