Resetowanie stylów
Przeglądarki internetowe posiadają różne ustawienia domyślne, które owocują różnym wyglądem strony w różnych przeglądarkach. Powoduje to często problemy z łatwym uzyskaniem odpowiedniego layoutu i konieczność uciążliwego poprawiania układu dla każdej przeglądarki z osobna.
Dobrą praktyką jest ustawienie dla wszystkich przeglądarek takich samych wartości domyślnych, czyli globalne resetowanie (global reset, CSS reset).
Ten sam stopień pisma
Poniższy przykład pokazuje jak ustawić ten sam stopień pisma dla wszystkich przeglądarek. W linii drugiej stopień pisma ustawiany jest na 62.5%, dzięki czemu stopień pisma można w łatwy sposób ustawić w emach (1em-10px, 1.1em=11px, 1.8em=18px itd.)
html { font-size : 100.01%; } /* Opera fix */
html { font-size : 62.5%; } /* now: 1em=10px */
body { *font-size:101%; } /* IE fix */Eric Meyer Reset Reloaded
Poniżej przykład resetowania wartości domyślnych, który proponuje Eric Meyer:
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: "" "";
}Undo HTML Tantek Çelik
Poniżej wersja ustawienia domyślnych ustawień przeglądarek którą proponuje Tantek Çelik
/* undohtml.css */
/* (CC) 2004 Tantek Celik. Some Rights Reserved. */
/* http://creativecommons.org/licenses/by/2.0 */
/* This style sheet is licensed under a Creative Commons License. */
/* Purpose: undo some of the default styling of common (X)HTML browsers */
/* link underlines tend to make hypertext less readable,
because underlines obscure the shapes of the lower halves of words */
:link,:visited { text-decoration:none }
/* no list-markers by default, since lists are used more often for semantics */
ul,ol { list-style:none }
/* avoid browser default inconsistent heading font-sizes */
/* and pre/code too */
h1,h2,h3,h4,h5,h6,pre,code { font-size:1em; font-weight: bold;}
/* remove the inconsistent (among browsers) default ul,ol padding or margin */
/* the default spacing on headings does not match nor align with
normal interline spacing at all, so let's get rid of it. */
/* zero out the spacing around pre, form, body, html, p, blockquote as well */
/* form elements are oddly inconsistent, and not quite CSS emulatable. */
/* nonetheless strip their margin and padding as well */
ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input
{ margin:0; padding:0 }
/* whoever thought blue linked image borders were a good idea? */
a img,:link img,:visited img { border:none }
/* de-italicize address */
address { font-style:normal }
/* more varnish stripping as necessary... */Jeszcze inna wersja
Poniżej wersja resetowania z małymi zmianami wyglądu i kilkoma często używanymi stylami:
/*================> GLOBAL RESET <==========================================*/
ul,ol { list-style:none }
h1,h2,h3,h4,h5,h6,pre,code { font-size:1em; }
ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input { margin:0; padding:0 }
a img,:link img,:visited img { border:none }
address { font-style:normal }
:link,:visited { text-decoration:none }
/*================> FONT SIZE FIX <=========================================*/
html { font-size : 100.01%; } /* Opera fix */
html { font-size : 62.5%; } /* now: 1em=10px */
body { *font-size:101%; } /* IE fix */
#content { font-size:100%; }
/*================> USED OFTEN <===========================================*/
.before, .after {line-height:0;}
.before img, .after img {margin:0 !important;}
.clearfix:after {
content:“.”;
display:block;
height:0;
clear:both;
visibility:hidden; }
.clearfix { display:inline-block; }
/* Hides from IE-mac \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* End hide from IE-mac */
#skipper {
position:absolute;
left:-9000px;
top:5px; }
a:focus#skipper,a:active#skipper {
left:0;
color:#000;
background:#FF0;
font-size:1em;
display:block;
white-space:nowrap;
width:15em;
text-align:center;
font-weight:700;
padding:0.5em; }
/*================> SMALL CHANGES <=========================================*/
h1,h2,h3,h4,h5,h6 { font-weight: bold ;}
option { padding:0 .2em; /* for Firefox */ }
input, select, textarea { font-size: 100%; }
acronym, abbr { cursor:help;}
a, label { cursor: pointer; }
#content {font: 1.2em/1.75em arial, sans-serif;}
/*================> DEBUG <=================================================*/
/* grid */
html { background: url(http://taat.pl/grid/150x21_lightgray.png); }
.debug { background:#f00 }
body.debug { background:none }
.debug h1 { background:#c8c8c8 }
.debug h2 { background:#d0d0d0 }
.debug h3 { background:#d8d8d8 }
.debug h4 { background:#e0e0e0 }
.debug h5 { background:#e8e8e8 }
.debug h6 { background:#f0f0f0 }
.debug li { border:1px dotted #999 }
.debug ul, .debug ol { border:1px solid #666 }Do pobrania Szablon CSS default (wzorcowy plik HTML od którego można rozpocząć budowę strony).
Uwaga:Aby skrócić powyższe kody CSS i zaoszczędzić transferu, można je skompresować przy pomocy Kompresora kodu CSS