Сброс CSS
Сброс CSS (сброс стилей) — это обнуление с помощью CSS, некоторых параметров HTML-элементов, которые браузеры устанавливают по умолчанию. Например, к таким элементам можно отнести параграфы (тег <P>), у которых изначально присутствуют ненулевые вертикальные поля (CSS margin), маркированные списки (тег <UL>), которые имеют уже не только поля, но и маркеры определенного типа (CSS list-style-type) и так далее.
Теперь давайте подумаем, для чего нужен этот сброс CSS, что он может нам дать? Хорошо, представьте, что вы сверстали страницы своего сайта и при этом не изменили поля параграфов, которые браузеры предложили по умолчанию, так как их размер вас вполне устроил. Но скажите мне, пожалуйста, а с чего вы решили, что все браузеры мира, которые уже существуют и еще появятся, будут создавать поля такого же размера? Более того, почему вы думаете, что те браузеры, в которых вы тестировали свою верстку, не изменят в своих следующих версиях размер этих полей или вообще их не уберут? Чувствуете, чем пахнет?
Так вот, сбрасывая CSS, верстальщики просто подстраховываются от подобных недоразумений, то есть они сначала обнуляют у элементов все «критические» значения свойств CSS, а потом по мере необходимости добавляют обратно, но уже со своими размерами. Таким образом, можно быть уверенным, что во всех браузерах сайт будет выглядеть одинаково. Можно конечно и не сбрасывать стили, а просто по ходу верстки задавать нужные параметры элементам, но здесь есть риск, что где-то что-то будет упущено и в определенный момент все «поплывет».
Исходя из вышесказанного, одной из особенностей сброса CSS является то, что после его применения многие HTML-элементы теряют свой привычный внешний вид. И если потеря полей у параграфов является для новичков чем-то ожидаемым, то например тот факт, что кнопки созданные с помощью тегов <BUTTON> или <INPUT> вдруг стали внешне похожи на обычный текст — является полной неожиданностью. Но это не должно вас смущать, ведь для того стили и сбрасываются, чтобы верстальщик потом не забыл указать их по новой.
Способов сброса стилей существует очень много, и какой выберете вы — зависит только от вас, но могу вам сказать одно — лучший сброс это тот, который вы создали сами, основываясь на своем опыте и привычках. Если же такого опыта у вас пока нет, то можете воспользоваться одним из вариантов предложенных ниже.
Всегда указывайте стили для сброса CSS в самом начале кода, иначе некоторые из параметров могут не сработать из-за приоритетов стилей, которые устанавливаются браузерами при обработке HTML-страницы и кода CSS.
Сброс CSS с помощью универсального селектора
* {
font-family: inherit; /* все элементы наследуют от своего родителя гарнитуру шрифта */
font-style: inherit; /* наследуют начертание */
font-weight: inherit; /* наследуют жирность */
vertical-align: baseline; /* вертикальное выравнивание по базовой линии */
font-size: 100%; /* размер шрифта 100% */
background: transparent; /* фон всех элементов прозрачный */
border: 0; /* убираем рамки */
outline: 0; /* убираем контуры */
margin: 0; /* убираем поля */
padding: 0; /* убираем отступы */
}Описание примера
В этом примере с помощью универсального селектора указанные стили сбрасываются сразу у всех HTML-элементов, которые будут присутствовать на странице. Как видите, большинство свойств указано именно для подстраховки, так как их значения и так соответствуют тем, которые браузеры должны подставлять по умолчанию согласно спецификации CSS. Но как вы уже знаете, на практике все это совершенно не так и если свойство font-family действительно наследуется элементами от своих родителей во всех ведущих браузерах, то те же внешние поля, заданные свойством CSS margin совсем не всегда изначально равны нулю.
А вот размеры рамок (CSS border) и контуров (CSS outline) по умолчанию не равны нулю, но уже согласно спецификации. Однако и их толщина была обнулена, чтобы верстальщик не забыл указать ее явно там, где это потребуется.
Сброс CSS от Yahoo!
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
form,fieldset,input,textarea,p,blockquote,th,td {
margin: 0;
padding: 0;
}
fieldset,img,abbr,acronym {
border: 0;
}
address,caption,cite,code,dfn,em,strong,th,var {
font-style: normal;
font-weight: normal;
}
table {
border-collapse: collapse; /* общие границы для ячеек таблиц */
border-spacing: 0; /* обнуление расстояния между ячейками */
}
caption,th {
text-align: left; /* выравнивание текста по левому краю */
}
ol,ul {
list-style: none; /* убираем маркеры списков */
}
h1,h2,h3,h4,h5,h6 {
font-size: 100%;
font-weight: normal;
}
q:before,q:after {
content: ''; /* отменяем кавычки у тега Q */
}Описание примера
Компания Яху в свое время разработала свой вариант сброса стилей. Здесь уже изменяются свойства конкретных элементов, что позволяет достичь большей гибкости в управлении их внешним видом. Например, тут убраны маркеры у списков, а у тега <Q> — кавычки с помощью свойства CSS content. Плюсы такого подхода очевидны, а вот к минусам можно отнести более объемный и подчас избыточный код. Но ведь никто не мешает вам изменить любой сброс CSS под свои нужды. Допустим, вы можете удалить некоторые ненужные вам селекторы тегов или не просто убрать кавычки, а сразу задать им необходимый внешний вид.
Сброс 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;
}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
display: block; /* делаем элементы блочными (для старых браузеров) */
}
body {
line-height: 1; /* межстрочный интервал текста на странице */
}
ol,ul {
list-style: none;
}
blockquote:before,blockquote:after,
q:before,q:after {
content: ''; /* Убираем кавычки у Q и BLOCKQUOTE */
content: none; /* добавляем для верности */
}
blockquote,q {
quotes: none; /* еще один способ убрать кавычки */
}
table {
border-collapse: collapse;
border-spacing: 0;
}Описание примера
Очередной способ сброса CSS предложил Эрик Мейер (Eric Meyer) — известный в определенных кругах веб-разработчик. Здесь он уже добавил сброс стилей для тегов из HTML 5, которые, кстати, на момент написания этой статьи и сами-то еще очень плохо поддерживались современными браузерами. Но ведь всегда нужно смотреть в перспективу, верно?
На самом деле эту статью можно было бы продолжать до бесконечности, так как, повторяю в очередной раз, в определенный момент каждый верстальщик приходит к своему варианту сброса либо не использует его вообще, полагаясь на свою внимательность.