简写是 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个属性的顺序可以改变,省略部分属性采用默认值。