选择器：在CSS3中，提倡使用选择器来将样式与元素直接绑定，匹配方式更加直观，也减少代码的书写量，在原先的HTML4和CSS2中，单纯为了添加样式而书写了很多了class，在CSS3中提供了丰富的选择器（可以想象下jquery的选择器）

1. div[id=”div_Big”] {background:red;}(id为属性， [att=val]{}属性选择器)
   • [att*=val]（属性中包含val）[att^=val]（属性的开头字符为val）[att$=val]（属性的结尾字符为val）
2. 伪类选择器：并不是针对真正的元素使用的选择器，而是针对css中已经定义好的伪元素使用的选择器（选择器:伪元素{样式}）
   • First-letter（首个字）before（在元素之前，content属性设置插入内容）after（在元素之后，content属性设置插入内容）
   • 结构性伪类选择器：root（页面的根元素）not（排除该元素下的子元素）empty（元素内容为空白）target（当用户点击了页面中的超链接，并且跳转到target元素后起作用）
   • 子类位置伪类选择器：First-child（第一个元素）、last-child（最后个元素）、nth-child（指定序号的元素）、nth-last-child（倒序的指定需要的元素）其中的序号可以为（even为偶数，odd为奇数，或者为an+b的形式）、nth-of-type（nth-child相同，但针对同类型的子元素计算）、nth-last-of-type（与nth-last-child相同，但针对同类型的子元素计算）、only-child（只有一个子元素使用的样式）
   • 元素状态伪类选择器：hover、active、focus、enabled、disabled、read-only、read-write、checked、default、indeterminate、selection，各浏览器的支持不同
3. 兄弟元素选择器：子元素 – 子元素之后的同级兄弟元素

特性：

1. Before和after的伪类选择器中的插入：可以实现文字图片的插入
2. 文字阴影（text-shadow）、自动换行（word-break）、长单词和URL地址自动换行（word-wrap）

使用服务端字体：

1. @font-face{font-family:WebFont;src:url(xxxx) format(“opentype”);font-weight:normal;}
2. Format:pentype(.otf),truetype(.ttf)微软自身的Embedded OpenType不用设置(.eot)

圆角的书写：border-radius,Firefox(-moz-)Safari(-webkit-)Opear(-o)Chrome(-webkit-或者不加)IE(不加)

很多属性都需要这样添加前缀

变形处理：transform需要加前缀。旋转（rotate）、缩放（scale）、倾斜（skew）、移动（translate），可以多种变形同时使用

Transform-origin变形的基准点需要加前缀：left/center/right，top/center/bottom

动画：transitions与animations

1. Transitions：将元素的某个属性从一个属性值在指定时间内平滑过渡到另一个属性值，需要加前缀，可以多个属性同时过渡
   Transition:property(属性) duration(过渡时间) timing-function(过渡方法)
   可同背景操作已经，对3个值分别设置（不推荐）
2. Animations：通过定义多个关键帧以及定义每个关键帧中元素的属性值来实现复杂的动画效果，需要添加前缀
   • Keyframes定义多个关键帧{0%{帧样式}40%{帧样式}70%{帧样式}100%{帧样式}}，内部分别使用transform执行基本动画
   • Animation:name(关键帧组名称：keyframes定义的名称) duration(过渡时间) timing-function(过渡方法)
   • Animation-iteration-count：指定动画的播放次数
3. 过渡方法：
   • linear：开始到结束以同样速度进行改变
   • ease-in：开始慢，然后沿曲线加速
   • ease-out：开始快，然后沿曲线减速
   • ease：开始慢，然后沿曲线加速，再沿曲线减速
   • ease-in-out：开始快，然后沿曲线减速，在沿曲线加速

盒模式：display设定元素模式，box为盒模式需要添加前缀

1. 用box-pack及box-align来指定元素中文字图像及子元素水平方向或垂直方向的对齐方式，需要添加前缀

Media query：媒体查询选择器，例如：根据浏览器的窗口大小来选择不同的样式（实现响应式样式设计）

1. @media 设备类型 and (设备特性),设备类型 and (设备特性){样式代码}
2. 设备类型：
   All（所有设备）screen（电脑显示器）print（打印机或打印预览图）handheld（便携设备）tv（电视机）speech（语音和音频合成器）braille（盲人用点字法触觉回馈设备）embossed（盲文打印机）projection（投影设备）tty（固定密度字母栅栏的媒介，比如电传打字机和终端）
3. 设备特性：
   Width（浏览器窗口宽度）height（浏览器窗口高度）device-width（设备屏幕分辨率宽度值）device-height（设备屏幕分辨率高度值）orientation（浏览器窗口方向，portrait：纵向或landscape：横向）aspect-ratio（浏览器窗口的纵横比）device-aspect-ration（品目分辨率的纵横比）color（设备使用多少位的颜色）color-index（色彩表中的色彩数）monochrome（单色帧缓冲器中的每像素的字节数）resolution（设备分辨率值）scan（电视机类型设备的扫描方式progressive：逐行扫描或interlace：隔行扫描）grid（设备是基于栅格：1还是基于位图：0）

加载外部css：

1. @import url(color.css) screen and (min-width:1000px);

透明设置：

1. Alpha：最后个参数为透明度，0~1，与opacity区别在可以只对背景进行透明度处理
   • Rgba：background-color:rgba(255,0,0,0.5)
   • HSL：bakcground-color:hsla(0,100%,100%,0.5)
2. 颜色能设置为transpatent，设置为完全透明：color:transparent;

Resize：可以设置通过拖动方式修改尺寸，主要用于overflow属性的任何容器元素

None（不能修改元素尺寸）both（宽度和高度）horizontal（宽度）vertical（高度）inherit（继承父元素）

Initial：取消元素的样式指定

总结：

• Css3的变动基本是倾向于尽可能区分样式对html所产生的影响，如加载外部css，新版的选择器
• 面对现在种类繁多的显示设备，提供了更多的独立化设置，使得开发中可以针对各个设备建立独立的样式（因为html已完全不参与样式设计），可进行响应式设计模式
• 最主要的还是基本上实现了基本功能的兼容，盒模式的加入，更容易处理页面的整体结构，对于不定高不定宽的设计也更加容易