1.字体
font-family：字体
如果本地不存在使用默认字体
font-size
设置字体大小 单位（mm：绝对单位，px：相对单位）
font-weight：文字加粗
参数
normal：正常粗细
lighter：比正常要细
bold 粗体
bolder：加粗体
100~900：越大越粗
font-style:文字样式
itcalic：意大利体
normal：正常
oblique：正常
文字复合属性
font：bild italic 12px； 加粗 斜体 大小；
文字颜色：color
text-decoration：文字下划线
参数
none：正常
underline：为文字加下划线
overline：为文字加顶划线
line-through：为文字加删除线
blik：文字闪烁
text-transform：文字大小写转换
参数
capitalize：单词首字符全部大写
lowercase：全部小写
uppercase：全部大写
文字间距：
letter-spacing：控制字体距离
word-spacing：控制单词间距
文字对齐方式：text-align
参数
center：居中
left：左对齐
right：右对齐
justify：两端对齐
文字行高：line-height
首行缩进：text-indent：
段落距离：margin2.图片样式
border：图片边框
width：宽度
height：高度
<img src="路径" width="" height="" border="1"/>
图片对齐通过父标签 使用text-align来实现对齐
vertical-align：只能用于行内元素 设置行内垂直对齐方式
参数：
baseline：默认，元素放在基线上
top：把元素顶端与行中最高元素的顶端对齐
middle：把此元素放在父元素的中部
bottom：把元素顶端与最低元素的顶端对齐
sub:垂直对齐文本下标
super：垂直对齐文本上标
text-bottom：把元素的低端与父元素的中文字的低端对齐
text-top：把元素的顶端与父元素的中文字的顶端对齐
3.背景样式
background-image:url()；背景图片
background-color：背景颜色
背景图片的平铺：
background-repeat
参数：
repeat：沿水平方向
no-repeat：不平铺
repeat-x：只沿水平方向平铺
repeat-y：只沿垂直方向平铺
背景图片的位置
background-position
参数 一般两个值，一个水平方向，一个垂直方向
水平方向：left，center，right
垂直方向：top，center，bottom
固定背景图片位置
backgound-attachment:4.列表样式
list-style-list
属性
Disc：实心圆
Circle：空心圆
square：正方形
decimal：123456
upper-alpha：A,B,C
lower-alpha:a,b,c
upper-roman:I,II,III,Iv
lower-roman:i,ii,iii
None:不显示
list-style-image：图像符号
4.表格样式
border：大小 颜色 样式
border-spacing 单元格的间距
border-collaspe：边框相同，重合显示进行合并
border-width：边框粗细 若样式重合，看优先级显示 优先级为double，solid，dashed，dotted，ridge，outset，
groove，inset
border-style 优先级：hidden 优先级最高，none最低
color：设置文字颜色
backgound：设置表格背景颜色和图像
例1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS排版</title>
<style>
*{
margin: 0;
padding: 0;
}
header{
padding-top: 25px;
background-color: chartreuse;
text-align: center;
width: 100%;
height:50px;
}
ul{
padding-top: 20px;
padding-left: 30%;
height: 30px;
background:rgb(78, 143, 13);
}
li{
text-align: center;
display: inline;
list-style: none;
}
a{
padding:5px 20px;
font-size: 30px;
color: #0c0c0c;
background:rgb(78, 143, 13);
text-decoration: none;
line-height: 10px;
}
a:hover{
}
</style>
</head>
<body>
<header>顶部</header>
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">版面设计</a></li>
<li><a href="#">文章导读</a></li>
<li><a href="#">收藏资源</a></li>
<li><a href="#">休闲娱乐</a></li>
<li><a href="#">联系方式</a></li>
</ul>
</nav>
</body>
</html>例2
<!DOCTYPE html>
<html>
<head>
<meta>
<title>申请表</title>
</head>
<body >
<div style="width: 500px; background:green;height: 300px;">
<p align="center"><b>申请表</b></p>
<span><hr></span>
<form>
姓名:<input><br>
感兴趣的职位：<br>
<input type="radio" name="gender" value="男">Web 设计人员
<input type="radio" name="gender" value="女">Web 管理人员
<input type="radio" name="gender" value="女">Web 开发人员
<br>
其他要求
<br>
<textarea placeholder="包括薪水待遇、工作地点等。"></textarea>
<br>
<input type="checkbox" name="hobbies1" value="篮球">发送确认信息
<br>
<select >
<option value="无经验">无经验</option>
<option>1年</option>
<option>2年</option>
<option>3年</option>
</select>
<br>
<div style="text-align: center">
<button>确认</button>
<input type="reset" value="重置">
</div>
</form>
</div>
</body>
</html>