Firefox的默认样式表
作者:秦歌 来源:随网之舞 时间:2008-05-09 12:06:00
每个浏览器都有自己的默认样式,这是一段预定义的CSS,用以简单地呈现网页。在Firefox中的地址栏中输入resource://gre/res/html.css即可以看到该浏览器的默认样式。在Firebug 1.2 Alphas的styles中就可以看到默认样式对页面定义样式的影响。毫无疑问,理解和学习浏览器的默认样式能更好的理解浏览器对解析样式和呈现页面。Firefox3和Firefox2相比,默认样式仅有8处不同,但这些改变也可以让我们感觉到Firefox3在样式上的改进:
@namespace url(http://www.w3.org/1999/xhtml); /* set default namespace to HTML *//* bidi */[dir="rtl"] { direction: rtl; unicode-bidi: embed;}[dir="ltr"] { direction: ltr; unicode-bidi: embed;}bdo[dir] { unicode-bidi: bidi-override;}/* blocks */html, div, map, dt, isindex, form { display: block;}body { display: block; margin: 8px;}p, dl, multicol { display: block; margin: 1em 0;}dd { display: block; -moz-margin-start: 40px;}blockquote { display: block; margin: 1em 40px;}address { display: block; font-style: italic;}center { display: block; text-align: -moz-center;}blockquote[type=cite] { display: block; margin: 1em 0px; /*** start:Firefox2 ***/ padding-left: 1em; border-left: solid; /*** end:Firefox2 ***/ /*** start:Firefox3 ***/ -moz-padding-start: 1em; -moz-border-start: solid; /*** end:Firefox3 ***/ border-color: blue; border-width: thin;}span[_moz_quote=true] { color: blue;}pre[_moz_quote=true] { color: blue;}h1 { display: block; font-size: 2em; font-weight: bold; margin: .67em 0;}h2 { display: block; font-size: 1.5em; font-weight: bold; margin: .83em 0;}h3 { display: block; font-size: 1.17em; font-weight: bold; margin: 1em 0;}h4 { display: block; font-weight: bold; margin: 1.33em 0;}h5 { display: block; font-size: 0.83em; font-weight: bold; margin: 1.67em 0;}h6 { display: block; font-size: 0.67em; font-weight: bold; margin: 2.33em 0;}listing { display: block; font-family: -moz-fixed; font-size: medium; white-space: pre; margin: 1em 0;}xmp, pre, plaintext { display: block; font-family: -moz-fixed; white-space: pre; margin: 1em 0;}/* tables */table { display: table; border-spacing: 2px; border-collapse: separate; margin-top: 0; margin-bottom: 0; /* XXXldb do we want this if we’re border-collapse:collapse ? */ -moz-box-sizing: border-box; text-indent: 0;}table[align="left"] { float: left;}table[align="right"] { float: right; text-align: start;}table[rules]:not([rules="none"]) { border-collapse: collapse;}/* caption inherits from table not table-outer */caption { display: table-caption; text-align: center; -moz-box-sizing: border-box;}table[align="center"] >gt; caption { margin-left: auto; margin-right: auto;}table[align="center"] >gt; caption[align="left"] { margin-right: 0;}table[align="center"] >gt; caption[align="right"] { margin-left: 0;}tr { display: table-row; vertical-align: inherit;}col { display: table-column;}colgroup { display: table-column-group;}tbody { display: table-row-group; vertical-align: middle;}thead { display: table-header-group; vertical-align: middle;}tfoot { display: table-footer-group; vertical-align: middle;}/* for XHTML tables without tbody */table >gt; tr { vertical-align: middle;}td { display: table-cell; vertical-align: inherit; text-align: inherit; padding: 1px;}th { display: table-cell; vertical-align: inherit; font-weight: bold; padding: 1px;}tr >gt; form:-moz-is-html, tbody >gt; form:-moz-is-html,thead >gt; form:-moz-is-html, tfoot >gt; form:-moz-is-html,table >gt; form:-moz-is-html { /* Important: don’t show these forms in HTML */ display: none !important;}/* inlines */q:before { content: open-quote;}q:after { content: close-quote;}b, strong { font-weight: bolder;}i, cite, em, var, dfn { font-style: italic;}tt, code, kbd, samp { font-family: -moz-fixed;}u, ins { text-decoration: underline;}s, strike, del { text-decoration: line-through;}blink { text-decoration: blink;}big { font-size: larger;}small { font-size: smaller;}sub { vertical-align: sub; font-size: smaller; line-height: normal;}sup { vertical-align: super; font-size: smaller; line-height: normal;}nobr { white-space: nowrap;}/* titles */abbr[title], acronym[title] { border-bottom: dotted 1px;}/* lists */ul, menu, dir { display: block; list-style-type: disc; margin: 1em 0; -moz-padding-start: 40px;}ol { display: block; list-style-type: decimal; margin: 1em 0; -moz-padding-start: 40px;}li { display: list-item; /** start:Firefox2 **/ -moz-float-edge: margin-box; /** end:Firefox2 **/}/* nested lists have no top/bottom margins */ul ul, ul ol, ul dir, ul menu, ul dl,ol ul, ol ol, ol dir, ol menu, ol dl,dir ul, dir ol, dir dir, dir menu, dir dl,menu ul, menu ol, menu dir, menu menu, menu dl,dl ul, dl ol, dl dir, dl menu, dl dl { margin-top: 0; margin-bottom: 0;}/* 2 deep unordered lists use a circle */ol ul, ul ul, menu ul, dir ul,ol menu, ul menu, menu menu, dir menu,ol dir, ul dir, menu dir, dir dir { list-style-type: circle;}/* 3 deep (or more) unordered lists use a square */ol ol ul, ol ul ul, ol menu ul, ol dir ul,ol ol menu, ol ul menu, ol menu menu, ol dir menu,ol ol dir, ol ul dir, ol menu dir, ol dir dir,ul ol ul, ul ul ul, ul menu ul, ul dir ul,ul ol menu, ul ul menu, ul menu menu, ul dir menu,ul ol dir, ul ul dir, ul menu dir, ul dir dir,menu ol ul, menu ul ul, menu menu ul, menu dir ul,menu ol menu, menu ul menu, menu menu menu, menu dir menu,menu ol dir, menu ul dir, menu menu dir, menu dir dir,dir ol ul, dir ul ul, dir menu ul, dir dir ul,dir ol menu, dir ul menu, dir menu menu, dir dir menu,dir ol dir, dir ul dir, dir menu dir, dir dir dir { list-style-type: square;}/* leafs *//*
虽然CSS2.1的附录里给了HTML4默认样式的建议(Appendix D. Default style sheet for HTML 4),这本身就不是一个很完美的解决方案,加上各个浏览器附加上一点自己私有的属性,Firefox默认样式表中清楚的说明了这点,导致了各个浏览器的默认样式表不尽相同,比如对比这份参考CSS2.1的对HTML4默认样式的建议通过实践总结出来的IE6的默认样式表(INTERNET EXPLORER 6 DEFAULT STYLE SHEET)。解决这个问题的常见方法就是通过一个通用的CSS文件来重置HTML标签的样式,使其在各个浏览器中表现的一样,比如YUI Reset CSS和Eric Meyer的CSS Tools: Reset CSS就是很好的解决方案。
扩展阅读:Really Undoing html.css - Eric Meyer