CSS. Сброс стилей, файл reset.css
25.12.2013
Теги: CSS • HTML • Web-разработка • Верстка
Каждый браузер устанавливает свои значения стилей по умолчанию для различных HTML-элементов. С помощью reset.css мы можем нивелировать эту разницу для обеспечения кроссбраузерности стилей. Cброс ситлей впервые был применён в далёком 2004 году Эндрю Креспанисом и это выглядело так:
* {
margin: 0;
padding: 0;
}
Вскоре после этого, CSS-гуру Эрик Мейер производит дальнейшие исследования вышеописанного приёма сброса отступов. После многочисленных переделок и уточнений, получился такой reset.css:
/*
http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
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;
}
Существует много версий файла reset.css, на вкус и цвет товарищей нет:
html, body, div, a, span, h1, h2, h3, h4, h5, h6, p, em, img, strong, sub, sup, b, u, i,
dl, dt, dd, ol, ul, li, fieldset, form, label, table, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav,
section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
outline: 0; /* обнуляем отступы и убираем бордюры */
vertical-align: baseline; /* приводим все к одной базовой линии */
background: transparent; /* чтобы не проскакивали фоны, установленные по умолчанию */
font-size: 100%; /* размер шрифта всем одинаковый */
}
table { /* устраняем отступы между ячейками таблицы */
border-collapse: collapse;
border-spacing: 0;
}
td, td img {
vertical-align: top; /* возвращаем привычное вертикальное выравнивание */
}
input, select, button, textarea {
margin: 0; /* убираем отступы для элементов форм (в частности, для checkbox и radio) */
font-size: 100%; /* делаем размер шрифтов везде одинаковым */
outline: none;
}
input[type="text"], input[type="password"], textarea {
padding: 0; /* убираем внутренние отступы для текстовых полей */
}
input[type="checkbox"] { /* вертикальное выравнивание чекбоксов относительно меток */
vertical-align: bottom;
}
input[type="radio"] { /* вертикальное выравнивание радиобатонов относительно меток */
vertical-align: text-bottom;
}
sub {
vertical-align: sub;
font-size: smaller;
}
sup {
vertical-align: super;
font-size: smaller;
}
article, aside, details, figcaption, figure, footer,
header, hgroup, menu, nav, section {
display: block; /* это блочные элементы */
}Есть еще несколько стилей, которые используются практически в каждом проекте:
html {
box-sizing: border-box; /* определение блочной модели */
}
*, *::before, *::after {
box-sizing: inherit; /* определение блочной модели */
}
h1, h2, h3, h4, h5, h6 { /* все заголовки нормальным шрифтом, не жирные */
font-weight: normal;
}
img { /* большие изображения не должны выходить за пределы контейнера */
max-width: 100%;
}
.clear { /* очищающий блок после плавающих элементов */
clear: both;
}
.clearfix::after { /* очищающий блок для контейнера, содержащего плавающие элементы */
clear: both;
content: "";
display: table;
}Поиск: CSS • HTML • Web-разработка • Верстка