CSS布局教程

基于web标准的网站设计指南

« 属性的组织web布局实例"hello world"——案例效果图分析 »

CSS代码优化技巧

利用继承性优化代码
在CSS中,子元素会自动继承父元素的属性值,如颜色、字体、大小、行距等排版格式。已经在父元素中定义过的属性,在子元素中可以直接继承,不需要事重复定义。例如,在下面的代码中,我们就可以把清除超链接下划线的声明全部删除,然后在a元素中统—定义,通过继承而影响所有超链接伪类:
可以优化为:但要注意,并不是所有属性都可以继承。一般来说,如布局、盒模型属性的display, width、height等只使用自己的属性值,不会继承上级元素。
利用默认值优化代码
css的属性一般都预定义默认值,如果我们定义的属性值与默认值相同时,就没有必孽再重复义了。例如,color默认为黑色,font-size默认为16像素,padding默认为0,background-color默认为transparent等。每个属性都有自己的默认值,有些是CSS自身默认,个别属性是根据浏览器默认设置。作为设计师应清楚每个属性的默认值。
但是不同的浏览器默认值也可能存在不同。如果担心发生冲突,可以在样式表开头先统一定义属性的默认值,如所有元素的margin和padding值都为0,字体大小为12像素,行高为1.8e可以定义为:利用默认值可以擗龟同一个属性值在不同元素中被反复声明。
利用公共类优化代码
类具备可以被反复调用的特性,同时每个标签可以同时定义多个class。因此我们可以把其中具有相同属性值的声明统一起来放在一个公共类中,需要时反复引用即可。
利用选择符分组优化代码
定义公共类能够优化代码,使用选择符分组也可以实现相同的优化效果,而且它能够适用更多的对象,如id或其他选择符。一般当一些元素、class或者id具有共同的属性时,就可以使用分组来避免多次重复定义。
如果对同一个元素定义了多个样式,在相同特殊性的情况下,CSS会遵循最近原则也就是说相同属性声明,后面的值会覆盖掉前面的值,利用这一特点也可以优化代码。在上面样式代码中,在公共样式中定义字体颜色为蓝色,然后通过层叠覆盖的方法实现其中#title2和#title2两个选择符显示不同的颜色,而#titlel会继承公共样式的颜色。CSS代码优化的方法还很多,从事天津网站建设的人员可以在平时工作中不断进行总结。但代码优化要与样式管理和维护统…起来,不能纯粹为了优化,就把网页中所有元素的相同属性都给统一起来,放在公共类中,或者把不同模块巾的选择符混合分在一组。这样做实际上是非常有害的,它不利于样式的后期管理与维护。所以,在优化时,要用适当就近的原则,在同一模块内进行优化。不过有些具有全局属性的内容罚以统—定义。

  • 相关文章:

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

日历

最新评论及回复

最近发表

Powered By Z-Blog 1.8 Arwen Build 90619

Copyright www.zxh6655.cn. Some Rights Reserved.黑ICP备09093629号