CSS3--简介及选择器的使用
1. CSS全称为“层叠样式表”（Cascading Style Sheet）,通常又称为“风格样式表”（Style Sheet）。用来进行网页风格设计。
2. CSS在网页中的应用：
通过设立样式表，统一地控制HTML各标签的显示属性，使用CSS还可以设置文本居中显示，文本和图片的对齐方式，超链接的不同效果等，这样层叠样式表可以更有效地控制网页的外观。
3.CSS发展史
用HTML开发出来的页面非常单调，并且比较臃肿。
1994年，哈坤利为html语言提出了CSS样式表的构想。
1996年12月推出了CSS规范的第一版 即为CSS1.0版
1998年5月W3C发布了CSS第二版 即为CSS2.0版
2004年 w3c升级了2.0版，推出了2.1版本
2010年W3C推出了CSS3版本。为最新版本直到现在。
4.CSS优势
内容与表现分离
使用HTML语言制造网页，使用CSS设置网页样式，风格，并且CSS样式单独存放在一个独立的文件里， html文件引用CSS文件就可以了，便于后期CSS样式的维护。
表现的统一
CSS可以使网页的表现的统一，并且容易修改，把CSS写在单独的页面里，可以读多个网页应用其样式，使网站中的所有页面表现，风格统一，并且需要修改页面的表现形式时，只需要修改CSS样式，所有的页面的形式即可同时修改。
丰富的样式
使的页面布局更加灵活
减少网页代码量
在CSS样式表中编写样式，这样可以减少网页代码量，并且页面代码清晰。同时一个合理的的层叠样式表，还能有效的节省网络宽带，提高用户体验。
运用于独立页面的CSS
有利于网页被搜索引擎收录
5. CSS的基本语法结构：
CSS规则有两部分组成，即选择器和声明
声明必须放在大括号{}中，并且声明可以是一条或者多条语句。
每条声明由一个属性和属性值组成，属性和值用冒号分开，每条语句以英文分号结尾。
6.<style>标签
在HTML中通过style标签引入CSS样式,style标签用于为html文档定义样式信息。
<style>标签位于<head>标签中，规定浏览器如何呈现HTML文档。
7. 在HTML中引入CSS样式
行内样式在HTML标签中直接使用style属性设置CSS样式，style属性提供了一共改变所有HTML元素样式的通用方法。
语法：
<标签名 style =”样式：样式值”>style属性</标签名>
仅对当前的HTML标签起作用，写在HTML标签中。这种方式不能是内容与表现分离，本质上并没有体现出CSS的优势，因此不推荐使用。
内部样式把CSS代码写在<head>的<style>标签中。与HTML内容位于同一个HTML文件中。方便在页面中修改样式，但不利于多页面之间共享复用代码，以及代码之间的维护，对内容与样式的分离也不够彻底。
外部样式把CSS代码保存为一个单独的样式表文件，文件扩展名为.CSS，在页面中引用外部样式表即可。HTML文件引入外部样式表有两种方式：链接式和导入式
（1）链接样式表是在HTML5页面中使用<link />标签链接外部样式表，这个<link />标签放到页面中的<head>标签中。（常用且建议使用）
语法：
<link href=”style.css” rel=”styleheet” type=”text/css”/>
其中，rel是指在这个页面中使用外部样式表，type是指文件的类型是样式文本，href是指文件所在地，也就是链接地址。
减少工作量，利于保持网站的统一样式和网站维护，减少用户在浏览网页时重复下载代码，提高了网站的运行速度。
（2）导入式在HTML网页中使用@import导入外部样式表，导入样式表必须放在<style>标签中，而<style>标签必须放在页面的<head>标签内。
语法：
<style>
<!–
@import url(“css/style.css”);
– >
</style>
前面必须要有一个@符号，url()括号内跟着的是样式表文件的位置。
链接式和导入式区别
（1）<link/>标签输入XHTML范畴，而@import是CSS2.1中特有的。
（2）使用<link/>链接的CSS是客户端浏览网页时先将外部的CSS文件加载到网页中，在进行编译显示，所以这种情况下显示出来的网页与用户预期的网页效果一样，即使网速再慢的效果也是一样的。
（3）使用@import导入的CSS文件，客户端在浏览网页时先将HTML结构呈现出来，再把外部CSS文件加载到网页当中，最终的效果与一样，只是当网速较慢时会先显示没有CSS统一布局的HTML网页，这样会给用户很不好感觉，这也是目前各大网站都比较喜欢使用链接外部样式表的原因。
样式优先级
行内样式>内部样式>外部样式 它遵循“就近原则”
8. CSS3的基本选择器
标签选择器
（1）一个HTML页面由很多的标签组成，CSS标签选择就是用来声明这些标签的，每个HTML标签的名称都可以作为相应的标签选择器的名称。
（2）语法：
标签名{样式：样式值；}
（3）写在style标签中，而style标签又需要写在head标签中。它里面的属性和值可以有多个或一个
（4）不遵循“就近原则”
类选择器
（1）当我们希望某个同样的标签是不一样的属性时，仅仅依靠标签选择器是不行的，还需要引进“类选择器（class）”
（2）语法：
.class{样式：样式值；}
.class是类名称，由用户自定义，以“.”开头
（3）设置了类选择器后，就要在HTML标签中应用类样式，使用标签的class属性引用类样式，即<标签名 class=”类名称”>内容<标签名>
（4）类选择器是网页中最常用的一种选择器，设置了一个类选择器后，只要页面某个标签中需要相同的样式，直接使用class属性调用即可。类选择器在同一个页面中可以频繁使用，应用起来非常方便。
（5）类选择器的名称可以是由用户自定义，必须符合CSS的规范。
CSS的命名规范：
- 使用英文字母小写
- 不要和ID选择器同名
- 使用具有语义化的单词命名
- 长名称或词组亏使用驼峰命名方式选择器命名。
ID选择器
（1）ID选择器的使用方法与类选择器基本相同，不同之处在于id选择器在html中只能使用一次，因此它的针对性更强。
（2）语法：
#id{样式：样式值；}
id是ID名称，是由用户自定义的，它是以“#”开头标识。
（3）同一个ID属性在同一个页面中只能使用一次
三种选择器的优先级（不遵循就近原则）
ID选择器>class选择器>标签选择器
9.CSS3的高级选择器
层次选择器通过HTML的文档对象模型元素间的层次来选择元素的。其主要的层次关系包括后代，父子，相邻兄弟和通用兄弟的几种关系。
通过他们的之间的关系就可以快速选定需要的元素。
（1）后代选择器（E F{xxxxx}）的作用是可以选中某元素的后代元素。其中E为祖先元素，F为后代元素，那么F元素无论是E元素的子元素，孙辈元素或者更胜层次的关系，都将被选中。
注意：后代选择器两个选择符之间必须要以空格隔开，中间不能有任何其他字符的插入
（2）子选择器（E>F{XXXX}）只能选择某元素的子元素，其中E为父元素,F为子元素。
（3）相邻兄弟选择器（E+F）可以选择紧接在另一个元素后面的元素（仅一个元素），它们有一个共同的父级元素，通俗的讲：E和F是同辈元素，F元素在E元素后面，并且相邻。
（4）通用兄弟选择器（E~F）用于某元素后面的所有兄弟元素，它和相邻兄弟选择器类似，需要在同一个父元素内。也就是：E和F是同辈元素，并且F元素在E元素之后，E~F将选中E后面的所有F元素（一个或多个元素）。
结构伪类选择器
伪类可以将一段并不存在的HTML当做独立的元素定位，或者是找到无法使用的其他简单选择器就能够定位到切实存在的元素上，这种选择器可以根据元素早文档树中的某些特性定位到它们。
所有的结构伪类都是基于HTML 文档树的，也称为文档对象模型（DOM），文档树（Document Tree）是HTML页面的层级结构。
它由元素，属性和文本组成，它们都是一个节点。
结构伪类选择器语法
属性选择器
在HTML中，可以给元素设置各种各样的属性，如id class href等。通过各式各样的属性可以选择到元素并且为其设置样式。
属性选择器样式表
（1）E[attr]属性选择器
a[id]{xxxxxxxx}
它是最简单的一种，用来选择某个属性的元素即可。而无论这个属性值是什么。
（2）E[attr=val]属性选择器
a[id=first]{xxxxxxx}
它为元素E设置了属性attr，并且他的值为val，相比上一个来说，在众多元素中已经缩小了选择范围，能进一步精确选择自己需要的元素。
注意：它的属性和属性值必须完成匹配才能被选中
（3）E[attr=val]属性选择器*
a[class*=vla]
它设置了通配符，为元素E设置了属性attr，并且他的属性值中包含“val”字符串。它便能够被选中匹配上。
（4）E[attr^=val]属性选择器
a[href^=http]{xxxxxx}
它为元素E设置了属性attr，并且它的属性值是以字符串“val”开头的所有E元素都能够被选中匹配上。
（5）E[attr$=val]属性选择器
a[href$=png]{xxxxx}
它与E[attr^=val]属性选择器正好相反，他表示attr属性的值是以字符串“val”结尾的所有E元素。
CSS3内容总结：版权归属：ZhangMengJia