一、字体样式
font-family 设置字体类型 font-family:“隶书”;
font-size 设置字体大小 font-size:12px;
font-style 设置字体风格 font-style:italic;
font-weight 设置字体的粗细 font-weight:bold;
font 在一个声明中设置所有字体属性 font:italic bold 36px “宋体”;
常用的字体样式：font-size,font-style,font-weight
1_字体样式.css
p{
font-style: italic;
}
div{
font-style: oblique;
}
1_字体样式.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link href="css/1_字体样式.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<p>善存：补充维生素</p>
<div>善存：补充维生素</div>
</body>
</html>
二、文本样式
color 设置文本颜色 color:#00C;
text-align 设置元素水平对齐方式 text-align:right;
text-indent 设置首行文本的缩进 text-indent:20px;
line-height 设置文本的行高 line-height:25px;
text-decoration 设置文本的装饰 text-decoration:underline;
2_文本样式.css
#p1{
color:pink;
}
#p2{text-align:center}
#p3{
font-size:16px;
text-indent:32px;
}
#p4{
text-decoration:underline/*下划线*/
}
#p5{
text-decoration:overline/*上划线*/
}
#p6{
text-decoration:line-through/*中间删除线*/
}
#a7{
text-decoration:none/*无线*/
}
2_文本样式.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link href="css/2_文本样式.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<p id="p1">矿泉水1</p>
<p id="p2">矿泉水2</p>
<p id="p3">
矿泉水3矿泉水3矿泉水3矿泉水3矿泉水3矿泉水3矿泉水3矿泉水3矿泉水3矿泉水3矿泉水3矿泉水3矿泉水3矿泉水3矿泉水3矿泉水3矿泉水3矿泉水3矿泉水3矿泉水3矿泉水3矿泉水3矿泉水3矿泉水3矿泉水3矿泉水3矿泉水3矿泉水3矿泉水3矿泉水3。
矿泉水3矿泉水3矿泉水3矿泉水3矿泉水3矿泉水3矿泉水3矿泉水3矿泉水3矿泉水3矿泉水3矿泉水3矿泉水3矿泉水3矿泉水3矿泉水3矿泉水3矿泉水3矿泉水3矿泉水3矿泉水3矿泉水3矿泉水3矿泉水3矿泉水3矿泉水3矿泉水3矿泉水3矿泉水3矿泉水3。
矿泉水3矿泉水3矿泉水3矿泉水3矿泉水3矿泉水3矿泉水3矿泉水3矿泉水3矿泉水3矿泉水3矿泉水3矿泉水3矿泉水3矿泉水3矿泉水3矿泉水3矿泉水3矿泉水3矿泉水3矿泉水3矿泉水3矿泉水3矿泉水3矿泉水3矿泉水3矿泉水3矿泉水3矿泉水3矿泉水3。
</p>
<p id="p4">矿泉水4</p>
<p id="p5">矿泉水5</p>
<p id="p6">矿泉水6</p>
<a href="#" id="a7">矿泉水7</a><br>
<a href="#">矿泉水7</a><br>
</body>
</html>
三、伪类
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#a1:hover,#a2:hover,#a3:hover,#a4:hover{
color:pink
}
</style>
</head>
<body>
<a id="a1">首页1</a><br>
<a id="a2">首页2</a><br>
<a id="a3">首页3</a><br>
<a id="a4">首页4</a><br>
<a id="a5">首页5</a><br>
</body>
</html>
四、网页背景
背景颜色：background-color
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p style="background-color: gray;color:white;">
neusoft东软。neusoft东软。neusoft东软。neusoft东软。neusoft东软。neusoft东软。neusoft东软。neusoft东软。neusoft东软。neusoft东软。neusoft东软。neusoft东软。neusoft东软。neusoft东软。neusoft东软。
neusoft东软。neusoft东软。neusoft东软。neusoft东软。neusoft东软。neusoft东软。neusoft东软。neusoft东软。neusoft东软。neusoft东软。
</p>
</body>
</html>
五、列表样式去掉圆点
list-style:none
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<ul style="list-style: none;">
<li>讲课</li>
<li>锻炼身体</li>
<li>听歌</li>
</ul>
</body>
</html>
六、web字体
<!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">
</head>
<body>
<div>
<a href="#"><span class="fa fa-home"></span> 首页</a>
<a href="#"><span class="fa fa-book"></span> 关于我们</a>
<a href="#"><span class="fa fa-pencil" ></span> 后台应用编辑</a>
<a href="#"><span class="fa fa-cog"></span> 系统设置</a>
<a href="#"><span class="fa fa-bath"></span> 我的选择</a>
</div>
</body>
</html>