Сброс всех стилей css. Сброс CSS стилей, примеры работающих решений

Сброс CSS (сброс стилей) - это обнуление с помощью CSS, некоторых параметров HTML-элементов, которые браузеры устанавливают по умолчанию. Например, к таким элементам можно отнести параграфы (тег ), у которых изначально присутствуют ненулевые вертикальные поля (CSS ), маркированные списки (тег ), которые имеют уже не только поля, но и маркеры определенного типа (CSS ) и так далее.

Теперь давайте подумаем, для чего нужен этот сброс CSS, что он может нам дать? Хорошо, представьте, что вы сверстали страницы своего сайта и при этом не изменили поля параграфов, которые браузеры предложили по умолчанию, так как их размер вас вполне устроил. Но скажите мне, пожалуйста, а с чего вы решили, что все браузеры мира, которые уже существуют и еще появятся, будут создавать поля такого же размера? Более того, почему вы думаете, что те браузеры, в которых вы тестировали свою верстку, не изменят в своих следующих версиях размер этих полей или вообще их не уберут? Чувствуете, чем пахнет?

Так вот, сбрасывая CSS, верстальщики просто подстраховываются от подобных недоразумений, то есть они сначала обнуляют у элементов все «критические» значения свойств CSS, а потом по мере необходимости добавляют обратно, но уже со своими размерами. Таким образом, можно быть уверенным, что во всех браузерах сайт будет выглядеть одинаково. Можно конечно и не сбрасывать стили, а просто по ходу верстки задавать нужные параметры элементам, но здесь есть риск, что где-то что-то будет упущено и в определенный момент все «поплывет».

Исходя из вышесказанного, одной из особенностей сброса CSS является то, что после его применения многие HTML-элементы теряют свой привычный внешний вид. И если потеря полей у параграфов является для новичков чем-то ожидаемым, то например тот факт, что кнопки созданные с помощью тегов или вдруг стали внешне похожи на обычный текст - является полной неожиданностью. Но это не должно вас смущать, ведь для того стили и сбрасываются, чтобы верстальщик потом не забыл указать их по новой.

Способов сброса стилей существует очень много, и какой выберете вы - зависит только от вас, но могу вам сказать одно - лучший сброс это тот, который вы создали сами, основываясь на своем опыте и привычках. Если же такого опыта у вас пока нет, то можете воспользоваться одним из вариантов предложенных ниже.

Всегда указывайте стили для сброса CSS в самом начале кода, иначе некоторые из параметров могут не сработать из-за приоритетов стилей , которые устанавливаются браузерами при обработке HTML-страницы и кода CSS.

Сброс CSS с помощью универсального селектора

Описание примера

В этом примере с помощью универсального селектора указанные стили сбрасываются сразу у всех HTML-элементов, которые будут присутствовать на странице. Как видите, большинство свойств указано именно для подстраховки, так как их значения и так соответствуют тем, которые браузеры должны подставлять по умолчанию согласно спецификации CSS. Но как вы уже знаете, на практике все это совершенно не так и если свойство действительно наследуется элементами от своих родителей во всех ведущих браузерах, то те же внешние поля, заданные свойством CSS совсем не всегда изначально равны нулю.

А вот размеры рамок (CSS ) и контуров (CSS ) по умолчанию не равны нулю, но уже согласно спецификации. Однако и их толщина была обнулена, чтобы верстальщик не забыл указать ее явно там, где это потребуется.

Сброс CSS от Yahoo!

Описание примера

Компания Яху в свое время разработала свой вариант сброса стилей. Здесь уже изменяются свойства конкретных элементов, что позволяет достичь большей гибкости в управлении их внешним видом. Например, тут убраны маркеры у списков, а у тега - кавычки с помощью свойства CSS . Плюсы такого подхода очевидны, а вот к минусам можно отнести более объемный и подчас избыточный код. Но ведь никто не мешает вам изменить любой сброс CSS под свои нужды. Допустим, вы можете удалить некоторые ненужные вам селекторы тегов или не просто убрать кавычки, а сразу задать им необходимый внешний вид.

Сброс CSS от Эрика Мейера

Описание примера

Очередной способ сброса CSS предложил Эрик Мейер (Eric Meyer) - известный в определенных кругах веб-разработчик. Здесь он уже добавил сброс стилей для тегов из HTML 5, которые, кстати, на момент написания этой статьи и сами-то еще очень плохо поддерживались современными браузерами. Но ведь всегда нужно смотреть в перспективу, верно?

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

Многие верстальщики используются так называемый 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 .

В любом случае, использование сброса стилей не является чем-то плохим , поэтому можете смело его использовать, если Вы считаете, что упрощение адаптации сайта под различные браузеры действительно упростит Вам вёрстку в целом.

В этой небольшой статье речь пойдет о 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 .

CSS Reset от Yahoo .

И еще один сброс стилей , который мне больше всего по душе. Он адаптирован под HTML5.

Cброс стилей от Eric Mayer

При верстке сайтов правильнее писать сброс стилей в отдельном файле reset.css, и подключать его к основному css. Это удобно, данный файл можно использовать во многих проектах, просто скопировав его в папку с css и подключив к основному файлу стилей.

• Перевод

Данная статья - первая из цикла на тему укрощения CSS. Сегодня мы рассмотрим технологию CSS Reset .

Зачем это нужно?

Например, вы используете элемент a в вашем документе. Большинство браузеров, как Internet Explorer и Firefox, добавляют ссылке синий цвет и подчёркивание . Однако представьте, что через пять лет кто-то решил создать новый браузер (назовём его UltraBrowser). Разработчикам браузера не нравился синий цвет и раздражало подчёркивание, поэтому они решили выделять ссылки красным цветом и полужирным шрифтом . Именно исходя из этого, если вы установите базовое значение стилей для элемента a , то он гарантированно будет таким, каким вы хотите его видеть, а не как предпочитают его отображать разработчики UltraBrowser.

Но теперь у нас вообще нет никаких отступов, в том числе между отдельными параграфами! Что делать? Не врать и не бояться: ниже нашего сброса мы опишем нужное нам правило. Сделать это можно разными способами: указать отступ снизу или сверху параграфа, указать его в процентах, пикселях или в em.

Самое главное, браузер теперь играет по нашим правилам, а не мы по его. Я решил сделать подобным образом:

* { margin: 0; padding: 0; } p { margin: 5px 0 10px 0; }

В итоге у нас получилось то, что можно увидеть в третьем примере .

Вы можете создать собственные стили для сброса, если вы решаете какую-то конкретную задачу в своём проекте. Несмотря на это, не существует пошагового руководства по созданию собственного CSS Reset. Опирайтесь на собственные принципы и собственный стиль.

Чтобы помочь вам правильно сделать выбор, приведу ещё пару ссылок:

1. Less is more - my choice of Reset CSS (Эд Эллиот).

2. Ваш CSS Reset - это первое, что должен увидеть браузер

Да, я понимаю, это прозвучало смешно, но это одна из основных ошибок разработчиков от мала до велика. Многие просто об этом забывают.

Некоторые могут задать логичный вопрос: почему так происходит? Ответ прост: правила, записанные ниже по тексту CSS-файла (и даже ниже по их порядку подключения в документе), перезаписывают правила, объявленные ранее.

Давайте не будем сильно отходить от темы и продолжим. Применим стили Эрика Мейера к нашему примеру, но после описания наших свойств, как показано в 4 примере . Математики бы сказали следующее: «Что и требовалось доказать».

3. Используйте отдельный CSS-документ для CSS Reset

На самом деле я придерживаюсь позиции создания одного большого CSS-файла из-за большей производительности подобного подхода. Но в данном вопросе я склонен согласиться с большинством: CSS Reset следует вынести в отдельный файл (обычно его называют reset.css). В таком случае вы можете использовать его в различных проектах, не прилагая при этом никаких усилий по его отделению от других правил CSS.

4. Старайтесь избегать использование универсального селектора

Данный совет особенно важен тогда, когда вы разрабатываете такие решения, как темы для CMS. Вы не можете заранее предсказать, как она будет использована и как её будут модифицировать. Лучше описать фундаментальные CSS-правила для всех элементов, чем использовать для этого непредсказуемый (пусть и меньший по объёму) механизм универсальных селекторов.

5. Избегайте избыточных описаний свойств при использовании CSS Reset

Вернёмся к CSS Reset от Эрика. Он устанавливает значения по умолчанию для line-height, color и background элемента body следующим образом:

body { line-height: 1; color: black; background: white; }

1. background-color: #cccccc;
2. color: #996633;
3. Вы хотите по горизонтали повторять определённую фоновую картинку.

В этом случае нет необходимости создавать новый селектор для описания ваших свойств - вы можете их просто включить в CSS Reset. Сделаем это:

body { line-height: 1; color: #996633; background:#ccc url(tiled-image.gif) repeat-x top left; }

Эрик Мейер по этому поводу сказал следующее: «это не тот случай, когда всем следует использовать CSS Reset без изменений».

• Перевод

Данная статья - первая из цикла на тему укрощения CSS. Сегодня мы рассмотрим технологию CSS Reset .

Зачем это нужно?

Например, вы используете элемент a в вашем документе. Большинство браузеров, как Internet Explorer и Firefox, добавляют ссылке синий цвет и подчёркивание . Однако представьте, что через пять лет кто-то решил создать новый браузер (назовём его UltraBrowser). Разработчикам браузера не нравился синий цвет и раздражало подчёркивание, поэтому они решили выделять ссылки красным цветом и полужирным шрифтом . Именно исходя из этого, если вы установите базовое значение стилей для элемента a , то он гарантированно будет таким, каким вы хотите его видеть, а не как предпочитают его отображать разработчики UltraBrowser.

Но теперь у нас вообще нет никаких отступов, в том числе между отдельными параграфами! Что делать? Не врать и не бояться: ниже нашего сброса мы опишем нужное нам правило. Сделать это можно разными способами: указать отступ снизу или сверху параграфа, указать его в процентах, пикселях или в em.

Самое главное, браузер теперь играет по нашим правилам, а не мы по его. Я решил сделать подобным образом:

* { margin: 0; padding: 0; } p { margin: 5px 0 10px 0; }

В итоге у нас получилось то, что можно увидеть в третьем примере .

Вы можете создать собственные стили для сброса, если вы решаете какую-то конкретную задачу в своём проекте. Несмотря на это, не существует пошагового руководства по созданию собственного CSS Reset. Опирайтесь на собственные принципы и собственный стиль.

Чтобы помочь вам правильно сделать выбор, приведу ещё пару ссылок:

1. Less is more - my choice of Reset CSS (Эд Эллиот).

2. Ваш CSS Reset - это первое, что должен увидеть браузер

Да, я понимаю, это прозвучало смешно, но это одна из основных ошибок разработчиков от мала до велика. Многие просто об этом забывают.

Некоторые могут задать логичный вопрос: почему так происходит? Ответ прост: правила, записанные ниже по тексту CSS-файла (и даже ниже по их порядку подключения в документе), перезаписывают правила, объявленные ранее.

Давайте не будем сильно отходить от темы и продолжим. Применим стили Эрика Мейера к нашему примеру, но после описания наших свойств, как показано в 4 примере . Математики бы сказали следующее: «Что и требовалось доказать».

3. Используйте отдельный CSS-документ для CSS Reset

На самом деле я придерживаюсь позиции создания одного большого CSS-файла из-за большей производительности подобного подхода. Но в данном вопросе я склонен согласиться с большинством: CSS Reset следует вынести в отдельный файл (обычно его называют reset.css). В таком случае вы можете использовать его в различных проектах, не прилагая при этом никаких усилий по его отделению от других правил CSS.

4. Старайтесь избегать использование универсального селектора

Данный совет особенно важен тогда, когда вы разрабатываете такие решения, как темы для CMS. Вы не можете заранее предсказать, как она будет использована и как её будут модифицировать. Лучше описать фундаментальные CSS-правила для всех элементов, чем использовать для этого непредсказуемый (пусть и меньший по объёму) механизм универсальных селекторов.

5. Избегайте избыточных описаний свойств при использовании CSS Reset

Вернёмся к CSS Reset от Эрика. Он устанавливает значения по умолчанию для line-height, color и background элемента body следующим образом:

body { line-height: 1; color: black; background: white; }

1. background-color: #cccccc;
2. color: #996633;
3. Вы хотите по горизонтали повторять определённую фоновую картинку.

В этом случае нет необходимости создавать новый селектор для описания ваших свойств - вы можете их просто включить в CSS Reset. Сделаем это:

body { line-height: 1; color: #996633; background:#ccc url(tiled-image.gif) repeat-x top left; }

Эрик Мейер по этому поводу сказал следующее: «это не тот случай, когда всем следует использовать CSS Reset без изменений».