Урок 5.1 Сброс стилей: reset.css

resetcss

Сегодня давайте разберемся с таким часто встречающимся термином сброс стилей для сайта. Думаю, Вы часто встречали такой файл как reset.css, либо в css что то подобное * {margin:0; padding:0; } (вспомните Урок 5. Блочная верстка сайта: css файл. ) Если Вы хотите заниматься версткой сайта, то думаю надо также разобраться что это и с чем его едят. А если не хотите заниматься версткой , то для понимая что к чему также будет полезно. ;)

Давайте для начала рассмотрим пример без использования сброса стилей и со сбросом каскадный таблиц стилей. Увидели разницу?

Да, браузер для каждого html тега имеет стиль по умолчанию и что еще радостнее так они еще могут отличаться. Это с одной стороны плохо, потому как мы все знаем, что браузеры, как маленькие дети – за ними не уследишь, каждый имеет свои характер стили. Поэтому сбрасывая стиль, мы начинаем с чистого листа. Единственным минусом, наверное, дополнительный файл/строки в css файле, а значит увеличение размера.

Для того, чтобы начать работу с чистого листа, необходимо «обнулить» все стили по умолчанию, так? Ок, если Вы вспомните урок 5 по верстке сайтов, то вспомните как мы это делали, с помощью универсального кода:

* {
margin:0;
padding:0;
}

Есть? Отлично, теперь Вы понимаете для чего эта строчка там.

Давайте взглянем на нашу демо страницу с универсальным сбросом стилей сайта.

Заметили отличия? Совершенно верно мы сбросили только отступы, у таблиц осталась рамка, у заголовков стили font, а если углубляться то много еще чего. Но на первой демке был полный сброс, давайте теперь посмотрим как его сделать.

Reset.css

Плавно мы пришли к файлу reset.css. Самым популярным сбросом стилей для сайта (тот самый, что мы видели в примере) и одновременно наиболее полным является т. н. reset файл от Эрика Мейера. В статье CSS Tools: Reset CSS можете почитать о его достижении при создании данного кода:

/*
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. Зачем спросите Вы, для того чтобы по 100 раз не прописывать его на всех сайта, можно просто добавлять на разных проектах ссылку на данный файл:

<link href="http://site.kz/css/reset.css" rel="stylesheet" type="text/css" />

Согласитесь удобно. Но если у вас один блог/сайт, добавляйте в общий файл (style.css, template.css и т. д.), ничего страшного.

Еще одно общее условие для всех сбросов стилей — размещение в самом начале в стилях. Тут очевидная ситуация: для начала необходимо обнулить все стиле, а затем уже задавать тегам свои стили.

Css файл сканируется сверху вниз! Поэтому из 2-х одинаковых классов при равных условиях приоритетным будет тот, что находится ниже.

Мой файл reset.css

Смотря на файл от Эрика Мейера, Вам может в голову прийти такая мысль. У меня на сайт не используется и половина таких тегов, можно ли их не использовать? Сам Э. Майер говорит о том, что каждый может и должен его изменять под себя. Так что обязательно меняйте, модернизируйте экспериментируйте и пользуйтесь. ;)

Если Вы не используете html 5, удалите данный блок /* HTML5 display-role reset for older browsers */ …. { display:block; }

Yahoo reset.css

Из вышеизложенного понятно, что каждый может изменять и использовать свой reset файл, например, имени самого себя :)

Вот поэтому и у Yahoo есть свое видение на данную тему.

Можно взглянуть на наш пример в стиле Yahoo и увидеть отличия, сравнить и возможно Вам понравится данный сброс стилей.

Подключиться к стилям Яхуу можно добавив данную строку:

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.4.1/build/cssreset/cssreset-min.css">

Можно сохранить себе на хостинг.

Конечно, существуют и другие reset файлы, но напомню. Что самым часто используемым среди html верстальщиков является сброс стилей от Э. Майера, обычно, конечно, измененный. ;) Для первых шагов, думаю, будет достаточно простого его использования, либо есть всегда универсальный метод.

Теперь в комментариях прошу поделиться своим опытом по использованию сброса стилей, каким Вы пользуетесь?

Надеюсь данная статья была вам полезна. Подписывайтесь на обновления Уроков по блочной верстке сайтов.

с/у УтБ

Постовой: coding4.net – разработка игр на XNA и Silverlight

На десерт сегодня трейлер к фильму “Социальная сеть 2″, что то мне кажется, что это очередное псевдопродолжение, а как Вы думаете?



Комментарии к статье

  • #

    Полезность, есть! Для простых сайтов постоянно использую. Также слышал и читал – многие свой reset делают и применяют.

  • #

    хотелось бы услышать, чем reset.css отличается от normalize.css, и в каких случаях лучше применять reset а в каких normalize?

    • #

      решают одну проблему разными способами :)
      выбирайте то, что по душе

  • #

    Иногда от ресетов больше проблем, чем пользы

    • #

      например?)

  • #

    добавляейте, пожалуйста, в предыдущий урок ссылку на следующий

    • #

      ок.сделаю

  • #

    Хорошая статья, полезная информация, Спасибо!!!

  • #

    спасибо :wink: сохранила себе файлик. конечно там много тегов предназначение которых я даже не знаю, но все таки удалить лишние проще чем заново самой обнулять стили.