289

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

21 апреля 2008, 18:48HTML и CSSрейтинг +14-

Глобальный сброс обычно применяют для более-менее одинакового отображения сайтов в различных браузерах. По умолчанию разные браузеры имеют различные значения для 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; }
Memori.rumister-wong.combobrdobr.rumoemesto.rudel.icio.uszakladki.yandex.rugoogle.com/bookmarks/

Комментарии

Йе! А я все недогонял, почему изначально все так нехорошо. Я использовал только такой сброс: * { margin: 0; padding: 0; } это конечно помогало, но не было настолько глобально. Спасибо!
jedi, 8 мая 2008, 23:25
какой из них лучше?
FC, 20 июня 2008, 22:52
Первый...
CSR, 24 июля 2008, 20:17