• блог
• вопросы и ответы
• рецензии
• реклама на сайте
• RSS каналы
  3426 подписчиков
• наш твиттер
  426 фолловеров

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

21 апреля 2008, 18:48 Павел Марковнин HTML и CSS рейтинг 17

Глобальный сброс обычно применяют для более-менее одинакового отображения сайтов в различных браузерах. По умолчанию разные браузеры имеют различные значения для 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; }

Автор статьи: Павел Марковнин

Понаписал еще 106 статей.

Понравилась статья?

Тогда подпишись на обновления через RSS или воспользуйся
другими способами подписки.

• Адрес электронной почты
•