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

前端  /  管理员 发布于 7年前   182

不同浏览器对于相同元素的默认样式并不一致，这也是为什么我们在CSS的最开始要写 * {padding:0;marging:0}；
不过现在说的可不只是这些。基本上，不同内核的两个浏览器在某些元素的表现都会存在差异，比如缩进的大小、字体选择、字符样式等。也许一个很漂亮的CSS样式表在一个浏览器上表现良好，在另外一个浏览器上即使是没有CSS Bug的情况也会变得结构混乱起来，我都是浏览器默认样式在作怪。
因此，我们在生成CSS样式规则的时候，一个必做的步骤就是重设浏览器的默认样式，也就是覆盖掉浏览器的默认样式。和使用 * {padding:0;margin:0}有所不同，并不是所有的元素都存在padding和margin的差异（元素列表、有序列表在Internet Xplorer和Firefox中的不同是由于它们的缩进采用了margin缩进和padding缩进）。例如下面这段代码：
<h1> Headlines are very important Elements in XHTML</h1>
这段代码在Internet Explorer中使用的字体是Times New Roman，而在Firefox和Opera中使用的是系统默认字体。因此我们要为<h1>在CSS中设定一个统一的样式。
但是，如果我们像使用* {padding:0;margin:0}一样去使用通配符“*”来简单地设定全局样式，那么一个很明显的问题就会出现，比如像form元素、input元素、textarea等在某些浏览器中会忽略对它们的重新设定，更重要的是这将会严重破坏这些元素的外观，所以你又不得不去手动去一一为它们重新设定一个padding值和margin值。所以我们应该放弃简单地使用“*”，而是为第一个存在表现不一致的元素进行重设，如body,div,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,div,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中可以缩放表单控件字体的大小。而 legend{color:#000;} 是因为在Internet Explorer中lengend元素使用字体颜色和系统有关（甚至和系统风格有关）。这里还要指出的是，html{color:#000;background:#FFF;} 这条规则虽是细节，却很重要，因为在某些时候他直接影响了页面的整体外观，百度就存在这样的设计失误（雅虎没似乎也没有给这一条，但是在某个示例中似乎出现了）。
和Yahoo!一样，Eric Meyer在他的网站也给出了一个新的写法：
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
body {
line-height: 1;
color: black;
background: white;
}
ol, ul {
list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}
在文中他还提到了 Internet Explorer 中解决 inherit 的问题（我研究之后也想简单写一下），值得研究（查看原文：Reset Reloaded）。其实这两个reset.css差别并不大，可以选择其中之一或者合并使用。
reset.css是每个页面都必须的样式文件（或者你已经把它内置到相关的CSS文件中了），是我们实现跨浏览器设计的不可缺少的一环。
原文连接：http://www.dudo.org/article.asp?id=243