Gtalk.kz

Сегодня давайте разберемся с таким часто встречающимся термином сброс стилей для сайта. Думаю, Вы часто встречали такой файл как 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″, что то мне кажется, что это очередное псевдопродолжение, а как Вы думаете?