css样式简写

简写是 css 高效写法之一,简写能让你的css文件更小更易读。

 

font字体样式的缩写：

font:font-style(样式) font-variant font-weight font-size/line-height font-family

注意：如果定义了部分字体样式属性，同样也可以缩写，但font-size和font-family这两项必须定义，且位置按顺序排在值列表的最后。

font-size/line-height（line-height是可选的）

注意：文本颜色不可以同字体样式一起缩写，必须单独定义。  字体样式、文本样式不要混淆。只要记住文字样式，剩下的就是文本样式了。

如：div{font:italic normal bold 12px/20px 宋体;color:#369;}

 

CSS 文本属性可定义文本的外观。

通过文本属性，您可以改变文本的颜色、字符间距，对齐文本，装饰文本，对文本进行缩进，等等。

 

CSS 字体属性定义文本的字体系列、大小、加粗、风格（如斜体）和变形（如小型大写字母）。

 

文本样式没有缩写

color设置文本颜色

direction设置文本方向。

line-height设置行高。

letter-spacing设置字符间距。

text-align对齐元素中的文本。

text-decoration向文本添加修饰。

text-indent缩进元素中文本的首行。

text-transform控制元素中的字母。

white-space设置元素中空白的处理方式。

word-spacing设置字间距。

 

background背景样式的缩写：

background:background-color background-image background-repeat background-attachment background-position。

如：background:#369 url(../images/01img.gif) repeat fixed 6px 4px;

背景属性各个属性值没有先后顺序，不管有几个单项，都可以使用缩写代替。

fixed--background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动。

6px 4px--background-position 属性设置背景图像的起始位置。

 

padding、margin的缩写：

其缩写都是按“上右下左”顺时针方向格式来进行的：

padding:padding-top padding-right padding-bottom padding-left

margin:margin-top margin-right margin-bottom margin-left

在这里我们只拿padding来举例说明

{padding:10px;}如果上右下左的值相同，则可缩写为一个值。

{padding:10px 20px;}上、下值为10px,右、左值为20px;

{padding:10px 20px 30px;}分别表示 上填充 左右填充 下填充，这个属性大家要加以区别。

 

border边框样式的缩写：

边框对象本身是一个复杂的对象，border属性包括样式(type)、大小(width)、颜色(color)三个方面的属性，还分为上、右、下、左4个方向，

border对象提供的缩写样式也较多，不仅可以对整个border对象进行缩写，还可以单独对某一边进行缩写。

(1).整个边框属性值的缩写：

border:border-width border-style color 三个值的先后顺序可以改变。

例：#box{border:1px solid #fff;}

(2).边框4条边属性值的缩写：

边框对象的4条边可以单独缩写，格式如下：

border-top:border-width border-style color;

 

例如定义上边框的样式：

#box{border-top:1px solid #123;}

边框三个值的先后顺序可以改变，省略部分属性采用默认值。

 

列表样式缩写：

list-style:list-style-type(类型)

list-style-position(位置)

list-style-image(项目符号图象)

例如设置li标签的类型为“方块”，位置为“内”，项目符号图象为“0101bg.gif”,则定义如下：

li{

list-style-position:inside;

list-style-image:url(../images/0101bg.gif);

list-style-type:square;

}

可缩写为：

li{

list-style:square inside url(../images/0101bg.gif);

}

列表3个属性的顺序可以改变，省略部分属性采用默认值。