Подписка
Email
Fb
RSS
Twitter
Email

Сброс стилей CSS

Приветствую вас на страницах блога DenWeb.Ru. В этой небольшой статье речь пойдет о 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 Reset выбрать — решать вам.

Вы можете оставить комментарий.

16 комментариев к записи “Сброс стилей CSS”

  1. привет DenWeb! Вновь у меня вопрос. создал себе reset.css по последнему шаблону, подключил. У меня произошло следующее, то что было в тэгах <h1>,<h2> сбросилось и стало как обычные параграфы. Как быть? как сделать заголовком?

    • В основном файле стилей прописать отдельно свойства для h1, h2 и тд.

    • Вячеслав:

      Все правильно. Для того Reset и предназначен, чтобы сбросить все стили по умолчанию. Теперь Вы сами сможете оформить заголовки так как это требует дизайн, который Вы верстаете. И не опасаться, что в каком-нить браузере вылезет нне предусмотренное Вами свойство для этого заголовка. Главный признак хорошего резета —  все будет только так, как Вы сами прописали.

    • Вячеслав:

      P.S. И именно потому лично я считаю, что лучше не писать свой резет а использовать известный. Он много раз протестирован тысячами разработчиков в самых экзотических браузерах настроенных самым хитрым образом. Таких, о которых я и понятия не имею. А вот дополнить его своими любимыми стилями — дело хорошее ИМХО :-)

  2. Денис:

    У меня вопрос,через какую программу нужно открыть,чтобы написать это?Я воспользовался блакнотом??

  3. Ольга:

    Было бы неплохо, если бы Вы прокомментировали файл сброса отступов. Т.е. человек должен понимать что делает этот файл и для чего он нужен, а также как потом  восстановить «утраченные» стили. Заранее,спасибо)

  4. Самая лучшая программа для работы со стилями CSS — TopStyle — она может быть скачана как бесплатная, так можно и заплатить (если есть желание). При платном варианте функционал будет лушче, но бесплатной версии тоже вполне хватает.Вот ссылка на официальный сайт программы — http://www.topstyle4.com/

  5. Артемий:

    Могу дополнить некоторыми своими изысканиямиhttp://pihpi.ru/otlichie-brauzerov-ili-sbros-css

  6. Артур:

    как reset css подключить его  к основному CSS?

  7. Спасибо, как раз разбираюсь, что лучше использовать — сброс или нормализацию, пока что до сих пор не понимаю...

  8. Роман:

    Чем вообще заполнять CSS (что должно быть написано в первой строчке и последующих). дайте кто-нибудь свой пример CSS. Залейте на почту rublikinam@mail.ru

  9. Публикация полезная и нужная. Посмотрел, на сайте имеются и другие полезные материалы. Огромное спасибо!

  10. Да, очень полезная информация, Спасибо!

Оставить комментарий

Spam Protection by WP-SpamFree

Яндекс.Метрика