默認樣式表
此樣式表基于對當前UA實踐的廣泛研究,描述了所有HTML4元素的典型格式跷跪。鼓勵開發(fā)人員在其實現(xiàn)中將其用作默認樣式表。
以下樣式表供大家去查看:
html, address,
blockquote,
body, dd, div,
dl, dt, fieldset, form,
frame, frameset,
h1, h2, h3, h4,
h5, h6, noframes,
ol, p, ul, center,
dir, hr, menu, pre { display: block; unicode-bidi: embed }
li { display: list-item }
head { display: none }
table { display: table }
tr { display: table-row }
thead { display: table-header-group }
tbody { display: table-row-group }
tfoot { display: table-footer-group }
col { display: table-column }
colgroup { display: table-column-group }
td, th { display: table-cell }
caption { display: table-caption }
th { font-weight: bolder; text-align: center }
caption { text-align: center }
body { margin: 8px }
h1 { font-size: 2em; margin: .67em 0 }
h2 { font-size: 1.5em; margin: .75em 0 }
h3 { font-size: 1.17em; margin: .83em 0 }
h4, p,
blockquote, ul,
fieldset, form,
ol, dl, dir,
menu { margin: 1.12em 0 }
h5 { font-size: .83em; margin: 1.5em 0 }
h6 { font-size: .75em; margin: 1.67em 0 }
h1, h2, h3, h4,
h5, h6, b,
strong { font-weight: bolder }
blockquote { margin-left: 40px; margin-right: 40px }
i, cite, em,
var, address { font-style: italic }
pre, tt, code,
kbd, samp { font-family: monospace }
pre { white-space: pre }
button, textarea,
input, select { display: inline-block }
big { font-size: 1.17em }
small, sub, sup { font-size: .83em }
sub { vertical-align: sub }
sup { vertical-align: super }
table { border-spacing: 2px; }
thead, tbody,
tfoot { vertical-align: middle }
td, th, tr { vertical-align: inherit }
s, strike, del { text-decoration: line-through }
hr { border: 1px inset }
ol, ul, dir,
menu, dd { margin-left: 40px }
ol { list-style-type: decimal }
ol ul, ul ol,
ul ul, ol ol { margin-top: 0; margin-bottom: 0 }
u, ins { text-decoration: underline }
br:before { content: "\A"; white-space: pre-line }
center { text-align: center }
:link, :visited { text-decoration: underline }
:focus { outline: thin dotted invert }
/* Begin bidirectionality settings (do not change) */
BDO[DIR="ltr"] { direction: ltr; unicode-bidi: bidi-override }
BDO[DIR="rtl"] { direction: rtl; unicode-bidi: bidi-override }
*[DIR="ltr"] { direction: ltr; unicode-bidi: embed }
*[DIR="rtl"] { direction: rtl; unicode-bidi: embed }
@media print {
h1 { page-break-before: always }
h1, h2, h3,
h4, h5, h6 { page-break-after: avoid }
ul, ol, dl { page-break-before: avoid }
}
CSS-Reset
reset 的目的膏萧,是將所有的瀏覽器的自帶樣式重置掉楣导,這樣更易于保持各瀏覽器渲染的一致性。
這里提供鏈接給小伙伴去了解各類人士的cssreset文帘腹,里面包含YUI等等——cssreset
國內(nèi)的大牛們也很多自己去制定屬于自己的CSS Rest贰盗。但是在玉伯寫完第一版之后,在總結文章的結尾還是千叮嚀阳欲,萬囑咐說:
請記锥嬗:永遠不存在萬能解決方案,永遠沒有銀彈球化。 因此我的建議和 Eric 是一樣的:請根據(jù)具體需求秽晚,適量裁剪和修改后再使用。
替代品 Normalize.css
reset 的目的筒愚,是將所有的瀏覽器的自帶樣式重置掉赴蝇,這樣更易于保持各瀏覽器渲染的一致性。
而normalize 的理念則是盡量保留瀏覽器的默認樣式巢掺,不進行太多的重置扯再。——normalize
優(yōu)勢對比
前面講到CSS Reset
的核心作用就是清零址遇,而且過于暴力;那么作為后者Normalize.css
斋竞,到底有什么優(yōu)勢可以完全取代前者呢倔约?
1.Normalize.css 保護了有價值的默認值
Reset通過為幾乎所有的元素施加默認樣式,強行使得元素有相同的視覺效果坝初。 相比之下浸剩,Normalize.css保持了許多默認的瀏覽器樣式钾军。 這就意味著你不用再為所有公共的排版元素重新設置樣式。 當一個元素在不同的瀏覽器中有不同的默認值時绢要,Normalize.css
會力求讓這些樣式保持一致并盡可能與現(xiàn)代標準相符合吏恭。
2.Normalize.css 修復了瀏覽器的bug
它修復了常見的桌面端和移動端瀏覽器的bug。這往往超出了Reset所能做到的范疇重罪。 關于這一點樱哼,Normalize.css
修復的問題包含了HTML5元素的顯示設置、預格式化文字的font-size
問題剿配、在IE9中SVG
的溢出搅幅、許多出現(xiàn)在各瀏覽器和操作系統(tǒng)中的與表單相關的bug。
3.Normalize.css 修復了瀏覽器的bug
使用Reset最讓人困擾的地方莫過于在瀏覽器調(diào)試工具中大段大段的繼承鏈呼胚。在Normalize.css
中就不會有這樣的問題茄唐,因為在我們的準則中對多選擇器的使用時非常謹慎的,我們僅會有目的地對目標元素設置樣式蝇更。
4.Normalize.css 是模塊化的
這個項目已經(jīng)被拆分為多個相關卻又獨立的部分沪编,這使得你能夠很容易也很清楚地知道哪些元素被設置了特定的值。因此這能讓你自己選擇性地移除掉某些永遠不會用到部分(比如表單的一般化)年扩。
5.Normalize.css 擁有詳細的文檔
Normalize.css
的代碼基于詳細而全面的跨瀏覽器研究與測試蚁廓。這個文件中擁有詳細的代碼說明并在Github Wiki中有進一步的說明。這意味著你可以找到每一行代碼具體完成了什么工作常遂、為什么要寫這句代碼纳令、瀏覽器之間的差異,并且你可以更容易地進行自己的測試克胳。
這個項目的目標是幫助人們了解瀏覽器默認是如何渲染元素的平绩,同時也讓人們很容易地明白如何改進瀏覽器渲染。
總結
還是要根據(jù)自身網(wǎng)站系統(tǒng)的情況來考慮之后漠另,自己去修改出一份最適合自己的css-reset捏雌。
最后還是引用張鑫旭的一句話來總結下:
最少的CSS代碼,最少的渲染笆搓,最少的重置就是最好的CSS樣式代碼性湿,這反應了您的CSS層次。說句不好聽的話满败,CSS reset是用來讓那些CSS菜鳥肤频,對CSS不太了解的人準備的。
參考地址