知识点：CSS的概念及语法、CSS选择器的使用、CSS选择器的优先级、添加CSS样式的3种方式。
1、CSS概念理解
CSS 是Cascading Style Sheet的缩写，可以翻译为“层叠样式表”或者“级联样式表”，即“样式表”。层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。
1.1 使用CSS的意义
CSS最重要的目标是将文件的内容与它的显示分离开来。在CSS出现前，几乎所有的HTML文件内都包含文件显示的信息，比如字体的颜色、背景应该是怎样的、如何排列、边缘、连线等都必须一一在HTML文件内列出，有时会重复列出。CSS可以将这些信息中的大部分隔离出来，简化HTML文件，这些信息被放在一个辅助的、用CSS语言写的文件中。HTML文件中只包含结构和内容的信息，CSS文件中只包含样式的信息。（太长不看版……）
总结两个意义：简化代码量、将内容和样式分离。
举例1：要实现以下网页效果：
<!--没有使用CSS样式时，需要对每一个内容添加同样的标签，来实现样式的一致-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<p><font color="#FF0000">这里是段落1</font></p>
<p><font color="#FF0000">这里是段落2</font></p>
<p><font color="#FF0000">这里是段落3</font></p>
<p><font color="#FF0000">这里是段落4</font></p>
</body>
</html><!--使用CSS样式后，只需添加一次样式即可-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
p { color:#F00;}
</style>
</head>
<body>
<p>这里是段落1</p>
<p>这里是段落2</p>
<p>这里是段落3</p>
<p>这里是段落4</p>
</body>
</html>举例2：不需要打开html文件，只修改css样式文件，即可完成网页样式的修改。
1.2 使用CSS的优势（了解即可）
- 内容与表现分离：
- 表现的统一
- 布局更灵活
- 减小网页中代码量
- 有利于搜索引擎收录
2、CSS的基本语法
CSS和HTML一样，都是浏览器能够解析的计算机语言，因此，CSS也有自己的语法规则和结构。
2.1 CSS基本语法结构
- CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。（大括号前面是选择器，大括号内是声明组成的样式代码）
- 选择器通常是您需要改变样式的 HTML 元素。（选择器的种类有标签选择器、类选择器、ID选择器等）
- 每条声明由两部分组成：样式属性和值，以英文分号:为分割，前面是样式属性，后面是属性值，每条样式声明以英文分号;结束。
注意：①一个css规则中可能有多条声明，不同声明之间用空格隔开。②一条声明的样式属性可能有多个值，如p { font-family:"Times New Roman",Georgia,Serif; } 不同值之间用英文逗号,隔开，浏览器会使用它可识别的第一个值。
2.2 认识<style>标签
<style> 标签用于为 HTML 文档定义样式信息。在 <style> 中，您可以规定在浏览器中如何呈现 HTML 文档。type 属性是必需的，定义 <style>元素的内容。唯一可能的值是 "text/css"。style 元素位于 head 部分中。
通俗的说：要想让css样式影响html文档，那么就需要使用<style>标签引入css样式。
由于css样式在html文档中分布的位置不一样，因此<style>标签引入css样式的方法也不一样，如行内样式、内部样式表、外部样式表的链接与导入。
2.3 认识CSS选择器
要使用css对HTML页面中的元素实现一对一，一对多或者多对一的控制，这就需要用到CSS选择器。HTML页面中的元素就是通过CSS选择器进行控制的。 “选择器”指明了{}中的“样式”的作用对象，也就是“样式”作用于网页中的哪些元素。CSS中有3种基本的选择器，分布式：标记选择器、类选择器和ID选择器。
1）标签选择器
一个完整的HTML页面是有很多不同的标签组成，而标签选择器，则是决定哪些标签采用相应的CSS样式。例如p选择器就是用于声明页面中所有p标签的样式风格。如：p { font-size:16px; } 、h3 { color:red; } 等等
2）类选择器
标签选择器一旦声明，那么页面中的所有该标签，都会相应地发生变化。如果只希望部分元素进行样式更改，可以使用类选择器。类选择器的名称可以由用户自定义，属性和值同标签选择器一样，必须符合CSS规范。如：.blue { color: blue; }
在HTML文档中，可以通过对标签设置属性class="类名" ，来设置类选择器，设置了类选择器以后，只要页面中某个标签中需要相同的样式，直接给该标签添加使用同一个class属性即可。
类选择器可以在一个HTML页面中频繁使用。
3）ID选择器
在HTML文档中，可以通过对标签设置属性id="ID名" ，来设置ID选择器。调用样式时，使用举例：#top { width:720px; }
ID选择器的使用方法与类选择器基本相同，不同之处在于，一个ID选择器在同一个HTML页面中只能使用一次，因此它的针对性更强。
注意：在一个HTML文档中，ID选择器只能使用一次，而且仅一次。而类选择器可以使用多次。
3、CSS样式的引入
实际制作网页时，css样式与HTML文档的位置关系有三种：CSS样式在HTML文档的<head>标签中、在标签属性中设置CSS样式、CSS样式单独放在一个文件中。
因此在HTML中应用CSS样式的方法有三种：内部样式、行内样式和外部样式。
3.1 行内样式
行内样式就是在HTML标签中直接使用style属性，通过style属性来设置CSS样式。style属性的用法：
<h1 style="color:red">通过style属性设置行内样式</style>
注意：通过此方法设置的CSS样式，只对当前的HTML标签起作用，无法对多个标签同时使用。并且它是写在HTML文档中的，不能使内容和样式相分离，本质上没有体现CSS的优势，因此不推荐使用。
3.2 内部样式表
把CSS样式，用<style>标签写在HTML文档中的<head>中，CSS样式和HTML文档的内容在同一个文档中，这就是内部样式表。
内部样式表，方便在同一个页面中修改样式，但是不能够在多个HTML文档之间进行共享重复使用以及维护，对内容和样式分离的不够彻底。因此不推荐使用。
3.3 外部样式表
将样式单独保存在一个独立的文档中，文档的扩展名为.css，只需在页面中引入外部样式表即可。这也是网站制作中常用的方法。
HTML文档引用外部样式表有两种方式：链接式和导入式。
1）创建CSS文件
介绍两种方式：创建一个记事本文档，然后将后缀修改为.css即可。另外一个方式就是借助Dreamweaver开发工具，创建CSS文档即可。CSS样式表是纯文本文件，其内容不会用于在浏览器中查看。
2）链接外部样式表
在HTML文档中，使用<link />标签链接外部样式表。<link />标签必须放在<head>标签中。语法如下：
<head>
<link href="CSS文件路径" rel="stylesheet" type="text/css" />
</head>- href属性：用来指定css文件的路径
- rel属性：规定当前文档与被链接文档之间的关系。这里取值为stylesheet
- type属性：规定被链接文档的 MIME 类型。这里取值为text/css
外部样式表实现了网页内容和样式的彻底分离，一个外部样式表文件可以用于多个网页。当改变这个样式表文件时，所有的页面都将随之变化。这在制作大量相同样式页面的网站时，非常有用。不仅减少了重复的工作量，有利于保持网站的统一样式和网站维护，同时用户在浏览网页时也减少重复代码的下载，提高了网站的速度。
3）导入外部样式表
在HTML网页中使用@import导入外部样式表，导入样式表的语法必须放在<style>标签中，而<style>标签必须放在页面的<head>标签内。语法：
<head>
<style>
@import url("CSS文件路径");
</style>
</head>
4）链接式与导入式的区别
链接式和导入式都是将外部CSS样式表，引用到HTML文档。但是两者之间有一些区别：
- link属于XHTML，import属于css2.1。
- link先加载再显示，import延迟加载。
- import必须要浏览器兼容css2.1
- 优先使用link
3.4 样式优先级
对于页面中的某个元素，允许同时使用多个样式（即叠加），页面元素最终的样式即为多个样式的叠加效果。但当同时应勇以上3类样式时，页面元素的样式之间有冲突，应该继承哪种样式？这时就存在一个优先级的问题。同理，从选择器的角度看，当单个元素同时应用了标签选择器、类选择器、ID选择器定义样式时，也存在样式优先级的问题。
CSS中规定的优先级的规则如下：
对发生冲突的属性，看样式优先级别发挥作用。
-
越靠近标签位置的优先级别越高 行内样式>内部样式>外部样式
-
后写的样式>先写的样式
-
越精确的优先级别越高 id选择器>类选择器>标签选择器
举例：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link href="test.css" rel="stylesheet" type="text/css" />
<style type="text/css">
p { color:blue;}
</style>
</head>
<body>
<p style="color:red">这里是段落1</p>
<p>这里是段落2</p>
<p>这里是段落3</p>
<p>这里是段落4</p>
</body>
</html>代码结果演示：
代码分析：文档中同时使用了外部样式表、内部样式表、行内样式，观察优先级的效果。
优先级关系：内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器
课后练习：使用CSS样式制作百度首页，要求使用外部CSS样式表。