Сброс и нормализация стилей на CSS
По умолчанию браузеры добавляют отступы различным элементам. При верстке нам часто приходится иметь дело с этими отступами, отменяя их там, где они не нужны. При этом в разных браузерах отступы по умолчанию для одних и тех же элементов могут отличаться. То есть, даже если отступ по умолчанию нас устраивает, то нет гарантии, что в другом браузере он будет такой же.
Давайте посмотрим, какие подходы существуют для борьбы с указанной проблемой.
Сброс стилей через универсальный селектор
Распространенной практикой является отмена отступов по умолчанию. Для этого создают так называемый файл сброса стилей reset.css .
В этом файле сбрасывают все отступы в ноль, используя универсальный селектор:
Затем к HTML странице подключают сначала файл сброса, а затем уже файл с основными CSS стилями:
Создайте файл со сбросом через универсальный селектор. Подключите его к какому-нибудь HTML файлу. Посмотрите на внешний вид страницы по умолчанию, без ваших CSS стилей.
Готовые библиотеки для сброса
Зачастую удобно сбрасывать не только отступы, но и другие значения по умолчанию. Существуют уже готовые файлы сброса, сбрасывающие все лишние значения. Одним из популярных является сброс стилей от Эрика Мейера:
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video < margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; >/* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section < display: block; >body < line-height: 1; >ol, ul < list-style: none; >blockquote, q < quotes: none; >blockquote:before, blockquote:after, q:before, q:after < content: ''; content: none; >table < border-collapse: collapse; border-spacing: 0; >
Подключите описанный сброс к какому-нибудь HTML файлу. Посмотрите на внешний вид страницы по умолчанию, без ваших CSS стилей.
Нормализация стилей
Не обязательно сбрасывать все стили в ноль. Существует альтернативный подход, который называется . В этом подходе значения свойств не сбрасываются в ноль, а им указываются определенные значения, чтобы во всех браузерах стили по умолчанию были одинаковыми и удобными. Существуют готовые файлы со стилями нормализации, например, популярная библиотека normalize.css.
Подключите описанную библиотеку к какому-нибудь HTML файлу. Посмотрите на внешний вид страницы по умолчанию, без ваших CSS стилей.
Сброс стилей (CSS reset)
Цель сброса стилей состоит в том, чтобы уменьшить разность отступов, размеров шрифтов заголовков и т.д. заданных по умолчанию в разных браузерах.
Eric Meyer’s CSS Reset
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video < margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; >article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section < display: block; >html < height: 100%; >body < line-height: 1; >ol, ul < list-style: none; >blockquote, q < quotes: none; >blockquote:before, blockquote:after, q:before, q:after < content: ''; content: none; >table
Сжатая версия:
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section html body ol,ul blockquote,q blockquote:before,blockquote:after,q:before,q:after table
Normalize.css
Более расширенный сброс стилей (присутствуют стили для IE, iOS, Safari).
https://necolas.github.io/normalize.css
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ html < line-height: 1.15; -webkit-text-size-adjust: 100%; >body < margin: 0; >main < display: block; >h1 < font-size: 2em; margin: 0.67em 0; >hr < box-sizing: content-box; height: 0; overflow: visible; >pre < font-family: monospace, monospace; font-size: 1em; >a < background-color: transparent; >abbr[title] < border-bottom: none; text-decoration: underline; text-decoration: underline dotted; >b,strong < font-weight: bolder; >code,kbd,samp < font-family: monospace, monospace; font-size: 1em; >small < font-size: 80%; >sub,sup < font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; >sub < bottom: -0.25em; >sup < top: -0.5em; >img < border-style: none; >button,input,optgroup,select,textarea < font-family: inherit; font-size: 100%; line-height: 1.15; margin: 0; >button,input < overflow: visible; >button,select < text-transform: none; >button,[type="button"],[type="reset"],[type="submit"] < -webkit-appearance: button; >button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner < border-style: none; padding: 0; >button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring < outline: 1px dotted ButtonText; >fieldset < padding: 0.35em 0.75em 0.625em; >legend < box-sizing: border-box; color: inherit; display: table; max-width: 100%; padding: 0; white-space: normal; >progress < vertical-align: baseline; >textarea < overflow: auto; >[type="checkbox"],[type="radio"] < box-sizing: border-box; padding: 0; >[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button < height: auto; >[type="search"] < -webkit-appearance: textfield; outline-offset: -2px; >[type="search"]::-webkit-search-decoration < -webkit-appearance: none; >::-webkit-file-upload-button < -webkit-appearance: button; font: inherit; >details < display: block; >summary < display: list-item; >template < display: none; >[hidden]
Сжатая версия:
/*! normalize.css v3.0.1 | MIT License | git.io/normalize */ html body article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary audio,canvas,progress,video audio:not([controls]) [hidden],template a a:active,a:hover abbr[title] b,strong dfn h1 mark small sub,sup sup sub img svg:not(:root) figure hr pre code,kbd,pre,samp button,input,optgroup,select,textarea button button,select button,html input[type="button"],input[type="reset"],input[type="submit"] button[disabled],html input[disabled] button::-moz-focus-inner,input::-moz-focus-inner input input[type="checkbox"],input[type="radio"] input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button input[type="search"] input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration fieldset legend textarea optgroup table td,th
Сброс CSS стилей. Reset CSS
HTML, CSS
При HTML CSS верстке сайта, вы обязательно столкнетесь с тем чтобы изменять или обнулять CSS свойства элементов. Есть разные подходы того как это можно реализовывать.
Первый подход делать полный сброс стилей. Первым решением стал файл rest.css от mayerweb.
Второй подход, вместо полного сброса — приводить все единому виду. Первым популярным решением стал файл normalize.css от necolas.
Что выбрать, полный сброс или нормализацию? Все зависит от ваших задач. Взвесив все за и против, попробовав разные варианты, я пришел к решению полного сброса стилей. Это гораздо удобнее и экономит время при переопределении новых свойств.
За годы практики я выработал собственный вариант файла reset.css который рекомендую и использую сам. Ниже вы сможете увидеть его код. Возможно со временем он будет изменяться и правится. Но на текущем этапе это отличное решение для сброса стилей для HTML CSS верстки нового проекта.
Файл rest.css версия от ВебКадеми:
(обновлено 17.05.2023)
/* Reset and base styles */ * < padding: 0px; margin: 0px; border: none; >*, *::before, *::after < box-sizing: border-box; >/* Links */ a, a:link, a:visited < text-decoration: none; >a:hover < text-decoration: none; >/* Common */ aside, nav, footer, header, section, main < display: block; >h1, h2, h3, h4, h5, h6, p < font-size: inherit; font-weight: inherit; >ul, ul li < list-style: none; >img < vertical-align: top; >img, svg < max-width: 100%; height: auto; >address < font-style: normal; >/* Form */ input, textarea, button, select < font-family: inherit; font-size: inherit; color: inherit; background-color: transparent; >input::-ms-clear < display: none; >button, input[type=»submit»] < display: inline-block; box-shadow: none; background-color: transparent; background: 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