关于font
OK,我们先从font来谈起。
如下一段代码:
div{
font-size: 14px;
font-family: '5FAE8F6F96C59ED1';
font-weight: bold;
font-style:italic;
line-height: 28px;
}
OK,我们看到,这一系列的操作都是针对font的。这些样式,其实我们是可以缩写的。
div{font: italic bold 14px/28px '5FAE8F6F96C59ED1';}
5行的代码用一个font搞定,
那么这样写是什么意思呢?
首先,font系列,也是可以缩写的
我们来分析一下上面的例子。
div{font: italic bold 14px/28px '5FAE8F6F96C59ED1';}
font-style:italic
font- weight:bold
font-size:14px;
line-height:28px;
font-family: '5FAE8F6F96C59ED1'; (微软雅黑的字符编码)
当然了,这个font还有一些更简单的写法。
如果你只有 字体大小 行高 和 字体的话
那么你就可以这样写了 font:14px/28px ‘5FAE8F6F96C59ED1’;
当然 如果你的文字还要加粗的话,可以这样写
font:bold 14px/28px ‘5FAE8F6F96C59ED1’;
这几个属性理论上没有顺序之分的
规定的顺序为: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;