CSS怎麼處理瀏覽器的預設樣式
- php中世界最好的语言原創
- 2018-03-22 09:44:202318瀏覽
這次帶給大家CSS怎麼處理瀏覽器的預設樣式，CSS處理瀏覽器的預設樣式注意事項有哪些，下面就是實戰案例，一起來看一下。
發現
最近在調整網頁的格式發現網頁底部總是有一個10像素左右的空格。
透過用Chrome流浪器的審查元素發現有一個叫user agent stylesheet設定整個form的margin-botton:1em;
#透過上網查資料發現這個user agent stylesheet是流浪器的一些預設樣式。如果對這個預設樣式不滿意最簡單的解決方法就是重新設定該樣式的屬性，因為user agent stylesheet優先權很低，會被覆蓋，這樣就不會影響到我們的樣式了，比如這裡我就講form的margin-bottom設為0px。
User Agent Stylesheet介紹
#不同瀏覽器對於相同元素的預設樣式並不一致，這也是為什麼我們在CSS的最開始要寫* {padding:0;marging:0};
不過現在說的可不只是這些。基本上，不同核心的兩個瀏覽器在某些元素的表現都會有差異，例如縮排的大小、字體選擇、字元樣式等。也許一個很漂亮的CSS樣式表在一個瀏覽器上表現良好，在另一個瀏覽器上即使是沒有CSS Bug的情況也會變得結構混亂起來，我都是瀏覽器預設樣式在作怪。
因此，我們在產生CSS樣式規則的時候，一個必做的步驟就是重設瀏覽器的預設樣式，也就是覆寫瀏覽器的預設樣式。和使用* {padding:0;margin:0}有所不同，並不是所有的元素都存在padding和margin的差異（元素列表、有序列表在Internet Xplorer和Firefox中的不同是由於它們的縮排採用了margin縮排和padding縮排）。
例如下面這段：
這段程式碼在Internet Explorer中使用的字體是Times New Roman，而在Firefox和Opera中使用的是系統預設字體。因此我們要為＜h1＞在CSS中設定一個統一的樣式。
但是，如果我們像使用* {padding:0;margin:0}一樣去使用通配符「*」來簡單地設定全域樣式，那麼一個很明顯的問題就會出現，例如像form元素、input元素、textarea等在某些瀏覽器中會忽略對它們的重新設定，更重要的是這將會嚴重破壞這些元素的外觀，所以你又不得不去手動去一一為它們重新設定一個padding值和margin值。所以我們應該放棄簡單地使用“*”，而是為第一個存在表現不一致的元素進行重設，如body,p,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,p,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中可以縮放表單控制項字型的大小。
相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
推薦閱讀：
####################################### #以上是CSS怎麼處理瀏覽器的預設樣式的詳細內容。更多資訊請關注PHP中文網其他相關文章！