Сброс стилей (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 стилей.
Готовые библиотеки для сброса
Зачастую удобно сбрасывать не только отступы, но и другие значения по умолчанию. Существуют уже готовые файлы сброса, сбрасывающие все лишние значения. Одним из популярных является сброс стилей от Эрика Мейера:
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 стилей.