浏览器默认样式(User Agent Stylesheet)

简介: 原文:http://www.zjgsq.com/898.html 不同浏览器对于相同元素的默认样式并不一致,这也是为什么我们在CSS的最开始要写 * {padding:0;marging:0}; 不过现在说的可不只是这些。

原文:http://www.zjgsq.com/898.html

不同浏览器对于相同元素的默认样式并不一致,这也是为什么我们在CSS的最开始要写 * {padding:0;marging:0};

不过现在说的可不只是这些。基本上,不同内核的两个浏览器在某些元素的表现都会存在差异,比如缩进的大小、字体选择、字符样式等。也许一个很漂亮的CSS样式表在一个浏览器上表现良好,在另外一个浏览器上即使是没有CSS Bug的情况也会变得结构混乱起来,我都是浏览器默认样式在作怪。

因此,我们在生成CSS样式规则的时候,一个必做的步骤就是重设浏览器的默认样式,也就是覆盖掉浏览器的默认样式。和使用 * {padding:0;margin:0}有所不同,并不是所有的元素都存在padding和margin的差异(元素列表、有序列表在Internet Xplorer和Firefox中的不同是由于它们的缩进采用了margin缩进和padding缩进)。例如下面这段代码:

Headlines are very important Elements in XHTML

这段代码在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中可以缩放表单控件字体的大小。

 

相关文章
|
6月前
|
Web App开发
喂~讲真~我很讨厌chrome谷歌浏览器的默认填充输入框input样式咧,敲击讨厌滴啦,怎么去掉介个样式尼
喂~讲真~我很讨厌chrome谷歌浏览器的默认填充输入框input样式咧,敲击讨厌滴啦,怎么去掉介个样式尼
|
5月前
各种浏览器的userAgent收集
各种浏览器的userAgent收集
60 2
|
3月前
|
前端开发
浏览器——如何定制console的输出样式
浏览器——如何定制console的输出样式
75 0
|
4月前
|
前端开发 JavaScript
vue3【实战】创建项目、创建并提交代码到远程仓库,安装 SASS, 清除浏览器默认样式 reset-css, 清除模板代码,提升开发效率的必要集成
vue3【实战】创建项目、创建并提交代码到远程仓库,安装 SASS, 清除浏览器默认样式 reset-css, 清除模板代码,提升开发效率的必要集成
75 0
|
4月前
|
Web App开发 编解码
软件开发常见流程之兼容性和手机屏页面设计,PC端和移动端常见浏览器,国内的UC都是根据Webkit修改过来的内核,开发重点关注尺寸,常见移动端尺寸汇总,移动端,理想视口根据你设别的样式进行修改
软件开发常见流程之兼容性和手机屏页面设计,PC端和移动端常见浏览器,国内的UC都是根据Webkit修改过来的内核,开发重点关注尺寸,常见移动端尺寸汇总,移动端,理想视口根据你设别的样式进行修改
|
4月前
|
前端开发 JavaScript
js 进入浏览器全屏(F11效果)、退出全屏、指定元素全屏、判断当前是否全屏、监听浏览器全屏事件、定义全屏时的css样式(全屏伪类)
js 进入浏览器全屏(F11效果)、退出全屏、指定元素全屏、判断当前是否全屏、监听浏览器全屏事件、定义全屏时的css样式(全屏伪类)
594 0
|
6月前
|
JavaScript
vue自定义浏览器滚动条样式
vue自定义浏览器滚动条样式
47 0
|
6月前
|
前端开发
(最简单)使用 reset-css 初始化浏览器css样式
(最简单)使用 reset-css 初始化浏览器css样式
261 1
|
6天前
|
存储 人工智能 自然语言处理
AI经营|多Agent择优生成商品标题
商品标题中关键词的好坏是商品能否被主搜检索到的关键因素,使用大模型自动优化标题成为【AI经营】中的核心能力之一,本文讲述大模型如何帮助商家优化商品素材,提升商品竞争力。
AI经营|多Agent择优生成商品标题
|
7天前
|
人工智能 算法 搜索推荐
清华校友用AI破解162个高数定理,智能体LeanAgent攻克困扰陶哲轩难题!
清华校友开发的LeanAgent智能体在数学推理领域取得重大突破,成功证明了162个未被人类证明的高等数学定理,涵盖抽象代数、代数拓扑等领域。LeanAgent采用“持续学习”框架,通过课程学习、动态数据库和渐进式训练,显著提升了数学定理证明的能力,为数学研究和教育提供了新的思路和方法。
18 3