Fork me on GitHub

css属性简写集合

作为一个前端攻城狮,CSS那绝对是基础,可是基础也有掌握不牢的时候。今天就来总结一下容易写错的CSS属性简写问题。

1、background

背景颜色:background-color                                    基本语法:background-color : transparent | color

背景图像:background-image                                  基本语法:background-image : none | url ( url )

背景图像铺排:background-repeat                            基本语法:background-repeat : repeat | no-repeat | repeat-x | repeat-y

背景图像滚动还是固定:background-attachment          基本语法:background-attachment : scroll | fixed

背景图像位置:background-position                          基本语法:background-position : length || length或 background-position : position || position 

                                                                                         length :  百分数 | 由浮点数字和单位标识符组成的长度值。请参阅 长度单位

                                                                                         position :  top | center | bottom | left | center | right

以上是经常用到的background属性,大家一般都很熟悉,

其简写方式为:background : background-color || background-image || background-repeat || background-attachment || background-position

可是随着css的发展CSS3中又引入了其他4个属性:

背景的裁剪区域:background-clip                             基本语法:background-clip : border-box | padding-box | content-box | no-clip

                                                                                        border-box:从border区域向外裁剪背景。

                                                                                        padding-box:从padding区域向外裁剪背景。

                                                                                        content-box:从content区域向外裁剪背景。

                                                                                        no-clip:从border区域向外裁剪背景。

背景显示区域:background-origin                            基本语法:background-origin : border | padding | content

设置背景图片大小:background-size                         基本语法:background-size :[ <length> | <percentage> | auto ]{1,2} | cover | contain 

多重背景background : [background-image] | [background-origin] | [background-clip] | [background-repeat] | [background-size] | [background-position]

例如:background: url(img/multiple-backgrounds.png) left top no-repeat, url(img/multiple-backgrounds.png) -320px bottom no-repeat, url(img/multiple-backgrounds.png) -640px top repeat-y;

终于完了!这么多属性怎么简写呢?

查了好多资料终于找到了,好东西就该拿出来分享:

其简写方式为:background: background-color||background-image||background-repeat||background-attachment||background-position / background-size||background-origin||background-clip;

注意里面的反斜杠,它更font和border-radius里简写方式使用的反斜杠的用法相似。主要是区别background-position和background-size

例如:background: url(images/1.jpg) no-repeat scroll center center / 50% content-box content-box red ;

或者:background: url(images/1.jpg) 0 0/20px 20px no-repeat,url(images/2.jpg) 50% 50%/contain no-repeat content-box green;

2、font

字体样式:font-style                                                基本语法:font-style : normal | italic | oblique

设置文本是否为小型的大写字母:font-variant               基本语法:font-variant : normal | small-caps

设置字体的粗细: font-weight                                    基本语法:font-weight : normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 |    700 | 800 | 900

 设置字体尺寸 :font-size                                          基本语法:font-size : xx-small | x-small | small | medium | large | x-large | xx-large | larger |smaller | length

设置文本的字体名称序列: font-family                         基本语法:font-family : ncursive | fantasy | monospace | serif | sans-serif

其简写方式为:font-style || font-variant || font-weight || font-size /line-height || font-family 

例如:font:italic small-caps bold 12px/1.5em arial,verdana;

3、margin & padding   以margin为例,padding相同

其简写方式为:margin:margin-top margin-right margin-bottom margin-left;

例如:margin:1px 1px 1px 1px;

4、border

边框宽度:border-weight                                            基本语法:border-width : medium | thin | thick | length

边框样式:border-style                                               基本语法:border-style : none | hidden | dotted | dashed | solid | double | groove | ridge |       inset | outset 

边框颜色: border-color                                              基本语法:border-width :color

其简写方式为:border : border-width || border-style || border-color

例如:border:1px solid #000; 

5、outline

outline类似border,不同的是border会影响盒模型,而outline不会。 

其简写方式为:outline : outline-color || outline-style || outline-width || outline-offset

例如:outline:red solid 1px; outline-offset:15px;

6、border-radius

右上角半径:border-top-right-radius ,

右下角半径:border-bottom-right-radius ,

左下角半径:border-bottom-left-radius ,

左上角半径:border-top-left-radius

当各个圆角半径相同时其简写方式为:border-radius :border-top-right-radius border-bottom-right-radius border-bottom-left-radius border-top-left-radius;

例如:border-radius:0 6px 6px 6px;一般简写为 border-radius:0 6px 6px;

当各个圆角半径不同时其简写方式为:border-radius : none | <length>{1,4} [ / <length>{1,4} ]?

例如:border-radius:0px 5px 10px 15px/20px 15px 10px 5px;按照上有下左的规律依次写出每个角的两条边的半径

7、color的简写就不说了,太简单了

不知道总结的好不好,若有错烦指出,谢谢!

 

 

posted @ 2015-09-15 20:30  Jesse131  阅读(808)  评论(0编辑  收藏  举报