DIV+CSS代码优化方案

你对DIV+CSS代码优化的概念是否了解，这里和大家分享一下，首先让我们看一下CSS代码优化作用与意义。

成都创新互联公司，为您提供成都网站建设、网站制作公司、网站营销推广、网站开发设计，对服务建筑动画等多个行业拥有丰富的网站建设及推广经验。成都创新互联公司网站建设公司成立于2013年,提供专业网站制作报价服务,我们深知市场的竞争激烈，认真对待每位客户，为客户提供赏心悦目的作品。 与客户共同发展进步，是我们永远的责任！

DIV+CSS代码优化方案

CSS代码优化作用与意义

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

2、便于维护。简化和标准化CSS代码让CSS代码减少，便于日后维护

3、让自己写的CSS代码更加专业。

CSS优化方法-需要优化CSS代码地方

1、缩写CSS代码。

2、排列CSS代码。

3、同属性提取共用CSS选择器。

4、分离网页颜色和背景设置样式（较大站点需要注意）。

5、条理化CSS代码。#p#

实例讲解以上几点DIV+CSS优化方法

1、缩写CSS代码

常用需要缩写CSS属性代码如下：

background(背景属性-CSS手册详细了解background手册)

未优化前 

 
 
 
 

  
  
  
  
background-color:#FFF;对应属性为背景颜色为白色  
  
  
  
  
background-image:url(DIVCSS5.gif);对应属性是设置DIVCSS5.gif图片为背景  
  
  
  
  
background-position:bottom;背景图片是居底部  
  
  
  
  
background-repeat:repeat-x;背景按X坐标（横坐标）重复延伸  
  
  
  
  
 
 
 
 
 

以上CSS代码可以简写为 

 
 
 
 

  
  
  
  
background:#FFFurl(DIVCSS5.gif)repeat-xbottom;  
  
  
  
  
 
 
 
 
 

解释：背景颜色为白色，并以X坐标重复DIVCSS5.gif图片，并且图标居下。未优化CSSbackground属性相同

margin(外补白属性-CSS手册详细了解margin手册)

未优化前 

 
 
 
 

  
  
  
  
margin-left:5px;意思为靠左5px  
  
  
  
  
margin-right:6px;靠右6px  
  
  
  
  
margin-bottom:7px;底部延伸7px  
  
  
  
  
margin-top:8px;顶部延伸8px  
  
  
  
  
 
 
 
 
 

优化简写为

 
 
 
 

  
  
  
  
margin:8px6px7px5px;  
  
  
  
  
 
 
 
 
 

意思和属性效果同上，可详细了解CSSmargin介绍

padding(内补白属性-CSS手册详细了解padding手册)

未优化前 

 
 
 
 

  
  
  
  
padding-left:5px;意思为左补白5px  
  
  
  
  
padding-right:6px;右补白6px  
  
  
  
  
padding-bottom:7px;底（下）补白7px  
  
  
  
  
padding-top:8px;顶（上）补白8px  
  
  
  
  
 
 
 
 
 

优化简写为 

 
 
 
 

  
  
  
  
padding:8px6px7px5px;  
  
  
  
  
 
 
 
 
 

意思和属性效果同上，可详细了解CSSpadding介绍

border(边框属性-CSS手册详细了解border手册)

未优化前

 
 
 
 

  
  
  
  
border-color:#000000;边框颜色为黑色  
  
  
  
  
border-style:solid;边框样式为实线  
  
  
  
  
border-width:1px;边框宽度为1px  
  
  
  
  
 
 
 
 
 

可以简写为

 
 
 
 

  
  
  
  
border:1pxsolid#000000;  
  
  
  
  
 
 
 
 
 

意思同上未优化前
如果是只设置左边边框为1px，颜色为黑色的实线CSS代码如下 

 
 
 
 

  
  
  
  
border-left:1pxsolid#000000;  
  
  
  
  
 
 
 
 
 

font(字体属性-CSS手册详细了解fonts手册)

字体的属性如下： 

 
 
 
 

  
  
  
  
font-style:italic;字体样式  
  
  
  
  
font-variant:small-caps;字体异体  
  
  
  
  
font-weight:bold;字体加粗  
  
  
  
  
font-size:12px;字大小为12px  
  
  
  
  
line-height:22px;字行高为22px  
  
  
  
  
font-family:"黑体"字体为黑体字  
  
  
  
  
 
 
 
 
 

可以缩写为一句：font:italicsmall-capsbold12px/22px"黑体";

注意，如果你缩写字体定义，至少要定义font-size和font-family两个值了解CSSfont技巧。#p#

2、排列CSS代码。

通常我们代码如下排列

这样将占CSS文件很多的空格和回车位空间，这里还占用了12行CSS文件空间
建议你改写为 

 
 
 
 

  
  
  
  
/*CSSwww.DIVCSS5.com实例演示图*/-这里是CSS注释  
  
  
  
  
.yangshi{font-size:12px;border:1pxsolid#000000;padding:5px;}  
  
  
  
  
.yangshi2{font-size:12px;border:1pxsolid#000000;padding:5px;}  
  
  
  
  
 
 
 
 
 

这样将节约空格和回车位，及CSS文件行数，从而节约代码文件字节。

3、同属性提取共用CSS选择器。

这个要了解的是如果有两个部分的CSS属性如宽度高度字体颜色都相同，而有很小一点不同，这个时候我们就需要提取大家相同的CSS样式出来，单独命名一个CSS属性选择器，从而节约CSS代码。
如： 

 
 
 
 

  
  
  
  
/*CSSwww.DIVCSS5.comDIV+CSS实例演示图*/  
  
  
  
  
.yangshi{font-size:12px;border:1pxsolid#000000;padding:5px;width:25px;}  
  
  
  
  
.yangshi2{font-size:12px;border:1pxsolid#000000;padding:5px;width:50px;}  
  
  
  
  
 
 
 
 
 

这里的yangshi和yanshi2两个样式有相同的字体大小为12px，边框相同,内补白相同，只有宽度不同，这个时候我们就可以提取他们相同部分并重新新建个CSS选择器和重用

新建CSS属性选择器演示如下 

 
 
 
 

  
  
  
  
.gongyong{font-size:12px;border:1pxsolid#000000;padding:5px;}  
  
  
  
  
.yangshi{width:25px;}  
  
  
  
  
.yangshi2{width:50px;}  
  
  
  
  
 
  
  
  
  
这样在调用CSS时候-了解CSS引入  
  
  
  
  
DIVCSS样式