一、字体样式
1、font-style：设置或检索对象中的文本字体样式。
取值：
normal：指定文本字体样式为正常的字体
italic：指定文本字体样式为斜体。对于没有斜体变量的特殊字体，将应用oblique
oblique：指定文本字体样式为倾斜的字体
2、font-variant：设置或检索对象中的文本是否为小型的大写字母。
取值：
normal：正常的字体
- small-caps：小型的大写字母字体
- 3、font-weight：设置或检索对象中的文本字体的粗细。
- 取值：
- normal：正常的字体。相当于number为400
- bold：粗体。相当于number为700。
- bolder：特粗体。也相当于strong和b对象的作用
- lighter：细体
- integer：用数字表示文本字体粗细。取值范围：100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
4、font-size：设置或检索对象中的字体尺寸。
取值：
absolute-size：根据对象字体进行调节。可选参数值：xx-small | x-small | small | medium | large | x-large | xx-large
relative-size：相对于父对像中字体尺寸进行相对调节。使用成比例的em单位计算。可选参数值：smaller | larger
length：用长度值指定文字大小。不允许负值。
percentage：用百分比指定文字大小。其百分比取值是基于父对象中字体的尺寸。不允许负值。
5、font-family：设置或检索用于对象中文本的字体名称序列。
取值：
family-name:字体名称。可以有多个值，以逗号隔开。浏览器以先后顺序依次使用字体。
generic-family:字体序列名称。
6、font-stretch：设置或检索对象中的文字是否横向拉伸变形。
取值：
ultra-condensed：比正常文字宽度窄4个基数。
extra-condensed：比正常文字宽度窄3个基数。
condensed：比正常文字宽度窄2个基数。
semi-condensed：比正常文字宽度窄1个基数。
normal：正常文字宽度
semi-expanded：比正常文字宽度宽1个基数。
expanded：比正常文字宽度宽2个基数。
extra-expanded：比正常文字宽度宽3个基数。
ultra-expanded：比正常文字宽度宽4个基数。
注：也可以直接用font：[ [ <font-style> || <font-variant> || <font-weight> ]? <font-size> [ / <line-height> ]? <font-family> ] 简写的方式。
下面举个综合以上属性的例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#p1{
font-family: "微软雅黑";
font-size: 15px;
font-style: italic;
font-stretch:extra-condensed;
font-weight: bold;
font-variant: normal;
}
/* #p1{
font:italic normal bold 15px "微软雅黑";
}*/
</style>
</head>
<body>
<p id="p1">翦翦风，鸳鸯灯。星月无眠，鹊桥筑梦。</p>
</body>
</html>
效果如下：
翦翦风，鸳鸯灯。星月无眠，鹊桥筑梦。
二、元素样式
1、宽度
width:auto|length
例：p{ width:100px;}
div{width:50%;}
height:auto|length;
例：p{height:200px;}
div{height:50%;}
3、外边距
margin:auto|length
取值：
margin-top: 设置上边的外边距
margin-right: 设置右边的外边距
margin-bottom: 设置下边的外边距
margin-left: 设置左边的外边距
缩写形式:
margin:上边距 右边距 下边距 左边距
margin:上下边距 左右边距
margin:上边距 左右边距 下边距
例子如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#div1{
width:200px;
height: 100px;
background:pink;
}
#div2{
width: 110px;
height: 80px;
margin-top:20px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 40px;
background: blue;
}
</style>
</head>
<body>
<div id="div1">
<div id ="div2">
我是里边的内容。
</div>
</div>
</body>
</html>
我是里边的内容。
4、内边距
padding:auto|length
取值：
padding-top: 设置上边的内边距
padding-right: 设置右边的内边距
padding-bottom: 设置下边的内边距
padding-left: 设置左边的内边距
缩写形式:
padding:上边距 右边距 下边距 左边距
padding:上下边距 左右边距
padding:上边距 左右边距 下边距
例子如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#div3{
width: 100px;
height: 100px;
padding-top: 20px;
padding-right: 30px;
padding-bottom: 30px;
padding-left: 10px;
background-color: #0000FF;
}
</style>
</head>
<body>
<div id="div3">
我是里面的内容
</div>
</body>
</html>
我是里面的内容