DIV+CSS代码优化方案

开发 前端
本文向大家描述一下DIV+CSS代码优化方案,主要包括CSS代码优化作用与意义以及实例讲解几种CSS优化方法的使用,相信你一定会感兴趣。

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

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手册)

未优化前 

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

以上CSS代码可以简写为 

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

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

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

未优化前 

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

优化简写为

  1. margin:8px6px7px5px;  
  2.  

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

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

未优化前 

  1. padding-left:5px;意思为左补白5px  
  2. padding-right:6px;右补白6px  
  3. padding-bottom:7px;底(下)补白7px  
  4. padding-top:8px;顶(上)补白8px  
  5.  

优化简写为 

  1. padding:8px6px7px5px;  
  2.  

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

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

未优化前

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

可以简写为

  1. border:1pxsolid#000000;  
  2.  

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

  1. border-left:1pxsolid#000000;  
  2.  

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

字体的属性如下: 

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

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

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

2、排列CSS代码。

通常我们代码如下排列

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

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

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

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

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

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

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

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

  1. .gongyong{font-size:12px;border:1pxsolid#000000;padding:5px;}  
  2. .yangshi{width:25px;}  
  3. .yangshi2{width:50px;}  
  4.  
  5. 这样在调用CSS时候-了解CSS引入  
  6. <DIVclassDIVclass="gongyongyangshi">DIVCSS样式</DIV> 
  7. <DIVclassDIVclass="gongyongyangshi2">DIVCSS样式2</DIV> 

这样就可以让通过调用相同CSS样式,再分别调用不同CSS属性类即可,以上实例还不能展示他的优点,但是如果代码多而且有很多地方如以上特点,这样将显示其功能特点。

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

这点有以上第三点同属性提取共用CSS选择器特点,但是区别地方,如果站比较大,需要改一个地方即可改变整个站点网页的字体颜色样式,背景图案颜色,边框颜色样式。

这个时候我们将需要在DIV+CSS开发的时候特别将的基本字体样式、背景图案颜色、边框等颜色提取到一起或放到一个CSS文件里,这样一来便于我们维护管理整个站点基本样式。

5、条理化CSS代码。

条理化CSS代码意思是将CSS代码整理归类,如控制头部、局部、底部的CSS代码选择器样式区别开来分别放到一起并与其他地方CSS代码互相隔开。
如头部的CSS代码与内容区CSS代码回车各行隔开
如以上“toubu”与“dibu”以行隔开得以区分,好处是以后维护方便,便于辨认更改维护。

DIVCSS5通过以上实例讲解的CSS优化方法及CSS优化方案希望对大家有帮助。

【编辑推荐】

  1. DIV CSS编码时必须注意的细节
  2. IE6、IE7、Firefox中margin问题解决办法
  3. DIV CSS隐藏内容样式方法详解
  4. CSS兼容:解决IE6、IE7和IE8的兼容问题妙招
  5. DIV CSS网页布局需要掌握的八大技巧

 

责任编辑:佚名 来源: divcss5.com
相关推荐

2010-08-25 09:11:57

DIVCSS

2010-08-31 16:09:04

DIV+CSS

2010-08-27 14:05:40

DIV+CSS

2010-08-25 12:47:40

DIVCSS

2010-08-30 10:46:13

DIV+CSS

2010-08-24 10:32:34

DIV+CSS

2010-08-16 15:19:35

DIV+CSS教程

2010-09-14 11:19:23

DIV+CSS技术

2010-08-24 11:25:06

DIVCSS

2011-05-17 09:51:27

Div+CSS

2012-08-06 09:40:36

DIV

2010-08-23 11:08:28

DIV+CSS

2010-08-30 11:08:53

DIV+CSS

2010-08-16 13:17:47

DIV+CSS

2010-08-16 16:17:21

2010-09-14 10:41:24

DIV+CSS排版

2010-09-14 12:58:41

DIV+CSS圆角

2010-08-23 14:30:14

DIV+CSS

2011-05-26 18:05:01

DIV+CSS

2011-07-05 16:26:48

DIV+CSS
点赞
收藏

51CTO技术栈公众号