瀏覽器默認樣式UserAgentStylesheet的示例分析

這篇文章將為大家詳細講解有關(guān)瀏覽器默認樣式User Agent Stylesheet的示例分析，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

創(chuàng)新互聯(lián)堅持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：網(wǎng)站設(shè)計、成都網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時代的浠水網(wǎng)站設(shè)計、移動媒體設(shè)計的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

發(fā)現(xiàn)

最近在調(diào)整網(wǎng)頁的格式發(fā)現(xiàn)網(wǎng)頁底部總是有一個10像素左右的空格。

通過用Chrome流浪器的審查元素發(fā)現(xiàn)有一個叫user agent stylesheet設(shè)置整個form的margin-botton:1em;

通過上網(wǎng)查資料發(fā)現(xiàn)這個user agent stylesheet是流浪器的一些默認樣式。如果對這個默認樣式不滿意最簡單的解決辦法就是重新設(shè)置該樣式的屬性，因為user agent stylesheet優(yōu)先級很低，會被覆蓋，這樣就不會影響到我們的樣式了，比如這里我就講form 的margin-bottom設(shè)為0px。

User Agent Stylesheet介紹

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

不過現(xiàn)在說的可不只是這些?；旧希煌瑑?nèi)核的兩個瀏覽器在某些元素的表現(xiàn)都會存在差異，比如縮進的大小、字體選擇、字符樣式等。也許一個很漂亮的CSS樣式表在一個瀏覽器上表現(xiàn)良好，在另外一個瀏覽器上即使是沒有CSS Bug的情況也會變得結(jié)構(gòu)混亂起來，我都是瀏覽器默認樣式在作怪。

因此，我們在生成CSS樣式規(guī)則的時候，一個必做的步驟就是重設(shè)瀏覽器的默認樣式，也就是覆蓋掉瀏覽器的默認樣式。和使用 * {padding:0;margin:0}有所不同，并不是所有的元素都存在padding和margin的差異（元素列表、有序列表在Internet Xplorer和Firefox中的不同是由于它們的縮進采用了margin縮進和padding縮進）。

例如下面這段：

這段代碼在Internet Explorer中使用的字體是Times New Roman，而在Firefox和Opera中使用的是系統(tǒng)默認字體。因此我們要為＜h2＞在CSS中設(shè)定一個統(tǒng)一的樣式。

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

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

處理方法

至于哪些元素應(yīng)該被重設(shè)？Yahoo!已經(jīng)為我們做了比較出的總結(jié)。根據(jù)雅虎的建議，你需要把這些規(guī)則放到一個名為Reset.css的文件中單獨引用（推薦這種做法）：

html{color:#000;background:#FFF;} 
body,div,dl,dt,dd,ul,ol,li,h2,h3,h4,h5,h6,h7,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; 
} 
h2,h3,h4,h5,h6,h7 { 
font-size:100%; 
font-weight:normal; 
} 
q:before,q:after { 
content:''; 
} 
abbr,acronym { border:0; 
}

你要做的就是把這些規(guī)則簡單地保存到reset.css中，然后在頁面中使用。在需要給這些元素增加新的樣式的時候，和其它元素的設(shè)定沒有什么不同。

注意：上面reset.css中 input,textarea,select{*font-size:100%;} 只有Internet Explorer可以認識，這樣的設(shè)定是為了使在Internet Explorer中可以縮放表單控件字體的大小。

關(guān)于“瀏覽器默認樣式User Agent Stylesheet的示例分析”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。

分享題目：瀏覽器默認樣式UserAgentStylesheet的示例分析
本文來源：http://www.muchs.cn/article34/jpccse.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)建站、關(guān)鍵詞優(yōu)化、網(wǎng)站導(dǎo)航、定制開發(fā)、全網(wǎng)營銷推廣、網(wǎng)站營銷

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)