css代码优化

css 代码优化作用与意义

1、减少占用网页字节。在同等条件下缩短浏览器下载css代码时间，相当于加快网页打开速度
2、便于维护。简化和标准化css代码让css代码减少，便于日后维护
3、让自己写的css代码更加专业。

css优化方法

1、缩写css代码。
2、排列css代码。
3、同属性提取共用css选择器。
4、分离网页颜色和背景设置样式（较大站点需要注意）。

5、条理化css代码。

1、缩写css代码

background
未优化前

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

以上CSS代码可以简写为

background:#FFF url(divcss5.gif) repeat-x bottom;

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

margin
未优化前

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

优化简写为

margin:8px 6px 7px 5px; 意思和属性效果同上

padding
未优化前

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

优化简写为

padding:8px 6px 7px 5px; 意思和属性效果同上

border
未优化前

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

可以简写为

border:1px solid #000000;意思同上未优化前

如果是只设置左边边框为1px，颜色为黑色的实线css代码如下

border-left:1px solid #000000;

font
字体的属性如下：

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

可以缩写为一句：

font:italic small-caps bold 12px/22px "黑体";

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

2、排列css代码。

通常我们代码如下排列

<style>
	.yangshi {
		font-size: 12px;
		border: 1px solid #000000;
		padding: 5px;
	}
	.yangshi2 {
		font-size: 12px;
		border: 1px solid #000000;
		padding: 5px;
	}
</style>

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

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

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

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

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

如：

.yangshi{ font-size:12px;border:1px solid #000000;padding:5px; width:25px;}
.yangshi2{ font-size:12px;border:1px solid #000000;padding:5px; width:50px;}

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

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

.gongyong{font-size:12px;border:1px solid #000000;padding:5px;}
.yangshi{ width:25px;}
.yangshi2{width:50px;}

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

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

这点有以上第三点同属性提取共用css选择器特点，但是区别地方，如果站比较大，需要改一个地方即可改变整个站点网页的字体颜色样式，背景图案颜色，边框颜色样式。
这个时候我们将需要在div+css开发的时候特别将的基本字体样式、背景图案颜色、边框等颜色提取到一起或放到一个css文件里，这样一来便于我们维护管理整个站点基本样式。

5、条理化css代码。

条理化css代码意思是将css代码整理归类，如控制头部、局部、底部的css代码选择器样式区别开来分别放到一起并与其他地方css代码互相隔开。
如头部的css代码与内容区css代码回车各行隔开

如以上“toubu”与“dibu”以行隔开得以区分，好处是以后维护方便，便于辨认更改维护。

链接: https://www.fly63.com/article/detial/3480