CSS全称层叠样式表，它是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。是能够真正做到网页表现与内容分离的一种样式设计语言，能够对网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力，并能够进行初步交互设计，是目前基于文本展示最优秀的表现设计语言。
CSS规则
CSS规则实际上就是一条完整的CSS指令，规则声明了要修改的元素和应用给该元素的样式
为HTML文档添加CSS规则
有三种方法为HTML文档添加CSS规则：行内样式、嵌入样式、链接样式表
①行内样式：写在HTML元素的标签里，比如：
<P style="font-size: 20px;color: green;">This is a demo!</P>
②嵌入样式：写在<style>标签里，一般嵌入在<head>元素内
<style type="text/css"> P{color: blue;font-size: 30px;} </style>
③链接样式表：写在以.css结尾的单独样式表文件中,使用<link>标签进行链接
<link href="*.css" rel="stylesheet" type="text/css">
三种方法的应用范围
行内样式：只能影响它所在的标签，并且总是覆盖嵌入样式和链接样式的
嵌入样式：能影响当前的页面，但总是覆盖链接样式，并总被行内样式覆盖
链接样式：能影响到整个网站，只需使用<link>标签指定样式表即可，但链接样式总会被行内样式和嵌入样式覆盖
PS：我们还可以使用@import指令，在样式表中引用其他样式表
CSS文档由一系列CSS规则组成，一条CSS规则实际上就是一条CSS指令，这条指令先选择HTML元素，然后设定选择元素的样式
下面是一条简单的CSS规则，它把段落背景色设置为绿色
p{background-color: green}
CSS基本规则
一条CSS规则由选择符+声明两部分组成
选择符：指出要选择的元素
声明：由属性和值组成，属性指出影响元素哪方面样式，值其实就是属性的一种状态
在上面的例子中可以看出一条规则从左到右依次是：选择符、左花括号、属性、冒号、值、右花括号
对基本规则扩展1：多个声明包含在一条规则中
p{color: green;font-size: 45px;font-weight: bold}
每个声明后加一个分号，以示分隔
对基本规则扩展2：多个选择符组合在一起
h1,h3,p{color: green;font-size: 45px;font-weight: bold}
选择符之间用逗号分隔
对基本规则扩展3：多条规则应用于同一选择符
h1,h3,p{color: green;font-size: 45px;font-weight: bold}
现在我们想让p段落的背景色为蓝色，可以继续添加一条规则
p{background-color: blue}
CSS选择符分类
所有用于选择特定元素的选择符分为三种：上下文选择符、ID和Class选择符、属性选择符
上下文选择符
上下文选择符是一种考虑HTML文档结构的选择符，上下文选择符也叫后代组合式选择符，是以空格分隔标签名的，其格式为：
标签1 标签2 ｛声明｝
只有当标签1作为祖先元素存在时，标签2才会被选中
上下文选择符的最大好处就是可以方便的实现基于位置为HTML元素添加样式，在默认情况样式是应用到页面中的所有元素的，但有时需要给不同“位置”的元素应用不同的样式，比如想给位于article和aside标签中的p标签，分别设置不同的样式（不同颜色）
下面是要演示的HTML文档
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 <link href="style.css" rel="stylesheet" type="text/css"> 7 </head> 8 <body> 9 <article> 10 <p>demo in article!</p> 11 </article> 12 <aside> 13 <p>demo in aside!</p> 14 </aside> 15 <p>This text is very important!</p> 16 <P style="font-size: 20px;color: green;">This is a demo!</P> 17 </body> 18 19 20 </html>
