常用CSS缩写语法总结

鸶雯

使用缩写可以帮助减少你CSS文件的大小，更加容易阅读。css缩写的主要规则如下：
颜色
16进制的色彩值，如果每两位的值相同，可以缩写一半，例如：
#000000可以缩写为#000;#336699可以缩写为#369;
盒尺寸
通常有下面四种书写方法:
property:value1; 表示所有边都是一个值value1；
property:value1 value2; 表示top和bottom的值是value1,right和left的值是value2
property:value1 value2 value3; 表示top的值是value1，right和left的值是value2，bottom的值是value3
property:value1 value2 value3 value4; 四个值依次表示top,right,bottom,left
方便的记忆方法是顺时针，上右下左。具体应用在margin和padding的例子如下：
margin-top:120px;
margin-right:200px;
margin-bottom:20px;
margin-left:30px;
margin:1px 0 2px 5px;

margin:1px 2px 5px;
margin:0 auto;
上为1px，左右为2px，下为5px
边框(border)
边框的属性如下：
border-width:1px;
border-style:solid;
border-color:#000;
可以缩写为一句：border:1px solid #000;
语法是border:width style color;
可以对border的4个边应用单独的样式，语法如下：
border-top:width style color;
border-right:width style color;
border-bottom:width style color;
border-left:width style color;
例如：p{border-top：1px solid blue；
        border-right：1px dashed red；}

border-width:top|right|bottom|left;
border-color:top|right|bottom|left;
border-style:top|right|bottom|left;
例如：p{border-width：1px 2px 3px 4px；
        border-color：blue white red green；
        border-style：solid dashed；}

背景(Backgrounds)
背景的属性如下：
background-color:#f00;
background-image:url(background.gif);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:0 0;
可以缩写为一句：background:#f00 url(background.gif) no-repeat fixed 0 0;
语法是background:color image repeat attachment position;
你可以省略其中一个或多个属性值，如果省略，该属性值将用浏览器默认值，默认值为：
color: transparent
image: none
repeat: repeat
attachment: scroll
position: 0% 0%
字体(fonts)
字体的属性如下：
font-style:italic;
font-variant:small-caps;
font-weight:bold;
font-size:1em;
line-height:140%;
font-family:"Lucida Grande",sans-serif;
可以缩写为一句：font:italic small-caps bold 1em/140% "Lucida Grande",sans-serif;
注意，如果你缩写字体定义，至少要定义font-size和font-family两个值。
列表(lists)
取消默认的圆点和序号可以这样写list-style:none;,
list的属性如下:
list-style-type:square;
list-style-position:inside;
list-style-image:url(image.gif);
可以缩写为一句：list-style:square inside url(image.gif);
二、css代码优化(案例06)
css缩写使我们从复杂的css代码中解脱出来，但语法上的简写并不能从根本上解决涉及者在开发过程中，由于自身习惯及经验不足等原因所产生的多余甚至垃圾代码，在很多情况下，有必要对已经完成的网页样式表进行重新检查，发现多余和垃圾代码并对其进行优化。
1.增加代码重用率
  css简化的目的是，使我们的代码更加简单精炼，减少代码数量，提高可读性，简化css代码的主要途径，就是使用css缩写与群组选择符进行代码优化。
  在使用群组选择符的同时，除了对公共属性进行整理外，还有一点非常重要的，就是一定要根据当前页面的情况进行合理处理，不能仅仅为了减少代码而去重新编写公共属性。
  有时候，尽管发现同一属性在多个区域同时出现的情况，但由于每个区域其使用目的不同，比如某新闻标题与正文都为同一字号，但在未来网页进行升级或优化时，根据设计需求，新闻标题与正文的大小需要区分开来。如果之前将字号进行了统一处理，在未来改动时就需要重新编写样式，反而造成工作量的增加及资源浪费。因此在对css进行简化的时候，不能一概而论。
2.使用样式覆盖进行简化
   如果css对某一元素应用了多个样式代码，往往是后一段代码替代前一段代码。利用这个特性，可以采用覆盖方式，使得代码得到重用。
   在实际的网站开发中，这两种代码优化方法十分实用，实际上，css可以被优化，简化的地方以及方法非常多，我们可以根据网站的需求及样式编码方式分别对待，最终实现css代码的优化、简化，使之更简洁，合理。