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

不同浏览器对于相同元素的默认样式并不一致,这也是为什么我们在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;
}

时间: 2024-09-30 12:03:13

CSS样式表教程之浏览器默认样式的相关文章

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

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

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

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

CSS样式表教程:screen媒体类型的作用

  CSS @media 规则非常适合于将 HTML 或 XML 文档定位为目标输出方法.目前, print 媒体的使用非常普遍,与实现单独的 "可打印版本" 相比, print 提供了更加整洁的方式来创建打印机友好的页面. screen 媒体一直未得到充分利用,原因可能是因为人们通常都认为 screen 仅仅是 "默认的呈现方式".然而,就布局而言(尤指绝对布局), screen 媒体类型具有重要的意义,样式表规则并不关心媒体类型,因此没有涵盖这一点. 最近,我在

CSS样式表高效使用技巧充分利用样式表的强大性

为了提高网页的维护更新效率,我们可以使用样式表,来仅仅改变一个文件,就能达到同时改变几百个网页的外观.为了能充分用好样式表的强大性和灵活性,笔者就怎样有效使用样式表,来谈谈自己的一些心得体会   随着互联网经济的不断发展,互联网上的专业网站.公众服务网站以及企业门户的数量都在飞速的增长,各网站的信息量也呈爆炸性增长的趋势.面对这些庞大的信 息量,我们对网页中每一个栏目的增删,都会是一个很复杂的过程.为了提高网页的维护更新效率,我们可以使用样式表,来仅仅改变一个文件,就能达到同时改变 几百个网页的

巧妙运用CSS样式表立刻改变鼠标的样式

css|样式表 用惯了Windows的人对各种各样的鼠标样式一定不会陌生.当鼠标移动到不同的地方时,当鼠标执行不同的功能时,当系统处于不同的状态时,都会使鼠标的形状发生变化.而在网页上往往只有当鼠标在超级链接上时才出现一个手形,在其它地方似乎没有什么变化.这同充满动感的网页显得不怎么和谐.实际上,用 CSS可以方便地定义许多种鼠标形状.用本文介绍的方法,可以在网页的作何地方设置鼠标的不同样式. 在Dreamweaver3中设置手形鼠标样式效果的制作步骤: 1.按F7(或点击快速启动栏里那个象"八

用CSS样式表控制鼠标显示的样式

css|控制|鼠标|显示|样式表 一般而言,鼠标以斜向上的箭头显示,移到文本上时变为有头的竖线,移到超级链接上变为手型.但用css可控制鼠标的显示效果,如可使鼠标移到普通文本上也显示成手型. 用css控制的语法如下: <span style="cursor:*">文本或其它页面元素</span> 把 * 换成如下15个效果的一种: hand.crosshair.text.wait.default.help.e-resize.ne-resize.n-resize.

如何解决css样式表在不同浏览器中显示效果不同的问题

一种简单的办法就是采用:使用IE专用的条件注释 <!--其他浏览器 --> <link rel="stylesheet" type="text/css" href="css.css" /> <!--[if IE 7]> <!-- 适合于IE7 --> <link rel="stylesheet" type="text/css" href="ie

网页制作技巧之用CSS定义表单元素中的样式

css|技巧|网页 先看下面代码:<html> <head> </head> <body> <form name="form1"> <input type='file' name='file1' id='file1' style='display:none'> <input id='text1' style='border:1 solid black;height:22'> <input type

动态创建样式表在各浏览器中的差异测试代码_javascript技巧

复制代码 代码如下: <!doctype html> <head></head> <body> <span id="con">xxx</span> <script> var css = document.createElement('style'); css.setAttribute('type', 'text/css'); var cssText = 'span{color:Red;}'; if(cs