CSS样式和选择器
css样式表的基本使用方法
CSS（英文全称：cascading Style Sheets 层叠样式表）
CSS的发展史：
CSS1.0:1996年12月，CSS1.0作为第一个正式规范面世，其中加入了字体、颜色等相关属性。
CSS2.0:1998年5月，CSS2.0规范正式推出。这个版本的CSS是最广为人知的一个版本，以前的开发者使用的一般的就是这个版本的CSS规范。
CSS2.1:2004年2月，CSS2.1对原来的2.0进行了一些小范围的修改，删除了一些浏览器支持不成熟的属性。CSS2.1可认为是CSS2.0的修订版。
CSS3.0:2010年，CSS3规范推出，这个版本的CSS完善了前面CSS存在的一些不足。
例如：颜色模块增加了色彩校正、透明度等功能；字体模块则增加了文字效果、服务器字体支持等；还增加了变形和动画模块等。
CSS样式表的基本使用为文档添加样式的4种方法：
- 内联样式：直接将样式定义到HTML元素中（写在标签内）。这种作用范围有限，只影响它所在的标签，而且总是覆盖嵌入样式和链接样式。
- 内部样式：写在<style>标签中。作用范围仅限于当前页面，内部样式覆盖链接样式，但也会被内联样式覆盖。
<style type="text/css"> CSS样式</style>
- 外部样式：写在单独的CSS样式表中。相应页面就可以使用样式。
<link href="链接表地址" rel="stylesheet" type="text/css"/>
注：rel是relationship的英文缩写
stylesheet style是样式的意思，sheet是表格之意，总起来是样式表的意思
rel=“stylesheet”描述了当前页面与href所指定文档的关系，即说明的是，href连接的文档是一个新样式
4.@import指令导入外部样式文件：和链接样式类似。引用@impor指令在某些浏览器IE可能会出现“屏闪”。所以我们应该尽量的避免使用@import指令。
而是尽量使用链接外部样式表。
<style type="text/css">@import url(地址);</style>
@import url()
CSS选择器
CSS样式的语法格式: 选择器 {属性：值}元素选择器（元素选择器是最简单的选择器）
根据这个结构我们可以扩展：
例如：p {color: red; font-size:14pt; font-weight: bold;}
h1,p,a{color:blue;font-size:14pt;}//组合选择器
2.所有用于选择特定元素的选择器分三种：
上下文选择器：
上下文选择器的语法格式：标签1 标签2{属性：值；}
注意：组合选择器和上下文选择器的区别，组合选择器用逗号隔开，上下文选择器以空格隔开
特殊的上下文选择器
子选择器>：语法格式：标签1>标签2 解释说明：标签1和标签2是父子关系。
紧邻同胞选择器+：语法格式：标签1+标签2 解释说明：标签2紧跟同胞标签1的后面。
一般同胞选择器~：语法格式：标签1~标签2 解释说明：CSS3新增的兄弟选择器，标签1、2是同胞即可，不一定紧挨着。
通用选择符*：*解释说明：通用选择器*是一个通配符，匹配任何元素。
ID选择器：为标有特定id的HTML元素指定特定的样式，只能使用一次 ，ID选择器的选择符是“#”。
class选择器：类选择器允许以一种独立于文档元素的方式来指定样式。类选择器的选择符是“.”。
属性选择器
属性名选择器：语法格式：标签名[属性名]
属性值选择器：语法格式：标签名[属性名=“属性值”]
伪类
伪类：用于向某些选择器添加特殊的效果。伪类这个叫法源自于他们跟类相似，但实际上并没有类会附加到标记中的标签上。
伪类分为两种（以及新增的伪类选择器）：
UI伪类：会在HTML元素处于某种状态时（例如：鼠标指针位于链接上），
为该元素应用CSS样式。hover
结构化伪类：会在标记中存在某种结构上的关系时（例如：某元素是一组元素中的第一个或者最后一个），为该元素应用CSS样式。
：not和：target（CSS新增的两个特殊的伪类选择器）
UI元素状态伪类选择器有如下几个：
selector：link：匹配selector选择器且没被访问前的元素（通常只能超链接）。
selector：visited：匹配selector选择器且已被访问前的元素（通常只能超链接）。
：hover：匹配选择器且处于鼠标悬停状态的元素。
selector：active：匹配selector选择器且处于被用户激活（在鼠标点击与释放之间的状态）的状态的元素。
selector：focus：匹配selector选择器且已得到焦点的元素。
selector：enabled：匹配selector选择器且当前用于处于不可用状态的元素。
selector：disabled：匹配selector选择器且当前处于不可用状态的元素。
selector：checked：匹配selector选择器且当前处于选中状态的元素。
selector：default：匹配selector选择器且页面处于打开时选中状态的元素。（即使当前没有被选中亦可）。
selector：read-only：匹配selector选择器且当前处于只读状态的元素。
selector：read-wirte：匹配selector选择器且当前处于读写状态的元素
selector：selection：匹配selector选择器的元素中当前被选中的内容。
特别提示：1、一个冒号（：）表示伪类，两个冒号（：：）表示CSS3新增的伪元素。
2.上面的selcotor选择器可以省略，如果省略则可以匹配处于某种状态下的多个元素。
结构化伪类
结构化伪类选择器如下：
：root：匹配文档的根元素。在HTML文档中，根元素永远是<html>元素
：first-child：表示一组同胞元素中的第一个元素。
：last-child：表示一组同胞元素中的最后一个元素。
：nth-child（n）：表示一组同胞元素中的第n个元素。（顺数第n个）
：nth-last-child（n）：表示一组同胞元素中的倒数第n个元素。（倒数第n个）。
：only-child：匹配符合selector选择器，而且必须只有一个子节点。。还有其他的几个结构选择：和上面类似
：first-of-type
：last-of-type
：nth-last-of-type（n）
：nth-of-type（n）
：empty
伪元素：就是在你的文档中若有实无的元素.
(解释说明：在HTML代码中没有，我们可以通过css的样式设置伪元素，让它显示给我们看到)
伪元素：
::first-letter 伪元素 第一个字母
::first-line 伪元素 第一行
::before 在段落的开始添加文字
::after 在段落的末尾添加文字
450
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
