一、使用CSS的意义
CSS：层叠样式表（Cascading Style Sheet）
CSS是一种用来表现HTML文件样式的计算机语言。CSS不仅可以修饰静态网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。
二、CSS的优势
内容与表现分离
网页的表现统一，容易修改
减少网页的代码量，增加网页的浏览速度，节省网络带宽
三、CSS基本语法结构
h1 {
font-size:12px;
color:#F00;
}
四、style标签
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
h1 {
font-size:12px;
color:#F00;
}
p{color:pink}
</style>
</head>
<body>
<h1>原来的样子是嘛？不晓得了，看现在的样子吧。</h1>
<p>不说四级的事了？</p>
</body>
</html>
五、CSS选择器
CSS选择器有三种：
1、标签选择器:用HTML标签作为标签选择器的名称
<style type="text/css">
h1 {
font-size:12px;
color:#F00;
}
p{color:pink}
</style>
2、id选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.blueColor{color:blue}
.myFontSize30px{font-size: 30px;}
#p111{color:green}
#p222{color:green}
</style>
</head>
<body>
<h1>原来的样子是嘛？不晓得了，看现在的样子吧。</h1>
<h1 class="blueColor myFontSize30px">原来的样子是嘛？不晓得了，看现在的样子吧。</h1>
<p class="blueColor myFontSize30px">不说四级的事了？</p>
<p>不说四级的事了？</p>
<p id="p111">不说四级的事了？</p>
<p id="p222">不说四级的事了？</p>
</body>
</html>
3类选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.blueColor{color:blue}
.myFontSize30px{font-size: 30px;}
#p111{color:green}
#p222{color:green}
</style>
</head>
<body>
<h1>原来的样子是嘛？不晓得了，看现在的样子吧。</h1>
<h1 class="blueColor myFontSize30px">原来的样子是嘛？不晓得了，看现在的样子吧。</h1>
<p class="blueColor myFontSize30px">不说四级的事了？</p>
<p>不说四级的事了？</p>
<p id="p111">不说四级的事了？</p>
<p id="p222">不说四级的事了？</p>
</body>
</html>
六、CSS的高级应用
CSS复合选择器
后代选择器
交集选择器
并集选择器
1、后代选择器
h3 strong{color:blue; font-size:36px;}
<h3><strong>aaa</strong></h3>
<h3>bbb</h3>
<strong>ccc</strong>
只有aaa起作用
2、交集选择器
p.txt{color:blue; line-height:28px;}
<p>aaa</p>
<div class="txt">bbb</div>
<p class="txt">ccc</p>
只有ccc起作用
3、并集选择器
h3,.first,.second,#end{
font-size:16px;
color:green;
font-weight:normal;
}
七、CSS引入方式
行内样式
内部样式表
外部样式表
1、行内样式
<h1 style="color:red;">style属性的应用</h1>
<p style="font-size:14px; color:green;">直接在HTML标签中设置的样式</p>
2、内部样式表
CSS代码写在<head>的<style>标签中
优点
方便在同页面中修改样式
缺点
不利于在多页面间共享复用代码及维护，对内容与样式的分离也不够彻底
3、外部样式表
CSS代码保存在扩展名为.css的样式表中
HTML文件引用扩展名为.css的样式表，有两种方式
链接式
导入式
(1)链接外部样式表
<head>
……
<link href="style.css" rel="stylesheet" type="text/css" />
……
</head>
(2)外部样式表
导入外部样式表
<head>
……
<style type="text/css">
<!--
@import url("style.css");
-->
</style>
</head>
八、CSS继承
子标签可以继承父标签的样式风格
子标签的样式不会影响父标签的样式风格
在html文件中对于同一个元素可以有多个css样式存在，当有相同权重的样式存在时，会根据这些css样式的前后顺序来决定，处于最后面的css样式会被应用。
CSS的优先级
内联样式表（标签内部）> 嵌入样式表（当前文件中）> 外部样式表（外部文件中）。
有些特殊的情况需要为某些样式设置具有最高权值，怎么办？
这时候我们可以使用!important来解决。
有些特殊的情况需要为某些样式设置具有最高权值，怎么办？这时候我们可以使用!important来解决。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#p1{color:blue!important}
</style>
</head>
<body>
<p id="p1" style="color:red">aaaa</p>
</body>
</html>