Глобальный сброс в CSS

Глобальный сброс в CSS

Глобальный сброс CSS обычно применяют для более-менее одинакового отображения сайтов в различных браузерах. По умолчанию разные браузеры имеют различные значения для margin, padding и line-height. Глобальный сброс позволяет установить одинаковые значения этих величин во всех браузерах.

Глобальный сброс Эрика Мэйера

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,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
body {
line-height: 1;
color: black;
background: white;
}
ol, ul {
list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}

Yahoo! UI Library: CSS сброс

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;
}
table {
border-collapse:collapse;
border-spacing:0;
}
fieldset,img {
border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
font-style:normal;
font-weight:normal;
}
ol,ul {
list-style:none;
}
caption,th {
text-align:left;
}
h1,h2,h3,h4,h5,h6 {
font-size:100%;
font-weight:normal;
}
q:before,q:after {
content:'';
}
abbr,acronym { border:0;
}

Глобальный сброс стилей CSS (Kyle Neath)

*
{
padding:0;
margin:0;
}
h1, h2, h3, h4, h5, h6, p, pre, blockquote, label, ul, ol, dl, fieldset, address { margin:1em 0; }
li, dd { margin-left:5%; }
fieldset { padding: .5em; }
select option{ padding:0 5px; }

.hide, .print-logo, .close-button{ display:none; }
.left{ float:left; }
.right{ float:right; }
.clear{ clear:both; height:1px; font-size:1px; line-height:1px; }
a img{ border:none; }

Глобальный сброс (Павел Марковнин)

html
{
color: #2d2d2d;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10pt;
line-height: 1.4em;
background: #f7f4ea url(../images/bodyBg.gif) top left repeat-x;
}

*
{
padding: 0;
margin: 0;
outline: none;
font-size: 100%;
line-height: inherit;
_line-height: 1.4em;
}

input, textarea
{
padding: 0.2em;
}

img, a:link img, a:visited img, a:hover img, a:active img
{
border: 0;
}



a:link
{
font: inherit;
color: #0e8db7;
text-decoration: none;
border-bottom: 1px solid;
text-decoration: underline;
border: 0;
}

a:active
{
font-size: 100%;
color: #0e8db7;
text-decoration: none;
border-bottom: 1px solid;
text-decoration: underline;
border: 0;
}

a:hover
{
font-size: 100%;
color: #cc4e4e !important;
text-decoration: none;
border-bottom: 1px solid;
text-decoration: underline;
border: 0;
}

a:visited
{
font-size: 100%;
color: #9268b5;
text-decoration: none;
border-bottom: 1px solid;
text-decoration: underline;
border: 0;
}

a.dashed:link, a.dashed:active, a.dashed:visited
{
color: #0e8db7;
text-decoration: none;
border-bottom: 1px dashed;
}

a.dashed:hover
{
text-decoration: none;
border-bottom: 1px dashed;
}



h1
{
font-size: 1.8em;
margin: 0.2em 0 0.6em 0;
font-weight: normal;
color: #0e8db7;
}

h2
{
font-size: 1.7em;
margin: 0.8em 0 0.5em 0;
font-weight: normal;
color: #0e8db7;
}

h3
{
font-size: 1.6em;
margin: 0.7em 0 0.5em 0;
font-weight: normal;
}

h4
{
font-size: 1.3em;
margin: 0.5em 0 0.4em 0;
font-weight: normal;
}

h5
{
font-size: 1.2em;
margin: 0.5em 0 0.4em 0;
font-weight: normal;
}

h6
{
font-size: 1.1em;
margin: 0.5em 0 0.4em 0;
}


p
{
margin: 0.8em 0 0.9em 0;
}


table
{
border: 0;
border-collapse: collapse;
}

table td, th
{
padding: 0;
vertical-align: top;
text-align: left;
}


ul, ol
{
margin: 0.2em 0 1.4em 0;
padding: 0 0 0 2em;
}

ul li, ol li
{

}

small, sup, sub
{
font-size: 0.8em;
}

big
{
font-size: 1.2em;
}

ul li
{
margin: 0.5em 0;
padding: 0 0 0 15px;
list-style-type: none;
background: url(../images/bullet.gif) 0 0.5em no-repeat;
}

Мастер стили

html, body {
border:0;
margin:0;
padding:0;
}

body {
font:100%/1.25 Arial, Helvetica, sans-serif;
}

/***** Headings *****/

h1, h2, h3, h4, h5, h6 {
margin:0;
padding:0;
font-weight:normal;
}

h1 {
padding:30px 0 25px 0;
letter-spacing:-1px;
font-size:2em;
}

h2 {
padding:20px 0;
letter-spacing:-1px;
font-size:1.5em;
}

h3 {
font-size:1em;
font-weight:bold;
}

/***** Common Formatting *****/

p, ul, ol {
margin:0;
padding:0 0 1.25em 0;
}

ul, ol {
padding:0 0 1.25em 2.5em;
}

blockquote {
margin:1.25em;
padding:1.25em 1.25em 0 1.25em;
}

small {
font-size:0.85em;
}

img {
border:0;
}

sup {
position:relative;
bottom:0.3em;
vertical-align:baseline;
}

sub {
position:relative;
bottom:-0.2em;
vertical-align:baseline;
}

acronym, abbr {
cursor:help;
letter-spacing:1px;
border-bottom:1px dashed;
}

/***** Links *****/

a,
a:link,
a:visited,
a:hover {
text-decoration:underline;
}

/***** Forms *****/

form {
margin:0;
padding:0;
display:inline;
}

input, select, textarea {
font:1em Arial, Helvetica, sans-serif;
}

textarea {
width:100%;
line-height:1.25;
}

label {
cursor:pointer;
}

/***** Tables *****/

table {
border:0;
margin:0 0 1.25em 0;
padding:0;
}

table tr td {
padding:2px;
}

/***** Wrapper *****/

#wrap {
width:960px;
margin:0 auto;
}

/***** Global Classes *****/

.clear { clear:both; }
.float-left { float:left; }
.float-right { float:right; }

.text-left { text-align:left; }
.text-right { text-align:right; }
.text-center { text-align:center; }
.text-justify { text-align:justify; }

.bold { font-weight:bold; }
.italic { font-style:italic; }
.underline { border-bottom:1px solid; }
.highlight { background:#ffc; }

.wrap { width:960px;margin:0 auto; }

.img-left { float:left;margin:4px 10px 4px 0; }
.img-right { float:right;margin:4px 0 4px 10px; }

.nopadding { padding:0; }
.noindent { margin-left:0;padding-left:0; }
.nobullet { list-style:none;list-style-image:none; }

Расскажите друзьям

Оцените статью:
  • 1
  • 2
  • 3
  • 4
  • 5

Комментарии — 21

jedi
Йе! А я все недогонял, почему изначально все так нехорошо. Я использовал только такой сброс: * { margin: 0; padding: 0; } это конечно помогало, но не было настолько глобально. Спасибо!
#
jedi
FC
какой из них лучше?
#
FC
CSR
Первый...
#
CSR
DreamLikeMe
Мне больше вариант Yahoo нравится!
#
DreamLikeMe
Андрей [Sam] Несвой
Кажется, первый самый лучший.
#
Андрей [Sam] Несвой
KIVagant
Спасибо, очень полезная статья. Может знает кто - где взять хорошие заготовки шрифтовых и цветовых схем?
#
KIVagant  
Сергей
Спасибо! Нужная штука!
Если я правильно понял, то сначала подключаем css с этим "сбросом", а потом основной. Так?
Grin
Да, Сергей, все верно
Сергей
О! Как оперативно!
Спасибо! Буду пробовать. :)
13luck
мой универсальный сброс. От Озерова Алексей XDDDDDD

* { margin: 0; padding: 0; font-size: 100%; }
html { height: 100%; }
body { font-family: Arial, Tahoma, Verdana, sans-serif; height: 100%; font-size: 1em; }
a { color: #000000; outline: none; text-decoration: underline; }
a:link { color: #000000; }
a:hover { color: #000000; }
a:visited { color: #000000; }
h1, h2, h3, h4, h5, h6 { padding: 0; font-size:100%; font-weight: normal; }
input { vertical-align: middle; font-size: 1%; margin: 0; padding: 0; }
ol, ul, li { padding: 0; }
b { font-weight: normal; }
i { font-style: normal; }
p { margin: 0 0 18px; }
img { border: none; }
h1 { font-size: 245%; font-weight: normal; }
h2 { font-size: 210%; font-weight: normal; }
h3 { font-size: 180%; font-weight: normal; }
h4 { font-size: 150%; font-weight: normal; }
h5 { font-size: 130%; font-weight: normal; }
h6 { font-size: 110%; font-weight: normal; }
Василий
Попробую, а как догадались до такого?
13luck
это симбиос из нескольких.
правда это здесь процентный размер шрифта, те кому не нравится может остановится на емах
andery
А чем перечисление html, body, div, span, applet, object.......
отличается от "*" ?
Иван
Ну вначале задаются свойства присущие всем элементам, а потом уже разные свойства для каждого элемента, т.е. они есть не у всех.
#
Иван
Василий
* {
/* сбрасываем что нужно,
* например глобальный стиль фрифтов..
*/
}
Snegurka
andery, потому что универсальный селектрор не корректно работает в ие, версии ниже 6, а т.к мэйер очень лояльно относится к ИЕ, он вносит данное перечисление тегов. Если вы не собираетесь оптимизировать показ страниц для ие 5 версии - можете писать *
andery
Snegurka, спасибо - это имнно то, что я хотел услышать.
Артиом
Так какой использовать из всех вариантов лучше?
Получается сначала надо к странице подключить reset.css(сброс Эрика Мэйера) а потом свой стиль?
Заранее спасибо!
sasha_design
Можно подключать, а можно и в таблицу стилей, в начало вставить.
Николай
Ещё вариант:
http://divhack.com/node/30
#
Николай

Новый комментарий

как выглядит какой тег
жирный текст <b>жирный текст</b>
курсивный тект <i>курсивный тект</i>
зачеркнутый текст <s>зачеркнутый текст</s>
подчеркнутый текст <u>подчеркнутый текст</u>
ссылка <a href="адрес">ссылка</a>
function foo() { ... }
<pre><code>function foo() { ... } </code></pre>
разрешенные теги или посмотреть как будет выглядеть
как выглядит какой тег
жирный текст <b>жирный текст</b>
курсивный тект <i>курсивный тект</i>
зачеркнутый текст <s>зачеркнутый текст</s>
подчеркнутый текст <u>подчеркнутый текст</u>
ссылка <a href="адрес">ссылка</a>
function foo() { ... }
<pre><code>function foo() { ... } </code></pre>
разрешенные теги или посмотреть как будет выглядеть

metin2 pvp metin2 pvp serverler pvp serverler