您当前的位置: 首页 > 前端教程 > CSS教程 > 浏览器中的默认样式

浏览器中的默认样式

作者:不详 来源:网络 发布时间: 2010-06-09 18:51 点击:
不同浏览器对于相同元素的默认样式并不一致,这也是为什么我们在CSS的最开始要写*{padding:0;marging:0}; 不过现在说的可不只是这些。基本上,不同内核的两个浏览器在某些元素的表现都会存在差异,比如缩进的大

浏览器中的默认样式

  不同浏览器对于相同元素的默认样式并不一致,这也是为什么我们在CSS的最开始要写*{padding:0;marging:0};
  
  不过现在说的可不只是这些。基本上,不同内核的两个浏览器在某些元素的表现都会存在差异,比如缩进的大小、字体选择、字符样式等。也许一个很漂亮的CSS样式表在一个浏览器上表现良好,在另外一个浏览器上即使是没有CSSBug的情况也会变得结构混乱起来,我都是浏览器默认样式在作怪。
  
  因此,我们在生成CSS样式规则的时候,一个必做的步骤就是重设浏览器的默认样式,也就是覆盖掉浏览器的默认样式。和使用*{padding:0;margin:0}有所不同,并不是所有的元素都存在padding和margin的差异(元素列表、有序列表在InternetXplorer和Firefox中的不同是由于它们的缩进采用了margin缩进和padding缩进)。例如下面这段代码:
  
  <h1>HeadlinesareveryimportantElementsinXHTML</h1>
  
  这段代码在InternetExplorer中使用的字体是TimesNewRoman,而在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%;}只有InternetExplorer可以认识,这样的设定是为了使在InternetExplorer中可以缩放表单控件字体的大小。而legend{color:#000;}是因为在InternetExplorer中lengend元素使用字体颜色和系统有关(甚至和系统风格有关)。这里还要指出的是,html{color:#000;background:#FFF;}这条规则虽是细节,却很重要,因为在某些时候他直接影响了页面的整体外观,百度就存在这样的设计失误(雅虎没似乎也没有给这一条,但是在某个示例中似乎出现了)。
  
  和Yahoo!一样,EricMeyer在他的网站也给出了一个新的写法:
  
  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;
  
  }
  
  /*remembertodefinefocusstyles!*/
  
  :focus{
  
  outline:0;
  
  }
  
  body{
  
  line-height:1;
  
  color:black;
  
  background:white;
  
  }
  
  ol,ul{
  
  list-style:none;
  
  }
  
  /*tablesstillneed'cellspacing="0"'inthemarkup*/
  
  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:"""";
  
  }
  
  在文中他还提到了InternetExplorer中解决inherit的问题,值得研究(查看原文:ResetReloaded)。其实这两个reset.css差别并不大,可以选择其中之一或者合并使用。
  
  reset.css是每个页面都必须的样式文件(或者你已经把它内置到相关的CSS文件中了),是我们实现跨浏览器设计的不可缺少的一个环节。

分享到:
本文"浏览器中的默认样式"由远航站长收集整理而来,仅供大家学习与参考使用。更多网站制作教程尽在远航站长站。
顶一下
(0)
0%
踩一下
(0)
0%
[点击 次] [返回上一页] [打印]
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 密码: 验证码:
关于本站 - 联系我们 - 网站声明 - 友情连接- 网站地图 - 站点地图 - 返回顶部
Copyright © 2007-2013 www.yhzhan.com(远航站长). All Rights Reserved .
远航站长:为中小站长提供最佳的学习与交流平台,提供网页制作与网站编程等各类网站制作教程.
官方QQ:445490277 网站群:26680406 网站备案号:豫ICP备07500620号-4