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

基于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可以写成#f0