常见CSS属性简写

一、定义

  简写属性是可以让你同时设置其他几个 CSS 属性值的 CSS 属性。使用简写属性，Web 开发人员可以编写更简洁、更具可读性的样式表，节省时间和精力。
  CSS 规范定义简写属性的目的在于将那些关于同一主题的常见属性的定义集中在一起。比如 CSS 的 background 属性就是一个简写属性，它可以定义 background-color、background-image、background-repeat 和 background-position 的值。类似地，最常见的字体相关的属性可以使用 font 的简写，盒子（box）各方向的外边距（margin） 可以使用 margin 这个简写。

二、棘手的边界情况

虽然它们使用起来非常方便，但在使用时，仍需牢记一些边界情况：

1. 没有指定的值会被设置为它的初始值。这听起来似乎本来就很合理的样子，但这确实意味着，它将会覆盖之前设置的值。因此：

background-color: red;
background: url(xxx/xxx.png) no-repeat top right;

  以上样式不会将 background 的 color 值设置为 red，而是 background-color 的默认值 transparent，因为第二条规则优先。

2. 简写属性不试图强制它们替代属性的值的特定顺序。这适用于当这些属性使用不同类型的值时，因为这个时候顺序并不重要。但当几个属性可以设置相同值的时候，就没那么简单了。处理这些情况分以下几种类型：

（1）处理和盒子（box）边界（edge）相关的属性时，比如 border-style、margin 或者 padding， 始终使用一致的1个到4个值的语法表示这些边界：

以border-width为例	说明
	1个值的语法：border-width: 1em — 这一个值表示所有的边框宽度
	2个值的语法：border-width: 1em 2em — 第一个值表示垂直方向的，即 top 和 bottom；第二个值表示水平方向的，即 left 和 right
	3个值的语法：border-width: 1em 2em 3em — 第一个值表示 top；第二个值表示水平方向的，即 left 和 right； 第三个值表示 bottom
	4个值的语法：border-width: 1em 2em 3em 4em — 这四个值分别表示 top、right、bottom、left，总是按此顺序，即从 top 开始的顺时针顺序（Top-Right-Bottom-Left 首字母与英文单词 trouble 的顺序一致：TRBL）

（2）同样，在处理和盒子的角相关的属性时，比如 border-radius，也始终使用一致的 1个到4个值的语法表示：

以border-radius为例	说明
	1个值的语法：border-radius: 1em — 这一个值表示所有的表框角度的半径
	2个值的语法：border-radius: 1em 2em — 第一个值表示 top-left 和 bottom-right 方向的角；第二个值表示 top-right 和 bottom-left 方向的角
	3个值的语法：border-radius: 1em 2em 3em — 第一个值表示 top-left 方向的角 ，第二个值表示top-right 和 bottom-left 方向的角，第三个值表示 bottom-right 方向的角
	4个值的语法：border-radius: 1em 2em 3em 4em — 这四个值分别表示top-left、 top-right、 bottom-right 、bottom-left 方向的角。总是按此顺序，即从top-left开始的顺时针顺序

三、CSS属性的简写

1. background属性

（1）属性的种类

background-color /*背景色*/
background-image /*背景图片*/
background-repeat /*背景图平铺方式*/
background-position/*背景图的位置*/

background-color: gray;
background-image: url(xxx/xxx.png);
background-repeat: no-repeat;
background-position: top right;

（2）属性的简写

background: gray url(xxx/xxx.png) no-repeat top right;

/* background 属性简短写法 */  
background: [background-color] [background-image] [background-repeat] [background-attachment] [background-position];   

说明：简写的形式实际上等价于以上普通属性再加上 background-attachment: scroll 以及 CSS3 中的一些附加属性。

说明：background 的各属性及其默认值

/* background 的各属性及其默认值 */  
background-attachment: scroll;   
background-color: transparent;   
background-position: top left;   
background-repeat: repeat;   
background-image: none;  

2. font属性

（1）属性的种类

font-style: italic; /*自体*/
font-weight: bold; /*加粗*/
font-family: arial,sans-serif; /*字体种类*/
font-size: 20px; /*字号大小*/
line-height: 35px; /*行高*/

（2）属性的简写

font: italic bold arial,sans-serif 20px 35px;

/* 字体各属性前后顺序 */  
font: [font-style] [font-variant] [font-weight] [font-size]/[line-height] [font-family];  

说明：font各属性与默认值

/* font 各属性与默认值 */  
font-variant: normal;   
line-height: normal;   
font-family: varies;   
font-weight: normal;   
font-style: normal;   
font-size: medium;  

3. Border 属性

  对于 border 来说，宽度、颜色和类型是可以被简写到一个声明里的。

（1）属性的种类

border-width /*边框宽度*/
border-style /*边框样式*/
border-color /*边框颜色*/

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

（2）属性的简写

border: 1px solid #000;

/* border 属性简短写法 */  
border: [border-width] [border-style] [border-color];   

说明：border 各属性及其默认值

/* border 各属性及其默认值 */  
border-width: none;   
border-style: none;   
border-color: none;  

4. Margin 和 Padding 属性

  margin 和 padding 值的简写版本类似。

（1）属性的种类

margin-top: 10px;
margin-right: 5px;
margin-bottom: 10px;
margin-left: 5px;

（2）属性的简写

margin: 10px 5px 10px 5px;//从 top 顺时针开始的：top、right、bottom、接着是 left

5. list属性

  取消默认的圆点和序号可以这样写list-style:none;

（1）属性的种类

list-style-type:square; 
list-style-position:inside; 
list-style-image:url(image.gif); 

（2）属性的简写

list-style:square inside url(image.gif); 

/* list 属性简短写法 */  
list-style: [list-style-type] [list-style-position] [list-style-image];   

说明：list属性与默认值

/*list属性与默认值*/
list-style-type: disc;   
list-style-image: none;   
list-style-position: outside;  

6. outline属性

（1）属性的种类

outline-width:3px;
outline-style: dotted;
outline-color:red;

（2）属性的简写

outline: 3px dotted red;