|
众所周知，SEO优化很重要的一点就是布局，而DIV+CSS布局优于TABLE，接下来为大家简单介绍一下CSS代码的优化。
一、CSS样式属性单词代码简写优化
有些元素是有复合属性的，用其复合属性来简写代码。
1,border(css边框)
1》4个边样式,宽度，颜色，都一样则可以用border:solid 1px red;(以红色实线1像素为例)
2》单独上、下、左、右边框简写
左边，border-left:solid 1px red;
右边，border-right:solid 1px red;
上边，border-top:solid 1px red;
下边，border-bottom:solid 1px red;
3》技巧性简写边框
有时只设置3边的边框时候，我们可以技巧性减少代码量。
假如我们不设置上边框，而其他3边为1px实现红色边框。可以简写为：border:solid 1px red;border-top:0
2,padding
四边设置padding内补白属性(其中有个继承原则：上继承下，左继承右，右继承上)
1》padding:10px 20px 30px 40px(四个值分别代表元素的上，右，下，左距离)
2》padding:10px 20px 30px(其中padding-left没有设置，继承padding-right,它代表20px)
3》padding:10px 20px(同理表示padding-bottom:10px;padding-left:20px)
4》padding:10px(表示四个值都为10px)
3，margin
Margin与padding缩写类似
4，background
CSS背景比较常用的样式属性，包括单独设置一个背景颜色、单独设置背景为图片、单独设置背景图片是否重复，重复是全部重复还是按照X横向或Y纵向重复。接下来我们介绍background背景样式常用简写与注意。
1》单独设置一个背景颜色
background-color:#000;可以简写为:background:#000;
2》单独设置背景为图片(浏览器默认是x,y向重复平铺的)
background-image:url(图片地址);可简写为：background:url(图片地址)
3》背景为图片，X横向重复平铺
ackground-image:url; background-position:0 0; background-repeat:repeat-x
简写为:
background:url repeat-x 0 0;
4》背景为图片，Y纵向重复平铺
background-image:url; background-position:0 0; background-repeat:repeat-y
简写：
background:url repeat-y 0 0;
5》背景为图片，不重复平铺
background-image:url; background-position:0 0; background-repeat:no-repeat
简写：
background:url no-repeat 0 0;
6》背景为黑色，图片向X横向重复平铺(既有背景图片又有背景颜色)
background-color:#CCC;background-image:url; background-position:0 0; background-repeat:repeat-x;
简写为:
background:#CCC url repeat-x 0 0;
这里注意颜色与图片前后顺序。
5,font
font复合属性是比较特殊的。因其复合属性的属性值，顺序不可以打乱。但属性值有些可以省略，缺省值以浏览器默认值为准。
即：font:font-style font-variant font-weight font-size line-height font-family;
二、标点符号优化
1、删除多余空格字符
2、删除每个选择器最后一个分号
三、删除换行
删除空格与换行，让代码都挤一起。
注意：代码都堆积到一起，对搜索引擎固然是好，可是却不利用自己查看代码。
四、CSS代码的共用属性提取达到节约代码、维护方便。
.a{width:200px; height:100px;font-size:16px; text-align:left; float:left;}
.b{width:200px; height:100px;font-size:16px; text-align:right; float:left;}
可以简写为:.a,.b{width:200px; height:100px;font-size:16px; text-align:left; float:left;}
.b{text-align:right;}(css就近原则)
若要了解更多代码优化，可以参考http://www.xuexuexi.com/seo/code/
|
