转载:火狐的默认样式表

每个浏览器都有自己的默认样式，这是一段预定义的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 */
/* gt; noshade and color attributes are handled completely by
* the nsHTMLHRElement attribute mapping code
*/
hr {
display: block;
height: 2px;
/** start:Firefox2 **/
border: 1px -moz-bg-inset;
/** end:Firefox2 **/
/** start:Firefox3 **/
border: 1px inset;
/** end:Firefox3 **/
margin: 0.5em auto 0.5em auto;
/** start:Firefox3 **/
color: gray;
/** end:Firefox3 **/
-moz-float-edge: margin-box;
-moz-box-sizing: border-box;
}
hr[size="1"] {
/** start:Firefox2 **/
border-style: -moz-bg-solid none none none;
/** end:Firefox2 **/
/** start:Firefox3 **/
border-style: solid none none none;
/** end:Firefox3 **/
}
*|*:-moz-any-link img, img[usemap], object[usemap] {
border: 2px solid;
}
/** start:Firefox3 **/
img:-moz-broken::before, input:-moz-broken::before,
img:-moz-user-disabled::before, input:-moz-user-disabled::before,
img:-moz-loading::before, input:-moz-loading::before,
applet:-moz-empty-except-children-with-localname(param):-moz-broken::before,
applet:-moz-empty-except-children-with-localname(param):-moz-user-disabled::before {
content: -moz-alt-content !important;
unicode-bidi: embed;
}
object:-moz-broken >gt; *|*, applet:-moz-broken >gt; *|*
object:-moz-user-disabled >gt; *|*, applet:-moz-user-disabled >gt; *|* {
/*
Inherit in the object's alignment so that if we aren't aligned explicitly
we'll end up in the right place vertically.  See bug 36997.  Note that this
is not !important because we _might_ be aligned explicitly.
*/
vertical-align: inherit;
}
img:-moz-suppressed, input:-moz-suppressed, object:-moz-suppressed,
embed:-moz-suppressed, applet:-moz-suppressed {
/*
Set visibility too in case the page changes display.  Note that we _may_
want to just set visibility and not display, in general, if we find that
display:none breaks too many layouts.  And if we decide we really do want
people to be able to right-click blocked images, etc, we need to set
neither one, and hack the painting code.... : (
*/
display: none !important;
visibility: hidden !important;
}
/** end:Firefox3 **/
img[usemap], object[usemap] {
color: blue;
}
frameset {
display: block ! important;
overflow: -moz-hidden-unscrollable;
position: static ! important;
float: none ! important;
border: none ! important;
}
frame {
border: none ! important;
}
iframe {
border: 2px inset;
}
noframes {
display: none;
}
spacer {
position: static ! important;
float: none ! important;
}
canvas {
-moz-user-select: none;
}
/* focusable content: anything w/ tabindex >gt;=0 is focusable */
abbr:focus, acronym:focus, address:focus, applet:focus, b:focus,
base:focus, big:focus, blockquote:focus, br:focus, canvas:focus, caption:focus,
center:focus, cite:focus, code:focus, col:focus, colgroup:focus, dd:focus,
del:focus, dfn:focus, dir:focus, div:focus, dl:focus, dt:focus, em:focus,
fieldset:focus, font:focus, form:focus, h1:focus, h2:focus, h3:focus, h4:focus,
h5:focus, h6:focus, hr:focus, i:focus, img:focus, ins:focus,
kbd:focus, label:focus, legend:focus, li:focus, link:focus, menu:focus,
object:focus, ol:focus, p:focus, pre:focus, q:focus, s:focus, samp:focus,
small:focus, span:focus, strike:focus, strong:focus, sub:focus, sup:focus,
table:focus, tbody:focus, td:focus, tfoot:focus, th:focus, thead:focus,
tr:focus, tt:focus, u:focus, ul:focus, var:focus {
/** start:Firefox2 **/
outline: 1px dotted invert;
/** end:Firefox2 **/
/** start:Firefox3 **/
/* Don't specify the outline-color, we should always use initial value. */
outline: 1px dotted;
/** end:Firefox3 **/
}
/* hidden elements */
area, base, basefont, head, meta, script, style, title,
noembed, param {
display: none;
}
/* emulation of non-standard HTML gt; tag */
marquee {
/** start:Firefox2 **/
display: block;
/** end:Firefox2 **/
/** start:Firefox3 **/
width: -moz-available;
display: inline-block;
vertical-align: text-bottom;
text-align: start;
/** end:Firefox3 **/
-moz-binding: url('chrome://xbl-marquee/content/xbl-marquee.xml#marquee-horizontal');
}
marquee[direction="up"], marquee[direction="down"] {
-moz-binding: url('chrome://xbl-marquee/content/xbl-marquee.xml#marquee-vertical');
height: 200px;
}
/* PRINT ONLY rules follow */
@media print {
marquee { -moz-binding: none; }
/* XXX this should not be necessary, we should be stopping blinking
of any kind in print preview, not just the gt; element */
blink {
text-decoration: none;
}
}

虽然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

 

原文：http://www.cnblogs.com/yuzhongwusan/archive/2009/03/19/1416282.html

 

时间： 2024-12-23 05:17:52

转载:火狐的默认样式表的相关文章

总结知识：HTML默认样式表CSS属性汇总

css|样式表 开始的时候 *{margin:0;padding:0;},当需要使用边距的时候,就需要还原HTML默认CSS值了. 以前一直在找这份文档,今天偶然在w3上看到了.除了inline和block的定义,主要是要注意 body|h1~h6|blockquote|menu|ul|ol|dd等标签的默认样式(margin和font-size). 这个东西在你需要还原默认值的时候,比较有用. 详见下面的内容: html, address, blockquote, body, dd, div,

浏览器默认样式(user agent stylesheet)+cssreset

每种浏览器都有一套默认的样式表,即user agent stylesheet,在写网页时,没有指定的样式,按浏览器内置的样式表来渲染.这是合理的,像word中也有一些预留样式,可以让我们的排版更美观整齐.不同浏览器甚至同一浏览器不同版本的默认样式是不同的.这才带来了很多的坑,让大家用cssreset去填.. 一.浏览器默认样式 了解各浏览器的默认样式能让我们对每条Reset规则的写法做到心中有数,对我们了解浏览器的差异,写各浏览器兼容的代码也有很大帮助. 所以先看看浏览器默认样式长什么样: FF

网页HTML默认的CSS样式表属性总结

css|网页|样式表 这个东西,在你需要还原默认值的时候,比较有用. 开始的时候 *{margin:0;padding:0;},当需要使用边距的时候,就需要还原HTML默认CSS值了. 以前一直在找这份文档,今天偶然在w3上看到了.除了inline和block的定义,主要是要注意body|h1~h6|blockquote|menu|ul|ol|dd等标签的默认样式(margin和font-size). html, address, blockquote, body, dd, div, dl, d

认识：HTML网页中默认的CSS样式表属性总结

css|网页|样式表    这个东西,在你需要还原默认值的时候,比较有用.     开始的时候 *{margin:0;padding:0;},当需要使用边距的时候,就需要还原HTML默认CSS值了.     以前一直在找这份文档,今天偶然在w3上看到了.除了inline和block的定义,主要是要注意  body|h1~h6|blockquote|menu|ul|ol|dd等标签的默认样式(margin和font-size). html, address, blockquote, body, d

CSS样式表教程之浏览器默认样式

不同浏览器对于相同元素的默认样式并不一致,这也是为什么我们在CSS的最开始要写 * {padding:0;marging:0}: 不过现在说的可不只是这些.基本上,不同内核的两个浏览器在某些元素的表现都会存在差异,比如缩进的大小.字体选择.字符样式等.也许一个很漂亮的CSS样式表在一个浏览器上表现良好,在另外一个浏览器上即使是没有CSS Bug的情况也会变得结构混乱起来,我都是浏览器默认样式在作怪. 因此,我们在生成CSS样式规则的时候,一个必做的步骤就是重设浏览器的默认样式,也就是覆盖掉浏览器

web developer-我在用火狐浏览器看网去哪网首页的CSS，但完全不知道哪个样式表对应哪块啊？看不懂

问题描述 我在用火狐浏览器看网去哪网首页的CSS,但完全不知道哪个样式表对应哪块啊?看不懂 chrome://web-developer/content/generated/view-css.html 那几个块儿是怎么架构?怎么分的啊? 例如里面的这个http://qunarzz.com/home/prd/styles/home@6fb07082dd822344cde59fd3631c6bbc.css 完全不懂是哪一块的啊!!!

chrome浏览器当表单自动填充时如何去除浏览器自动添加的默认样式_javascript技巧

一.发现该问题的原因-是在写账号登录页面时,input表单添加了背景图片,当自动填充,搓搓的一坨淡黄色背景出来. 这个原因是我草率的直接设置在input元素里面,结果问题就来了.所以如果把这个图标放在input表单外面,就不会出现这个问题. 二.表单自动填充会添加浏览器默认样式怎么处理和避免 第二张图,就是表单自动填充后,chrome会默认给自动填充的input表单加上input:-webkit-autofill私有属性 input:-webkit-autofill, textarea:-web

IE9 IE10火狐谷歌都可以跑 但是IE8报错无法显示 XML 页。 无法查看使用 XSL 样式表的 XML 输入。 其他页面都可以用。未读这个页面

问题描述 大神求解决啊IE910火狐谷歌都可以跑起来,但是IE8报错.无法显示XML页.无法查看使用XSL样式表的XML输入. 解决方案 解决方案二:你提供的错误信息太少了.死马当活马医你看看http://www.cnblogs.com/carekee/articles/1614505.html

JS函数实现动态添加CSS样式表文件_基础知识

先给出函数. 复制代码 代码如下: varaddSheet=function(){ vardoc,cssCode; if(arguments.length==1){ doc=document; cssCode=arguments[0] }elseif(arguments.length==2){ doc=arguments[0]; cssCode=arguments[1]; }else{ alert("addSheet函数最多接受两个参数!"); } if(!+"v1"