Файл обнуления reset css для сброса дефолтных стилей браузера

Перед тем, как приступить к стилизации html элементов с помощью css, для корректного отображения стилей в браузере потребуется произвести:

• Сброс стилей кнопок
• Сброс стилей полей ввода (input)
• Сброс стилей ссылки (убрать подчеркивание)
• Сброс стилей списков

И установить свои дефолтные css значения html элементам на странице. Зачем и почему это приходится делать поговорим дальше в статье.

Принцип работы обнуляющих css стилей

Код html является по своей сути каркасом веб страницы. Браузер, читая html файл выведет на экран устройства перечисленные html элементы в том порядке, в котором они записаны в файле.

В свою очередь в файле css записываются визуальные стили всех тех элементов, которые находятся в файле html. Например, если с помощью html на страницу выводятся заголовки, текст, список и другие элементы, то с помощью css стилей всем этим элементам определяются свойства:

• Цвет текста
• Размер шрифта
• Отступ до следующего элемента
• Цвет, размер и форма маркеров у списка
• Окантовка или ее отсутствие

И, казалось бы, если файла с css стилями не будет, то на страницу будут выводиться элементы без каких-либо стилей. Но, это не совсем так.

Если запустить в браузере html файл без файла css, который выведет на экран несколько заголовков, список, текстовое поле и кнопку, то мы обнаружим, что эти элементы будут иметь определенные стили.

Заголовки будут отличаться размеры согласно иерархии заголовков. У списков будут маркеры. Так же будут отступы между элементами, обводка у текстового поля и кнопки.

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

Перед тем, как стилизовать html элементы с помощью css все дефолтные стили браузера обнулить. Для этого потребуется либо у каждого элемента по отдельности сбросить значение стилей при его стилизации, либо заранее сбросить дефолтные значение универсальным кодом сброса.  

Если к файлу html из предыдущего примера применить обнуляющие стили, то результат будет как на примере ниже.

Как использовать reset css в проекте

Необходимо учитывать порядок подключения файлов сброса css и основных стилей страницы. Приоритет будут иметь те стили, которые находятся ниже. Соответственно, файл reset css необходимо подключать до основных стилей страницы.

Использовать стили сброса можно двумя способами.

1. Подключить отдельный файл. Для этого нужно создать файл с расширением css, назвать его тем именем, которое удобно. Например, reset.css. Файл reset css подключить до основных стилей между тегами body с помощью тега link.
2. Добавить скопированный код в файл для основных стилей в выше остального кода.

Обнуляющие стили css:

/* --------------reset--------------- */

* {

  padding: 0px;

  margin: 0px;

  border: none;

}

*,

*::before,

*::after {

  box-sizing: border-box;

}

a, a:link, a:visited  {

    text-decoration: none;

}

a:hover  {

    text-decoration: none;

}

aside, nav, footer, header, section, main {

  display: block;

}

h1, h2, h3, h4, h5, h6, p {

  font-size: inherit;

  font-weight: inherit;

  margin: 0;

  padding: 0;

}

ul, ul li {

  list-style: none;

  padding: 0;

  margin: 0;

}

img {

  vertical-align: top;

}

img, svg {

  max-width: 100%;

  height: auto;

}

address {

  font-style: normal;

}

input, textarea, button, select {

  font-family: inherit;

  font-size: inherit;

  color: inherit;

  background-color: transparent;

  padding-block: 0px;

  padding-inline: 0px;

}

input{

  border: none;

}

input::-ms-clear {

  display: none;

}

button, input[type="submit"] {

  display: inline-block;

  box-shadow: none;

  background-color: transparent;

  background: none;

  border: none;

  cursor: pointer;

}

input:focus, input:active,

button:focus, button:active {

    outline: none;

}

button::-moz-focus-inner {

  padding: 0;

  border: 0;

}

label {

  cursor: pointer;

}

legend {

  display: block;

}

Использование файла Normalize

Сделав верстку и загрузив проект на сервер, окажется, что другие устройства отображают веб страницу совершенно по-другому. Проще говоря, в других браузерах “верстка поедет”.

Разные браузеры могут по-разному отображать элемент с одним и тем же набором css стилей. Для того, чтоб убрать это не соответствие используется файл normalize.

Для того, чтоб использовать normalize нужно его скачать и добавить себе в проект. Обычно для удобства в корневой директории создается папка css, в которой хранятся все файлы стилей.

Подключается файл на html страницу перед остальными файлами стилей.