l 本章简介：
之前讲过制作网页需要使用W3C标准，实际上使用W3C标准制作网页还有一个非常重要的作用，那就是可以实现网页内容和样式的分离。
HTML负责组织内容结构，而CSS3负责表现样式。
l 用到的单词：
Css 层叠样式表
Selector 选择器
Link 链接
Font-size 字体的大小
Color 颜色
Stylesheet 样式表
First-child 第一个子元素
Nth-child 第N个子元素
Odd 奇数
Even 偶数
l 4.1 CSS概述
CSS全称是层叠样式表（Cascading Style Sheet）,它是用来进行网页风格设计的。
通过设计样式表，可以统一地控制HMTL标签的显示属性，如字体的大小，颜色
文本的对齐方式，超链接的不同效果等等.....
l 4.2CSS优势
1． 内容与表现相分离
使用CSS设置网页样式，风格，并且CSS样式可以单独存放在一个CSS文件中，HTML文件进行引用即可。
这样网页的内容（HTML）和表现（CSS）就可以相分开了，并便于后期的维护。
2．表现的统一
CSS可使网页的页面表现和风格统一，把CSS3写在单独的页面中，可以对多个页面应用其样式，，只需要修改css样式，所有的页面样式即可更加灵活。
3．丰富的样式，使得页面布局更加灵活
4．减少页面的代码量
5．运用于独立页面的css，还有利于网页被搜索引擎收录。
l 4.3CSS的基本语法
Css规则由两部分构成，即选择器和声明。
声明必须放在大括号中，并且声明可以是一条或者多条。
每个声明由一个属性和属性值组成，属性和值用冒号分开，每条语句用英文分号结尾。
l 4.4在HTML中引入CSS样式
在HTML中引入CSS样式的方法有三种，分别是：
1． 行内样式
行样式就是在HTML标签中直接使用style 属性设置CSS样式。
Style 属性提供了一种改变所有HTML元素样式的通用方法
<h1 style="color: red;"> 设置字体为红色</h1>
<p style="font-size: 25px"> 设置字体大小为 25 px</p>
这种使用 style 属性设置CSS样式仅对当前的HTML标签起作用
这种方式不能使内容和表现相分离，没有体现出CSS的优势，不推荐使用。
2． 内部样式表
内部样式表是把 css 代码写在 <head>的 <style> 标签中，与HTML内容处于同一个HTML文件中
这种样式表方便修改样式，但是不利于在多页面中共享复用的代码，以及页面的维护。
在实际开发中，会在页面开发结束后，将这些样式代码保存到单独的 CSS文件文件中。
<head> <meta charset="UTF-8"> <title>Title</title> <style> h1{ color: red; } p{ font-size: 25px; } </style> </head>
3． 外部样式表。
外部样式表是把 CSS 代码保存为一个单独的样式表文件
想要使用它，在页面中引用它的名字即可。
<head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="haha.css"> </head>
外部样式表实现了样式和结构的彻底分离，一个外部样式表可以应用于多个页面
当改变这个样式表文件时，所有引用此样式表的HTML页面的样式都将改变。
如果同时运用三种样式时，那页面的元素最终会使用哪个样式里设置的属性呢？
那就是“就近原则”，如果一个选择器中样式的声明重叠了，那么后写的会覆盖先写的样式
即后写的优先于先写的样式。
l 4．5 CSS3的选择器
选择器（selector）是CSS中非常重要的概念，所有的HMTL语言中的标签样式，都是通过不同的CSS选择器进行控制的。
在CSS中有三种最基本的选择器，分别是：
1． 标签选择器
一个HTML页面由很多的标签组成，CSS的标签选择器就是声明这些标签的。
例如： <h1></h1>,<p></p>,<strong></strong>,<em></em>,
<div></div>,<body></body>,<table></table>,<form></form>,
<tr></tr>,<td></td><li></li>,<ul></ul>,<ol></ol>,
<select></select>,<option ></option>
2． 类选择器
在标签选择器中，一旦声明一个标签的话，那么页面中所有的同标签都将设置上此属性
在有些时候很不方便。
而类选择器的名称可以由用户自定义，属性和值跟标签选择器一样
<style> .show{ background-color: red; } .woman{ width: 200%; } </style> </head> <body> <h1 class="woman"> </h1> <p class="show"></p>
类选择器是网页中最常用的选择器，设置了一个类选择器后，只要在页面中某个标签中需要声明相同的样式，直接使用class 属性调用即可。
3． ID选择器
ID选择器和类选择器基本相同，不同ID选择器只能使用一次，所以它的针对性更强。
虽然只能使用一次，但是在网页中它也是最常用的选择器之一。
<style> #show{ background-color: red; } #woman{ width: 200%; } </style> </head> <body> <h1 id="woman"> </h1> <p id="show"></p>
三种基本选择器如果都在同一个元素是写样式的话，那么会用哪个呢？
答案就是，ID选择器 大于 class类选择器大于 标签选择器。
并且他们不遵循 “就近原则”。
l 4．5 CSS3的高级选择器
选择器是CSS中十分重要的内容，使用它可以大量的提高开发人员书写或修改样式表时的开发开发效率。
使用 CSS3的高级选择器，它提倡的把元素和样式直接绑定起来，这样在样式表中什么样式与什么元素匹配变得一目了然，修改起来也很方便。
1.层次选择器
层次选择器是通过 HTML的文档对象模型（Document Object Model DOM）元素间的层次来选择元素的，主要的层次关系包括
E F: 后代选择器，中间用空格隔开
E > F： 子选择器，中间用大于号表示
E + F：相邻兄弟选择器，中间用加号表示
E ~ F: 通用兄弟选择器，中间用 波浪号表示
h1 p{ 后代选择器 选择 h1 里 所有的 p 标签 } h1>p{ 子选择器 选择 h1 下一层 所有的 p 标签 } h1+p{ 相邻兄弟选择器 选择 h1 里 前面和后面 p 标签 } h1~p{ 通用兄弟选择器 选择 h1 里 同级的 所有 p 标签 }
2. 结构伪类选择器
伪类可以将一段并不存在的HTML文档当作独立元素来定位。
这种选择器可以据元素在文档树中的某些特性，如相对位置，来定位他们
E : first-child 为父元素的第一个子元素
ul li:first-child{ color: red;}
E : last-child 为父元素的最后一个子元素
ul li:last-child{ color: red;}
E F:nth-chuld(n) 择父元素的第N个子元素
ul li:nth-child(2){color: red;}
E:first-of-type 择父元素具有指导类型的第一个子元素
P:nth-child(2){ color: red;}
E:last-of-type 择父元素具有指导类型的最后一个子元素
P:nth-of-type(2){color: red;}
E F:nth-of-type(n) 择父元素具有指导类型的第N元素
ul li:nth-of-type(2){color: red;}
这些样式复杂，并不常用。
3. 属性选择器
在HTML中，可以给元素设置各种各样的属性，通过各种各样的属性也可以选择到元素并为其设置样式。
E 【attr】 选择具有匹配属性的 alltr 的 E 元素
a[id]{background-color: red;}
E【attr=val】 选择具有匹配属性的 alltr 等于 val 的 E 元素
a[id=first]{background-color: red;}
E【attr^=val】 选择具有匹配属性的 alltr 以 val 开头 的 E 元素
a[id ^=first]{background-color: red;}
E【attr$=val】 选择具有匹配属性的 alltr 以 val 结尾 的 E 元素
a[id $=first]{background-color: red;}
E【attr*=val】 选择具有匹配属性的 alltr 包含 val 的 E 元素
a[class *=first]{background-color: red;}
l 本章总结：
1. 在HTML中引入CSS样式的三种方法分别是 行内样式，内部样式，外部样式
2. CSS3 的基本选择器包括 标签选择器，类选择器，ID选择器
3. CSS3 的高级选择器包括 层次选择器，结构伪类选择器，属性选择器