CSS复合样式

关于font

OK，我们先从font来谈起。

如下一段代码：

div{

font-size: 14px;

font-family: '\5FAE\8F6F\96C5\9ED1';

font-weight: bold;

font-style:italic;

line-height: 28px;

}

OK，我们看到，这一系列的操作都是针对font的。这些样式，其实我们是可以缩写的。

div{font: italic bold 14px/28px '\5FAE\8F6F\96C5\9ED1';}

 

5行的代码用一个font搞定，

那么这样写是什么意思呢？

首先，font系列，也是可以缩写的

我们来分析一下上面的例子。

div{font: italic bold 14px/28px '\5FAE\8F6F\96C5\9ED1';}

font-style:italic

font- weight:bold

font-size:14px;

line-height:28px;

font-family: '\5FAE\8F6F\96C5\9ED1'; (微软雅黑的字符编码)

 

当然了，这个font还有一些更简单的写法。

如果你只有 字体大小 行高 和 字体的话

那么你就可以这样写了 font:14px/28px ‘\5FAE\8F6F\96C5\9ED1’;

当然 如果你的文字还要加粗的话，可以这样写

font:bold 14px/28px ‘\5FAE\8F6F\96C5\9ED1’;

这几个属性理论上没有顺序之分的

规定的顺序为：font-style，font-variant，font-weight，font-size，font-family 

关于margin

margin-top: 10px;

margin-right: 10px;

margin-bottom: 10px;

margin-left: 10px;

 

OK，这么四个方向的margin都一样，那么就可以简单的写成margin:10px;了

margin中一些有意思的参数：

margin:0;

当它有一个值的时：它是4个方向都一样

Margin:0 auto;

当它有两个值时，第一个参数代表上下  第二个参数代表左右

Margin:0 auto 10px;

当它有三个值时，第一个是上  第二个是左右，第三个是下

Margin:10px 16px 11px 9px;

当他有四个值时，他就是四个方向，顺序是一个顺时针的顺序，故上 右 下 左 的一个顺序

 

Padding

同margin

 

关于background

如下一段背景代码：

background-color: red;

background-image: url(1.jpg);

background-position: left top;

background-repeat: no-repeat;

我们可以把他用复合写法写成

background:red url(1.jpg) left top no-repeat;