关于汉墨关于汉墨
css样式继承+css样式重设
时间:2022-06-08 来源:互联网 浏览:1748次
css样式继承

在一个HTML网页中,开发人员可以使用Css样式来设置网页中每个标签的显示样式。但若梅个出现在网页上的显示样式都需要人工去做设置的话,这对于开发人员来说将会是一场灾难。因此,为了减少开发人员的负担,在CSS定义中加入了样式继承的机制。


这个CSS中定义的样式继承机制,可以使用DOM对象树来帮助理解与记忆,如图2-1所示。在DOM对象树中,每个对象都会有父对象、子对象这样的角色定位,而样式继承就是在这父子对象的角色之中,定义了子对象显示样式的内容,默认会跟父对象显示样式的内容一样。通过这样的继承机制,开发人员只需要在最上层的父对象设置某个显示样式的内容,浏览器就会自动将所有子对象的显示样式设置为一样。这样一来,开发人员就不用为每个出现在网页上的显示样式都人工去做设置,能有效减轻开发人员的负担。
    上面范例的内容,包含了HTML网页以及网页分析成的DOM对象树。可以看到在网页中包含了div标签和span标签和这两个标签在DOM对象树中属于父子对象的关系。属于父对象的div标签使用style标签属性,定义使用的字体颜色为红色,子对象则没有定义字体颜色。然而,观察范例的运行结果可以发现,属于子对象的span标签虽然没有定义字体颜色,但是依然使用红色来显示标签的内容.形成这种运行结果的机制就是本节所介绍的“样式继承”。
    上面范例的内容,同样是采用一个父子对象的div标签、span标签,来做样式继承的说明。在这个范例中,在父对象的div标签中使用style标签属性定义了红色边框,而子对象没有定义边框样式。观察范例的运行结果可以发现,只有div标签有红色边框,而子对象没有边框,这看起来并不符合样式继承的规则。
    会形成这样的运行结果,其原因主要是:在W3C的定义中是以侮个显示样式为单位,来定义显示样式是否可以被继承。也就是说,不是父对象的每个显示样式都可以被子对象所继承,必须是W3C所定义的能够被继承的显示样式才可以被继承。范例中的边框样式就属于在W3C中定义为不可继承的样式。开发人员在使用样式继承时,如果发现某些显示样式无法继承时,大多是因为这些显示样式是属于不可继承的显示样式。
css样式重设
用户界面类型标签所对应的控件,浏览器都有一组预设的显示样式,这组预设显示样式在W3C的定义内有明确规范每个显示样式的默认值。但不同浏览器在运行W3C所定义的规则时,因为种种不同的考虑,每个浏览器最终都会有细微的差异。这造成了开发人员所编写的网页,在不同浏览器之间运行的结果会在一些细微的地方有显示样式上的差异。
杭州网站建设为了处理这个浏览器上预设显示样式的差异问题,Eric A. Meyer这位CSS大师提出了解决方案:既然每家浏览器显示样式的默认值都不同,那就写个CSS样式表,在网页运行时,先把所有的显示样式重新设置为一样。通过这样的方式,就能人为地提供一个统一的初始化环境,让开发人员减少编写CSS样式表时的负担,这样的解决方案称为“Reset CSS"。
下面的CSS样式表,就是Eric A. Meyer依照Reset CSS的思维模式所创建出来的样式表。开发人员只要在网页上的所有CSS样式表之前,挂载这个重设CSS样式的样式表,就可以获得一个统一的开发环境。各大浏览器经过这样的初始化设置后,就能解决大部分预设显示样式差异的问题。


微信客服二维码
微信客服
QQ客服
返回顶部

获取报价

获取验证码
提交
留下您的联系方式,不久后会收到来电!

信息提交成功,请留意客服来电,谢谢~