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

 

你可能感兴趣的:(css简写)