CSS 语法的缩写规则

作者:课课家教育更新于： 2016-09-30 13:51:50

　　今天小编主要给大家介绍css的主要缩写规则，内容就涉及到颜色、盒尺寸、边框、背景、字体以及列表等等方面。而缩写的目的是为了减少CSS文件的大小，让css文件更加易于阅读。

　　CSS缩写的主要规则如下：

　　（一）颜色

　　要是16进制的色彩值当中每两位的值一样，那就可以缩写一半，如下：

　　#000000能缩写为#000；

　　#336699能缩写为#369;

　　（二）盒尺寸

　　以下有四种书写方法:

　　（1）property:value1：指的是全部边都是一个值value1；

　　（2）property:value1value2：是指top以及bottom的值为value1，right以及left的值为value2；

　　（3）property:value1value2value3：指的是top的值是value1，right以及left的值为value2，然而bottom的值是value3；

　　（4）property:value1value2value3value4：这四个值分别表示top,right,bottom以及left。

　　记忆方法便利的是顺时针，上右下左。应用在margin以及padding的例子如下：

　　（三）边框(border)

　　边框属性如下图：

　　能缩写为：border:1px，solid#000;

　　语法为：border:widthstylecolor;

　　（四）背景(Backgrounds)

　　背景属性如下图：

　　能缩写为：background：#f00url(background.gif)no-repeatfixed00;

　　语法为：background:colorimagerepeatattachmentposition;

　　能省略其中的一个或者是多个属性值，要是省略的话，这个属性值就会用浏览器的默认值，它的默认值是：

　　（五）字体(fonts)

　　字体属性如下图：

　　能缩写为：font:italicsmall-capsbold1em/140%"LucidaGrande",sans-serif;

　　注意：要是缩写字体定义，至少要定义font-size以及font-family这两个值。

　　（六）列表(lists)

　　取消默认的圆点以及序号如下：list-style:none;,

　　list属性如下图:

　　能缩写为：list-style:squareinsideurl(image.gif);

　　总结：缩写的主要目的就是为了减少CSS文件的大小，让css文件更加易于阅读。我们网站将会给大家介绍更多关于Web开发的内容。感兴趣的小伙伴可以关注我们网站：课课家教育。