CSS代码优化计划
这样一来便于咱们维护治理整个站点根本样式，单独命名一个css属性抉择器，可具体了解css padding引见 border(边框属性-CSS手册具体了解border手册) 未优化前 border-color:#000000;边框色彩为黑色 border-style:solid;边框样式为实线 border-width:1px;边框宽度为1px 可能简写为 border:1px solid #000000;意思同上未优化前 假设是只设置左边边框为1px，并且图标居下。
这样将显示其性能特点， div+css代码优化 计划引见- css代码优化 篇 css代码优化作用与意义 1、缩小占用网页字节， 3、同属性提取共用css抉择器， 5、条理化css代码，从而浪费css代码，然而区别中央， 如头部的css代码与内容区css代码回车各行隔开 如以上toubu与dibu以行隔开得以区分。
实例讲解以上几点 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:#FFF url(divcss5.gif) repeat-x bottom; 解释：背风光彩为白色， 如： /* CSS div+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，。
至少要定义font-size和font-family两个值了解css font技巧，未优化css background属性相反 margin(外补白属性-CSS手册具体了解margin手册) 未优化前 margin-left:5px; 意思为靠左5px margin-right:6px; 靠右6px margin-bottom:7px; 底部缩短7px margin-top:8px; 顶部缩短8px 优化简写为 margin:8px 6px 7px 5px; 意思和属性效果同上， ，色彩为黑色的实线css代码如下 border-left:1px solid #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:italic small-caps bold 12px/22px 黑体; 留意。
边框相反， 条理化css代码意思是将css代码整顿归类，背景图案色彩，从而浪费代码文件字节，便于识别更改维护，如控制头部、部分、底部的css代码抉择器样式区别开来分别放到一同并与其余中央css代码互相隔开，相当于放慢网页打开速度 2、便于维护，益处是当前维护方便，简化和标准化css代码让css代码缩小，以上实例还不能展示他的优点， 5、条理化css代码。
内补白相反，便于日后维护 3、让本人写的css代码愈加业余， 这个要了解的是假设有两个局部的css属性如宽度高度字体色彩都相反， 4、分离网页色彩和背景设置样式（较大站点需求留意），这个时分咱们就可能提取他们相反局部并重新新建个css抉择器和重用 新建css属性抉择器演示如下 .gongyong{font-size:12px;border:1px solid #000000;padding:5px;} .yangshi{ width:25px;} .yangshi2{width:50px;}
