基于Web标准的CSS样式优化分析

开篇：润墨网以专业的文秘视角，为您筛选了一篇基于Web标准的CSS样式优化分析范文，如需获取更多写作素材，在线客服老师一对一协助。欢迎您的阅读与分享！

摘 要：CSS学起来并不难，但在实际开发的项目中，不同的人在CSS书写风格上会有不同，导致CSS样式臃肿而杂乱，使团队成员的工作效率下降。为此本文总结了一些如何对CSS代码进行优化的方法，以实现CSS代码易读且规范，从而提高项目开发效率。

关键词：CSS；优化；web标准

中图分类号：TP393.092 文献标识码：A 文章编号：1007-9599 （2013） 09-0000-02

CSS样式英文全称是“Cascading Style Sheets”，中文称之为“层叠样式表”，也称为“级联样式表”，是一种布局网页的技术，用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

网页设计要符合web标准实际上就是对网页的结构、表现与行为进行分离――即表现与内容分离。使用CSS能够实现表现与内容分离，能更好地控制页面布局，可以制作出体积更小、下载更快的网页。

1 CSS的基本格式

CSS的定义是由三个部分构成：选择符，属性和属性的取值。

基本格式如下：

样式选择符{属性1：属性值；属性2：属性值；...属性n：属性值；}

样式选择符可以是多种形式，一般是要定义样式的html标记，例如body、table等。

2 CSS代码优化的作用

大部分人使用Dreamweaver这种所见即所得软件来编写CSS，使得代码过于臃肿。CSS代码优化的目的并不仅仅是减少CSS文件的大小，还能让CSS代码更有条理、更高效，从而成为更优秀的网页设计师。CSS代码优化的作用：

2.1 减少占用网页字节。在同等条件下缩短浏览器下载CSS代码时间，相当于加快网页打开速度。

2.2 便于维护。简化和标准化CSS代码，便于日后维护。

3 CSS代码的优化方法

Web网站可用性的关键指标是速度，更确切地说，是页面能以多快的速度出现在访问者的浏览器窗口里。影响速度的因素有很多种，包括Web服务器的速度、访问者的Internet连接情况，以及浏览器必须下载的文件大小。虽然无法控制服务器连接的速度，但是可以控制构成网站Web页面的文件大小。通过使用CSS代码优化的一些技巧，可以在很大程度上减少样式表的大小，具体可以采取以下优化方法：

3.1 规范化的命名方式

无任何语义命名的代码，不仅自己会弄错，更让团队成员修改维护时效率降低，就像这样的代码：

.dcc{margin：5px；color：red；}

这是对class类的命名，名称无任何含义，不便于理解。也不要使用元素的特性，如颜色，大小等，来命名一个class或id，可以选择有意义的命名如：#navigation{...}，.sidebar{...}。这样，无论如何修改定义这些class或id的样式，都不影响它跟HTML元素间的联系。

3.2 利用CSS继承

如果页面中父元素的多个子元素使用相同的样式，最好把它们相同的样式定义在其父元素上，让其继承这些CSS样式。这样不仅方便维护代码，而且还可以减少代码量，如下面这些代码：

#containerli{font-family：Arial；}

#containerp{font-family：Arial；}

可以简写成：

#container{font-family：Arial；}

3.3 使用多重选择符

可以把相同属性和值的选择符组合起来书写，用逗号将选择符分开，这样可以减少样式重复定义，例如：

h1{font-family："黑体"；font-weight：bold；}

h2{font-family："黑体"；font-weight：bold；}

以上包括两种标题元素，每个标题元素的字体都为"黑体"，文字加粗。代码重复，可以简化成：

h1，h2{font-family："黑体"；font-weight：bold；}

3.4 代码缩写

CSS代码缩写可以精简代码量。在CSS里面有不少可以缩写的属性，如margin，padding，border，颜色值等。

Margin（外边距），声明magin值得时候通常会写成这样：

margin-top：0px；

margin-right：10px；

margin-bottom：0px；

margin-left：10px；

我们把值为0的单位去掉，并把4条声明合并成一条声明：

margin：0 10px 0 10px；

这是按照顺时针方向来声明属性值，即上-右-下-左的方向，如果属性上和下，左和右的值相等，还可以进一步优化，省略掉后两个值，剩下的两个值前者指上下，后者指左右，如：

margin：0 10px；它指外边距上下的值为0，左右的值为10px；

color（颜色），在CSS中，颜色属性通常指定为一个十六进制的值，一个#加6位数，如果颜色值由三对成对的数字组成，可以省略掉每对中的一个数字，如：#ff00ff可以写成#f0f；

3.5 为CSS代码排序

如果代码中的属性都能按照字母排序，那查找修改的时候就能更加方便快捷，如：

div{

background-color：#ccc；

color：#0000ff；

font：18pt；

height：20px；

margin：10px5px；

padding：5px10px5px；

}

3.6 选择更优的样式属性值

CSS中有些属性采用不同的属性值，虽然达到的效果差不多，但性能上却存在着差异，如：border：0；虽然在页面上看不见，但按border默认值理解，浏览器依然对border-width、border-color进行了渲染，即已经占用了内存值。而border：none；"none"即没有，浏览器解析"none"时将不作出渲染动作，不会消耗内存值。所以建议使用border：none；同样，display：none隐藏对象，浏览器不作渲染，不占用内存，而visibility：hidden则会。

3.7 使用外部样式表

CSS样式表可以以多种方式应用到html页面中，但最常用最好的方式是外部链接。这种方式是将CSS样式代码放入一个外部文件中，再由html中的link元素进行调用。这样做的好处是可以使多个网页调用同一个样式表文件，最大限度地实现了代码重用及网站文件的最优化配置。

具体方法为：在html页面中的head标签下使用link元素调用。这样不但易于维护修改，而且可以提高页面速度，因为CSS文件都能在浏览器中产生缓存。

CSS样式给网页设计注入了新的生命力，相同的网页内容，应用不同的CSS代码，可以使网页呈现出各种不同的风格。灵活掌握CSS语言并能设计制作出符合web标准的网页，是学习css的最终目标。

参考文献：

[1]杜涛.CSS技术在网页设计中的应用与优化[J].长治学院学报，2007（10）.

[2]宋钢.CSS在网页设计中的运用探讨[J].总裁，2009（10）.

[3]李超.CSS网站布局实录（第2版）[M].北京：科学出版社，2007.