css属性简写集合_html/css_WEB-ITnose

WBOY
Release: 2016-06-24 11:36:53
Original
1472 people have browsed it

作为一个前端攻城狮,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 :[ | | 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: red url("images/1.jpg") no-repeat scroll center center / 50% content-box content-box;

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-width || outline-style || outline-color

例如:outline:1px solid red; 

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 | {1,4} [ / {1,4} ]?

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

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

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

 

 

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template