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

标签:CSS,Firefox,YUI
0
投稿

猜你喜欢

  • Python如何实现小程序 无限求和平均

    2023-04-13 20:07:40
  • python smtplib模块发送SSL/TLS安全邮件实例

    2023-12-18 01:53:09
  • 分享Python 加速运行技巧

    2022-07-07 12:48:04
  • MySQL之权限以及设计数据库案例讲解

    2024-01-16 03:17:14
  • Python FTP操作类代码分享

    2022-09-07 17:59:23
  • javascript中的Function.prototye.bind

    2024-04-22 22:35:59
  • python使用timeit时间模块

    2023-03-05 16:27:37
  • 详解用python写一个抽奖程序

    2023-07-06 10:28:12
  • ASP程序中使用断开的数据记录集的代码

    2012-12-04 20:20:28
  • 一文搞懂MySQL XA如何实现分布式事务

    2024-01-22 23:25:19
  • Go select使用与底层原理讲解

    2024-04-28 09:14:11
  • Python statistics模块示例详解

    2023-01-27 11:49:47
  • 关于vue中hash和history的区别与使用图文详解

    2024-05-13 09:14:31
  • php递归删除目录与文件的方法

    2023-09-12 02:02:02
  • python爬虫请求头的使用

    2023-03-21 07:10:23
  • php字符串函数 str类常见用法示例

    2024-05-11 10:01:43
  • python读文件保存到字典,修改字典并写入新文件的实例

    2021-09-19 05:37:57
  • Python正则表达式中的re.S的作用详解

    2021-12-30 11:54:42
  • python实现七段数码管和倒计时效果

    2021-12-22 20:04:01
  • sql中count或sum为条件的查询示例(sql查询count)

    2024-01-16 04:05:02
  • asp之家 网络编程 m.aspxhome.com