CSS樣式表教程：瀏覽器默認樣式

2024-07-11 08:21:11

字體：大中小

來源：轉載

供稿：網友

不同瀏覽器對于相同元素的默認樣式并不一致，這也是為什么我們在css的最開始要寫 * {padding:0;marging:0}；

不過現在說的可不只是這些。基本上，不同內核的兩個瀏覽器在某些元素的表現都會存在差異，比如縮進的大小、字體選擇、字符樣式等。也許一個很漂亮的css樣式表在一個瀏覽器上表現良好，在另外一個瀏覽器上即使是沒有css bug的情況也會變得結構混亂起來，我都是瀏覽器默認樣式在作怪。

因此，我們在生成css樣式規則的時候，一個必做的步驟就是重設瀏覽器的默認樣式，也就是覆蓋掉瀏覽器的默認樣式。和使用 * {padding:0;margin:0}有所不同，并不是所有的元素都存在padding和margin的差異（元素列表、有序列表在internet xplorer和firefox中的不同是由于它們的縮進采用了margin縮進和padding縮進）。例如下面這段代碼：

<h1> headlines are very important elements in xhtml</h1>

這段代碼在internet explorer中使用的字體是times new roman，而在firefox和opera中使用的是系統默認字體。因此我們要為<h1>在css中設定一個統一的樣式。

但是，如果我們像使用* {padding:0;margin:0}一樣去使用通配符“*”來簡單地設定全局樣式，那么一個很明顯的問題就會出現，比如像form元素、input元素、textarea等在某些瀏覽器中會忽略對它們的重新設定，更重要的是這將會嚴重破壞這些元素的外觀，所以你又不得不去手動去一一為它們重新設定一個padding值和margin值。所以我們應該放棄簡單地使用“*”，而是為第一個存在表現不一致的元素進行重設，如body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre等等。

同時，元素的默認樣式可能會破壞頁面的外觀。比如<b>元素會把文字加粗，<blockquote>會大段縮進，<em>會使文字傾斜等，如果你想要求頁面文本外觀一致的話，也應該在css中把這些元素的外觀進行重設。同時，有時候我們要求這些元素的外觀和父元素一樣，可以直接使用 inherit從父元素繼承即可。

至于哪些元素應該被重設？yahoo!已經為我們做了比較出的總結。根據雅虎的建議，你需要把這些規則放到一個名為reset.css的文件中單獨引用（推薦這種做法）：

html{color:#000;background:#fff;}
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;
}

你要做的就是把這些規則簡單地保存到reset.css中，然后在頁面中使用。在需要給這些元素增加新的樣式的時候，和其它元素的設定沒有什么不同。
注意：上面reset.css中 input,textarea,select{*font-size:100%;} 只有internet explorer可以認識，這樣的設定是為了使在internet explorer中可以縮放表單控件字體的大小。而 legend{color:#000;} 是因為在internet explorer中lengend元素使用字體顏色和系統有關（甚至和系統風格有關）。這里還要指出的是，html{color:#000;background:#fff;} 這條規則雖是細節，卻很重要，因為在某些時候他直接影響了頁面的整體外觀，百度就存在這樣的設計失誤（雅虎沒似乎也沒有給這一條，但是在某個示例中似乎出現了）。

和yahoo!一樣，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: "" "";
}