Как сбросить все стили css. Сброс стилей с помощью CSS Reset
В этой небольшой статье речь пойдет о CSS Reset. Что же это такое?
CSS Reset — это основа CSS.
Начнем с того, что html элементы изначально имеют определенный набор свойств и значений, некоторые из которых определяются каждым браузером по-разному. И как раз для того, чтобы вид вашей html страницы не зависел от того, с помощью какого браузера ее просматривают, и используется CSS Reset.
Это как бы основа, а точнее первые правила css документа.
Он создан для того, чтобы установить значения свойств элементов в нужное состояние, с которым в дальнейшем нам будет удобно работать. Другими словами — это сброс css стилей .
CSS Reset — это по сути мини фреймворк, набор css свойств для html документов. В самом простом виде он выглядит так: * {padding: 0; margin: 0} , то есть для всех элементов страницы мы задаем нулевые внешние и внутренние отступы.
Как его создать?
Я считаю, что каждый веб разработчик должен для себя написать свой CSS Reset, который ему удобно будет использовать. Конечно, есть уже готовые решения. Давайте рассмотрим некоторые из них.
CSS Reset от Chris Poteet .
* { vertical-align: baseline; font-family: inherit; font-style: inherit; font-size: 100%; border: none; padding: 0; margin: 0; } body { padding: 5px; } h1, h2, h3, h4, h5, h6, p, pre, blockquote, form, ul, ol, dl { margin: 20px 0; } li, dd, blockquote { margin-left: 40px; } table { border-collapse: collapse; border-spacing: 0; }CSS Reset от Yahoo .
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre, form,fieldset,input,textarea,p,blockquote,th,td { padding: 0; margin: 0; } table { border-collapse: collapse; border-spacing: 0; } fieldset,img { border: 0; } address,caption,cite,code,dfn,em,strong,th,var { font-weight: normal; font-style: normal; } ol,ul { list-style: none; } caption,th { text-align: left; } h1,h2,h3,h4,h5,h6 { font-weight: normal; font-size: 100%; } q:before,q:after { content:""; } abbr,acronym { border: 0; }И еще один сброс стилей , который мне больше всего по душе. Он адаптирован под HTML5.
Cброс стилей от Eric Mayer
/* 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, и подключать его к основному css. Это удобно, данный файл можно использовать во многих проектах, просто скопировав его в папку с css и подключив к основному файлу стилей.
Сброс CSS (сброс стилей) - это обнуление с помощью CSS, некоторых параметров HTML-элементов, которые браузеры устанавливают по умолчанию. Например, к таким элементам можно отнести параграфы (тег ), у которых изначально присутствуют ненулевые вертикальные поля (CSS ), маркированные списки (тег ), которые имеют уже не только поля, но и маркеры определенного типа (CSS ) и так далее.
Теперь давайте подумаем, для чего нужен этот сброс CSS, что он может нам дать? Хорошо, представьте, что вы сверстали страницы своего сайта и при этом не изменили поля параграфов, которые браузеры предложили по умолчанию, так как их размер вас вполне устроил. Но скажите мне, пожалуйста, а с чего вы решили, что все браузеры мира, которые уже существуют и еще появятся, будут создавать поля такого же размера? Более того, почему вы думаете, что те браузеры, в которых вы тестировали свою верстку, не изменят в своих следующих версиях размер этих полей или вообще их не уберут? Чувствуете, чем пахнет?
Так вот, сбрасывая CSS, верстальщики просто подстраховываются от подобных недоразумений, то есть они сначала обнуляют у элементов все «критические» значения свойств CSS, а потом по мере необходимости добавляют обратно, но уже со своими размерами. Таким образом, можно быть уверенным, что во всех браузерах сайт будет выглядеть одинаково. Можно конечно и не сбрасывать стили, а просто по ходу верстки задавать нужные параметры элементам, но здесь есть риск, что где-то что-то будет упущено и в определенный момент все «поплывет».
Исходя из вышесказанного, одной из особенностей сброса CSS является то, что после его применения многие HTML-элементы теряют свой привычный внешний вид. И если потеря полей у параграфов является для новичков чем-то ожидаемым, то например тот факт, что кнопки созданные с помощью тегов или вдруг стали внешне похожи на обычный текст - является полной неожиданностью. Но это не должно вас смущать, ведь для того стили и сбрасываются, чтобы верстальщик потом не забыл указать их по новой.
Способов сброса стилей существует очень много, и какой выберете вы - зависит только от вас, но могу вам сказать одно - лучший сброс это тот, который вы создали сами, основываясь на своем опыте и привычках. Если же такого опыта у вас пока нет, то можете воспользоваться одним из вариантов предложенных ниже.
Всегда указывайте стили для сброса 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. Но как вы уже знаете, на практике все это совершенно не так и если свойство действительно наследуется элементами от своих родителей во всех ведущих браузерах, то те же внешние поля, заданные свойством CSS совсем не всегда изначально равны нулю.
А вот размеры рамок (CSS ) и контуров (CSS ) по умолчанию не равны нулю, но уже согласно спецификации. Однако и их толщина была обнулена, чтобы верстальщик не забыл указать ее явно там, где это потребуется.
Сброс 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 */ }Описание примера
Компания Яху в свое время разработала свой вариант сброса стилей. Здесь уже изменяются свойства конкретных элементов, что позволяет достичь большей гибкости в управлении их внешним видом. Например, тут убраны маркеры у списков, а у тега - кавычки с помощью свойства CSS . Плюсы такого подхода очевидны, а вот к минусам можно отнести более объемный и подчас избыточный код. Но ведь никто не мешает вам изменить любой сброс 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, которые, кстати, на момент написания этой статьи и сами-то еще очень плохо поддерживались современными браузерами. Но ведь всегда нужно смотреть в перспективу, верно?
На самом деле эту статью можно было бы продолжать до бесконечности, так как, повторяю в очередной раз, в определенный момент каждый верстальщик приходит к своему варианту сброса либо не использует его вообще, полагаясь на свою внимательность.
От автора: сайтостроение в Сети бывает похоже на строительство на зыбучих песках. Браузеры делают все то же, но время от времени у них получаются раздражающе непредсказуемые отличия. Например, у всех браузеров есть «таблицы стилей user agent» - набор стилей CSS по умолчанию, чтобы заголовок выглядел заголовком и т.д., еще до назначения вами стилей странице1. Конечно, в каждом браузерном движке наборы по умолчанию применяются немного разные.
Одним из примеров являлись стили списка по умолчанию, где изначально в браузерных таблицах стилей по умолчанию Internet Explorer’а и Opera был отступ списка margin-left: 30pt;, тогда как Firefox и KHTML шли с padding-left: 40px;. Если вам хотелось изменить отступ по умолчанию, определив ul {padding-left: 0;}, то в браузерах это приводило к очень разным результатам.
СБРОС ИСХОДНЫХ НАСТРОЕК CSS
Чтобы добиться небольшой стабильности, некоторые разработчики сбрасываю все поля и отступы с помощью универсального селектора:
* {margin: 0; padding: 0;}
* { margin : 0 ; padding : 0 ; } |
Определив отступ списка и начав с этого свою таблицу стилей, вы получите то, что ожидали. Однако применение * означало, что поле и отступ по умолчанию «грохнулись» для всех элементов и, как только вы добавляли элемент form, становилось совсем тяжко.
Цель сброса состоит в том, чтобы обнулить все, что можно… [и] послужить стартовой точкой ваших собственных основных стилей - Эрик Майер (Eric Meyer)
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; }
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 ; |
Он делает сброс некоторых свойств многих (но не всех) элементов до эквивалента простого текста. Так как сбрасываются только соответствующие элементы, таким образом обходятся некоторые проблемы * {margin: 0; padding: 0;}. Затем мы можем определять стили для этих сброшенных «обесстиленных» свойств, будучи уверенными в том, что строим на стабильной кроссбраузерной основе. Такое назначение стилей, кроме того, действует как сигнализатор потребности в осознанной установке подходящих стилей для этих элементов.
ПРОБЛЕМЫ СБРОСА НАСТРОЕК CSS
Сбросы CSS были настоящим спасением, но сейчас, особенно при условии возвышения каркасов-фреймов, они часто используются «как есть». Например, Эрик предполагал, что другие разработчики начнут строить сайты на предложенных им стилях сброса, соответствующим образом отменяя их, и в первую версию Meyer Reset временно включалось это правило:
/* помните о том, что нужно определить стили фокуса! */ :focus { outline: 0; }
К сожалению, на деле не все определяли стили фокуса, и из второй версии Эрик его удалил.
Применяя сбросы, ощущаешь себя немного извращенцем. Сброс стилей браузера по умолчанию заставляет размышлять о том, как должен показываться каждый элемент, помогая убедиться, что элементы применяются по семантике, а не стилям по умолчанию. Но для элементов вроде i и em почти всегда имеется стиль браузера по умолчанию. Другие браузерные стили по умолчанию, такие, как бывший некогда смехотворно большим размер текста заголовков, изменились и по умолчанию стали довольно сносными. Проблемы начинаются, когда кто-то хочет после передачи применить сброшенный элемент HTML только с назначенными «обесстиленными» стилями сброса.
Для меня важнейшей проблемой сбросов является наследование, ведущее к спаму в браузерных инструментах. При попытке отследить в чужом коде проблему CSS глубоко вложенного элемента это не поможет:
Правила сброса CSS, повторяемые по причине наследования
NORMALIZE.CSS
Николас Галлахер (Nicolas Gallagher) и Джонатан Нил (Jonathan Neal) предприняли иной подход с помощью Normalize.css , «маленького файла CSS, гарантирующего лучшую кроссбраузерную последовательность в стилях по умолчанию элементов HTML». Как и в случае со сбросами CSS, он дает нам надежную кроссбраузерную стартовую точку - в первую очередь основную причину применения сброса - но два этих подхода разнятся с философской точки зрения.
Сбросы CSS отменяют стили агента пользователя и возвращают множество элементов к их «обесстиленному» состоянию, некому ровному основанию, на котором можно безопасно строить. Однако затем нужно назначить стили большей части элементов до того, как мы сможем строить с их помощью. Вместо этого Normalize.css адресуется только к несообразностям стилей агента пользователя, выбирая самые подходящие настройки по умолчанию, в чем и заключается различие. Здесь мы тоже получаем безопасный кроссбраузерный фундамент, но такой, который включает нормализованные стили агента пользователя в качестве готовых к использованию базовых строительных материалов. В основном это нечто вроде идеализированной кроссбраузерной версии таблицы стилей по умолчанию CSS 2.1. В обоих случаях мы затем должны добавлять собственные доминирующие стили для создания изображения, но оттого, что настройки браузера по умолчанию в Normalize.css остаются, в общем приходится добавлять меньше стилей.
Так как изменения в Normalize.css более адресные, в ваших браузерных инструментах разработки отсутствует каскад наследования переписанных правил. Вот простой ul:, «обесстиленный» с помощью Meyer Reset и Normalize.css версий 1 и 2:
«Обесстиленный» элемент неупорядоченного списка
Применяем Meyer Reset
Применяем Normalize.css v1
Applying Normalize.css v2
Явно видна разница в философии, когда пример Meyer Reset появляется как пара строк простого текста без полей, отступа или маркеров, тогда как примеры Normalize.css похожи на стили по умолчанию. Разница в стилях, примененных к этому ul, тоже легко заметна.
Однако это не все стили, примененные к ul. Для сравнения вот вам тот же самый «обесстиленный» скриншот, но с видимыми стилями агента пользователя, в Firefox 21 и Opera Next 15.
Многие верстальщики используются так называемый CSS Reset , служащий для устранения особенностей разных браузеров. Фактически, данный файл стилей сбрасывает все CSS-свойства по умолчанию . В этой статье я продемонстрирую код этого файла и расскажу, стоит использовать CSS Reset или нет .
Я видел много различных 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, font, 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 {
background: transparent;
border: 0;
font-size: 100%;
margin: 0;
outline: 0;
padding: 0;
vertical-align: baseline;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
content: none;
}
:focus {
outline: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
Думаю, чем его использование обусловлено и так понятно, а вот почему его, например, я не использую, как и многие другие верстальщики, об этом стоит рассказать. Во-первых, это лишний файл , во-вторых, лишнее время на обработку, но самое главное - мне нравятся свойства по умолчанию. Например, те же поля у таблицы. Ведь все свойства по умолчанию делали не просто так, а как наиболее оптимальный вариант отображения различных элементов. Уверяю Вас, обнулив padding у ячеек таблицы, скорее всего, Вы его вернёте в основном файле. И далеко не факт, что значение будет отличаться от того, что было по умолчанию. Вот и получается, что мы сначала это убираем, а затем это же возвращаем. А вместе с первыми недостатками (лишний файл и лишний код) многие верстальщики и вовсе не используют CSS Reset .
В любом случае, использование сброса стилей не является чем-то плохим , поэтому можете смело его использовать, если Вы считаете, что упрощение адаптации сайта под различные браузеры действительно упростит Вам вёрстку в целом.
В этой статье мы поговорим о сбросе стилей и рассмотрим пример создания такого файла reset.css .
Идея броса стилей появилась около 10 лет назад. Которая собственно заключалась в том, чтобы при помощи небольшого набора CSS стилей привести вид страницы во всех браузерах к одинаковому. Конечно не всегда это получается, но некоторые моменты можно исправить - например border не понятно откуда берущийся в некоторых версиях IE . Или синяя обводка (outline ) у полей.
Не для одного front-end разработчика не секрет, что браузеры очень привередливы и каждый обрабатывает элементы HTML по своему, добавляя свои стандартные стили.
Так как этой идей загорелись давно, не удивительно, что есть уже готовые файлы сброса, обычно их называют reset.css , и подключают ко всем проектам.
Почему в отдельном файле? Да просто по тому, что так удобнее их переносить от проекта к проекту.
Вот пример reset.css от 2007 года:
/* 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; }
Это лишь стандарт этого файла принятый определнным кругом веб-разработчиков.
Я же советую вам, будь вы опытным программистом или только начинающим разработать свой файл сброса. За основу можно взять вышеописанный стандарт, дополнить его своими селекторами или изменить существующие. Вот пример такого файла, который я разработал для себя:
input, textarea,a , button, select{outline:none} img {border:none;} hr { clear:both; border:none; background:none; } * { background-repeat:no-repeat; } /* 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; margin:0; padding:0; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ""; content: none; } table { border-collapse: collapse; border-spacing: 0; }
Вы можете коппировать любой вышеуказанный код для личного использования, но если будете использовать его в своих статьях - ставьте ссылку на источник.