CSS 的简写属性

作者: markahcn | 来源:发表于2016-06-27 14:24 被阅读368次

定义

简写属性是可以让你同时设置其他几个 CSS 属性值的 CSS 属性。使用简写属性，Web 开发人员可以编写更简洁、更具可读性的样式表，节省时间和精力。

CSS 规范定义简写属性的目的在于将那些关于同一主题的常见属性的定义集中在一起。比如 CSS 的 background 属性就是一个简写属性，它可以定义 background-color、background-image、background-repeat 和 background-position 的值。类似地，最常见的字体相关的属性可以使用 font 的简写，盒子（box）各方向的外边距（margin）可以使用 margin 这个简写。

1. Font 属性

font-family，font-style，font-variant，font-weight，font-size，font

font-family（字体族）: “Arial”、“Times New Roman”、“宋体”、“黑体”等;

font-style（字体样式）: normal（正常）、italic（斜体）或oblique（倾斜）;

font-variant (字体变化): normal（正常）或small-caps（小体大写字母）;

font-weight (字体浓淡):是normal（正常）或bold（加粗）。有些浏览器甚至支持采用100到900之间的数字（以百为单位）;

font-size（字体大小）: 可通过多种不同单位（比如像素或百分比等）来设置, 如：12xp，12pt，120%，1em

如果用 font 属性的话，就可以把几个样式进行简化，减少书的情况；font 属性的值应按以下次序书写(各个属性之间用空格隔开)：

字体样式 | 字体变化 | 字体浓淡 | 字体大小 | 字体族

font-style | font-variant | font-weight | font-size | font-family

例如：

.text{

font-style:italic;

font-variant:normal;

font-weight:bold;

font-size:30px;

font-family:arial, sans-serif;

}

上面的样式简写为：

.text{font:italic normal bold12pxarial,verdana;}

2. Background 属性

background-color：#999999； //元素的背景色

background-image : url("bg-img.png"); //设置背景图像

background-repeat : repeat-x | repeat-y | repeat | no-repeat; //设置重复方式

background-attachment : fixed | scroll; //设置背景图片的固定方式

background-position : X轴坐标,Y轴坐标[top,bottom,center,left,right,20px,10%];

//设置背景的左上角位置,坐标可以是以百分比或固定单位

background 可以用这个属性把前面几个综合起来进行简写

background 各个值的次序依次如下：

背景色| 背景图 | 背景图重复方式 | 背景图固定方式 | 背景图坐标

background-color | background-image | background-repeat | background-attachment | background-position

如果省略某个属性不写出来，那么将自动为它取缺省值。

比如，如果去掉background-attachment和background-position的话：

background:#FFCC66url("bg-img.png") no-repeat;

例如:

.bg{background-color:#FFCC66;background-image:url("bg-img.png");background-repeat:no-repeat;background-attachment:fixed;background-position:left top;}

上面可以简写为:

.bg{background:#FFCC66url("bg-img.png") no-repeat fixed left top; }

3. Border 属性

border:[border-width ||border-style ||border-color |inherit];

border-width:1px;border-style:solid;border-color:#000;

可以简写成 border:1pxsolid#000;

属性

border-top:1pxsolid#000;

border-right:2pxsolid#000;

border-bottom:3pxsolid#000;

border-left:4pxsolid#000;

可以简写成

border:1px solid#0002px solid #0003px solid #0004px solid #000;

border-style取值

none

No border.

*hidden

Same as 'none', but in the collapsing border model, also inhibits any other border (see the section on border conflicts).

dotted

The border is a series of dots.

dashed

The border is a series of short line segments.

solid

The border is a single line segment.

double

The border is two solid lines. The sum of the two lines and the space between them equals the value of 'border-width'.

groove

The border looks as though it were carved into the canvas.

ridge

The opposite of 'groove': the border looks as though it were coming out of the canvas.

*inset

In the separated borders model, the border makes the entire box look as though it were embedded in the canvas. In the collapsing border model, drawn the same as 'ridge'.

*outset

In the separated borders model, the border makes the entire box look as though it were coming out of the canvas. In the collapsing border model, drawn the same as 'groove'.

4. border-radius 圆角属性

border-top-left-radius

border-top-right-radius

border-bottom-right-radius

border-bottom-left-radius

类似边框border属性
取值 [<length> |<percentage> ]{1,2}

border-top-left-radius:5px30%;

border-top-right-radius:5px30%;

border-bottom-right-radius:5px30%;

border-bottom-left-radius:5px30%;

border-radius:5px30%;

如果实现一个圆可以

div{width:100px;height:100px;border:2pxsolid red;border-radius:50%;background:#00ffff;}

5. Margin 和 Padding 属性

注意，值是从 top 顺时针开始的：top、right、bottom、接着是 left

上 | 右 | 下 | 左

padding-top | padding-right | padding-bottom | padding-left

margin-top | margin-right | margin-bottom | margin-left

padding : 1px 2px 3px 4px;

margin : 1px 2px 3px 4px;

6. border-image 属性

引入图片

border-image-source

border-image-source:url(image url);

切割引入的图片

border-image-slice

border-image-slice: [<number> |<percentage> ]{1,4}&& fill?

边框的宽度

border-image-width

border-image-width: [<length> |<percentage> |<number> | auto ]{1,4}

图片的排列方式

border-image-repeat

border-image-repeat: [ stretch | repeat | round ]{1,2}

border-image对表格table的影响

https://drafts.csswg.org/css-backgrounds-3/#border-image-tables

https://www.w3.org/TR/2011/REC-CSS2-20110607/tables.html#border-conflict-resolution

7. transition 过渡

transition 是一个简写属性，可设置 transition-property, transition-duration, transition-timing-function, transition-delay。 transition用来定义元素在两种状态之间的过渡。不同状态可以用:hover 、:active之类的 pseudo-classes 定义，或者使用 JavaScript 动态设置。

几种动画效果

ease：（逐渐变慢）默认值，ease函数等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0).

linear：（匀速），linear 函数等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0).

ease-in：(加速)，ease-in 函数等同于贝塞尔曲线(0.42, 0, 1.0, 1.0).

ease-out：（减速），ease-out 函数等同于贝塞尔曲线(0, 0, 0.58, 1.0).

ease-in-out：（加速然后减速），ease-in-out 函数等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)

cubic-bezier：（该值允许你去自定义一个时间曲线），特定的cubic-bezier曲线。 (x1, y1, x2, y2)四个值特定于曲线上点P1和点P2。所有值需在[0, 1]区域内，否则无效。

其是cubic-bezier为通过贝赛尔曲线来计算“转换”过程中的属性值，如下曲线所示，通过改变P1(x1, y1)和P2(x2, y2)的坐标可以改变整个过程的Output Percentage。初始默认值为default.

样式

a{

-moz-transition:background0.5sease-in,color0.3sease-out;

-webkit-transition:background0.5sease-in,color0.3sease-out;