css3
● css3简介
○ CSS即层叠样式表（Cascading StyleSheet）CSS3是CSS技术的升级版本，CSS3语言开发是朝着模块化发展的模块包括： 盒子模型、列表模块、超链接方式 、语言模块 、背景和边框 、文字特效 、多栏布局等CSS 用于控制网页的样式和布局。CSS3 是最新的 CSS 标准。CSS3 完全向后兼容，因此您不必改变现有的设计。浏览器通常支持 CSS2。
● css3选择器
○ 通用兄弟选择器
■ element1~element2 选择器 element1 之后出现的所有 element2。两种元素必须拥有相同的父元素，但是 element2 不必直接紧随 element1
○ 属性选择器
■ [att*=val] 属性选择器 ：选择具有att属性且属性值为包含val的字符串的E元素。
■ [att^=val] 属性选择器 ：选择具有att属性且属性值为以val开头的字符串的E元素。
■ [att$=val] 属性选择器 ：选择具有att属性且属性值为以val结尾的字符串的E元素。
○ 结构性伪类选择器
■ :root将样式绑定到页面的根元素中。所谓根元素，是指位于文档树中最顶层结构的元素，在HTML页面中就是值包含着整个页面的<html>部分
■ :not()如果相对某个结构元素使用样式，但是想排除这个结构元素下面的子结构元素，让它不使用整个样式时，可以使用not选择器
■ :empty使用该选择器来制定当元素内容为空白时使用的样式。
■ :target使用该选择器来对页面中的某个target元素（该元素的id当做页面中的超链接来使用）指定样式，该样式只在用户点击了页面中的超链接，并且跳转到target元素后起作用。
■ :first-child匹配父元素的第一个子元素,要使该属性生效，必须是某个对象的子元素。
■ :last-child匹配父元素的最后一个子元素,要使该属性生效，对象必须是某个对象的子元素。
■ ：nth-child(n)匹配父元素的第n个子元素。
● nth-child(odd)奇数行与nth-child(even)偶数行
● n:所有的行、n+2除第1行外所有的行、2n:每2行选择一行、3n:每3行选择一行、2n+4:从第4行开始隔1行选择1行
■ :nth-last-child(n)匹配父元素的倒数第n个子元素。
● n:所有行、2:倒数第2行、-n+3:最后3行
■ :nth-of-type(n)匹配同类型中的第n个同级兄弟元素。
● nth-of-type(odd)奇数和:nth-of-type(even)偶数
■ :only-child匹配父元素仅有的一个子元素。
○ UI元素状态伪类选择器
■ :checked匹配用户界面上处于选中状态的元素
■ :disabled匹配用户界面上处于禁用状态的元素
■ :enabled匹配用户界面上处于可用状态的元素
■ :inderterminate当使用户将默认设定为选取状态的单选框或者复选框修改为非选取状态，使用default选择器设定的样式依然有效
■ :read-only 指定当元素处于只读状态时的样式；
■ :read-write 指定当元素处于非只读状态时的样式；
● 注：在FF下要写成 -moz-read-only 或者 -moz-read-write
■ :default 指定当页面打开时默认处于选区状态的radio或checkbox控件的样式；
■ E:selection 指定当元素处于选中状态时的样式；
● 主流浏览器前缀
○ Gecko 前缀：-moz-
○ Presto 前缀：-o-
○ Trident 前缀：-ms-
○ Webkit 前缀：-webkit-
● css3新增属性
○ css3新增文本属性
■ text-shadow:h-shadow（水平阴影位置） V-shadow（垂直阴影距离） blur(模糊距离) color(阴影颜色)文本阴影
■ word-break：normal（默认）/break-all(允许在单词内换行)/keep-all(只能在半角空格或连字符处换行。)规定非中日韩文本的换行规则。
■ word-wrap：normal(默认)/break-word(允许在单词内换行)允许对长的不可分割的单词进行分割并换行到下一行。
■ @font-face：设置字体
● Firefox、Chrome、Safari 以及 Opera 支持 .ttf (True Type Fonts) 和 .otf (OpenType Fonts) 类型的字体。
Internet Explorer 9+ 支持新的 @font-face 规则，但是仅支持 .eot 类型的字体 (Embedded OpenType)。
例：
@font-face{font-family: myFirstFont;
src: url('Sansation_Light.ttf'),
url('Sansation_Light.eot'); /* IE9+ */}
○ 背景新增属性
■ background-origin: content-box/padding-box / border-box 规定背景图片的定位区域。
■ background-clip: content-box/padding-box / border-box 规定背景的绘制区域。
■ background-size:规定背景图片的尺寸。
■ background-break：指定内联元素的背景图像进行平铺时的循环方式
■ 多重背景图：background-image:url(bg_flower.gif),url(bg_flower_2.gif);
○ css3 颜色
■ rgba：
● 优雅降级和渐进增强
○ 渐进增强 progressive enhancement：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
○ 优雅降级 graceful degradation：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。
○ 区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带。
● css3扩展
○ E[att|="val"]{ sRules }选择具有att属性且属性值为以val开头并用连接符"-"分隔的字符串的E元素。(css2)
○ E[att~="val"]{ sRules }选择具有att属性且属性值为一用空格分隔的字词列表，其中一个等于val的E元素。(css2)
○ :only-of-type匹配同类型中的唯一的一个同级兄弟元素E。
○ :lang(){}匹配使用特殊语言的E元素。
○ :nth-last-of-type(n){}匹配同类型中的倒数第n个同级兄弟元素。
○ :first-of-type匹配同类型中的第一个同级兄弟元素。
○ :last-of-type匹配同类型中的最后一个同级兄弟元素。
○ :focus设置对象在成为输入焦点（该对象的onfocus事件发生）时的样式。(css2)
○ E:focus 元素获得光标焦点时使用的样式，主要是在文本框控件获得焦点并进行文字输入的时候使用；
○ E:active 元素被激活(鼠标在元素上按下还没有松开)时使用的样式；
○ E:hover 鼠标指针移动到某个文本框控件上的样式；
