字体样式

   p{
        font-family: 华文细黑;   
        font-size: 20px;
        font-weight: lighter;
        font-style: italic;
    }

font-family：字体
font-size:大小
font-weight：重量（粗细）
font-style：风格

字体属性的顺序：字体风格→字体粗细→字体大小→字体类型

span.test1{
font: bold 20px 华文细黑 oblique;
}

   p span{
   font:oblique bold 12px "楷体";
   }

文本样式

 <style>
p{
text-decoration: underline;
color:red;
text-align: center;
text-indent: 20px;
line-height: 20px;

}
</style>

**text-decoration：文本修饰 **

none : 　无装饰
blink : 　闪烁
underline : 　下划线
line-through : 　贯穿线
overline : 　上划线

color:第一种英文/16位颜色值

text-align：文本对齐
left : 　左对齐
right : 　右对齐
center : 　居中
justify : 　两端对齐

text-indent：文本缩进
**px,em em是缩进多少个字符

伪类:

可以用于所有标签，但多用于a标签

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
  a:hover{text-decoration: none}
  p:hover{color: red;font-weight: bold;font-size: 50px}
</style>
</head>
<body>
<a href="#">我是链接</a>
<p>我是段落</p>
</body>
</html>

背景（参考手册）
background-color：背景颜色
background-image：背景图片配置url一起使用
background-repeat：重复方式

代码样例

<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 200px;
height: 200px;
border: 1px solid red;
}
p{background-color: lemonchiffon}
body{
background-image: url("../../images/2.jpg");
background-repeat: repeat-x;
}
   </style>
</head>
<body >
<div>
<p>背景</p>

列表样式
list-style:值看手册
代码样例

<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
ul{
list-style: none;
}
span{
background-color: black;
color: red;
}
</style>
</head>
<body>
<ul>
<li><span>java</span>&nbsp;&nbsp;  <span>phtyon</span>&nbsp;&nbsp; </li>
<li><span>java</span>&nbsp;  <span>aaaa</span>&nbsp;&nbsp; </li>
</ul>
</body>
</html>

图标

第一步下载图标库
http://www.fontawesome.com.cn 下载矢量版

具体样式参考http://www.fontawesome.com.cn/cheatsheet/

假设我选一个fa-adjust

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="../../font-awesome-4.7.0/css/font-awesome.min.css">
<style>
.big{
font-size: 100px;
}

</style>
</head>
<body>
<span class="fa fa-adjust big" >首页</span>
<span class="fa fa-yen">其他</span>
<a href="#"><lihaifeng class="fa fa-yen">li</lihaifeng></a>
</body>
</html>