小技巧：

1、sublime中 输入！再同事按住ctrl+e，生成html模板

2、caniuse网站可以查询属性在各个浏览器的支持情况

3、ul>li*10>a,再ctrl+E

4、transform 按下table，自动生成前缀

学习笔记：

第一章：伪元素选择器，伪元素

一、伪类选择器

定义：不存在html中，可用css能够选择，并对其进行渲染修饰。

1、动态--伪类选择器

a:link{color: #666;}

a:visited{color: #f00;}

a:hover{color:#000;}

a:active{color: #0f0;}

2、UI元素状态--伪类选择器

input:enabled{background-color: #0f0;}

input:disabled{background-color: #f00;}

3、重点：结构--伪类选择器

first-child选择第一个元素

last-child选择最后一个元素

nth-child选择第n个元素，填‘n’表示全部，2n表示双数，2n+1表示单数

nth-last-child，从后往前数的nth-chiled

nth-of-type，固定类型的数数

nth-last-of-type，固定类型的数数，从后往前数数

first-of-type，固定类型的数数，第一个

last-of-type固定类型的数数，最后一个

only-child只有一个元素时候才生效

only-of-type只有一个有类型元素时候才生效

empty标签内容为空时候选择，比如<li></li>

二、伪元素

::first-letter 

::first-line

.demo::first-letter{

font-size: 40px;

font-weight: bold;

float: left;

}

::before，::after

.demo1::before{

content: url(./pic.jpg);

display: block;

}#content一定要写，即使内容为空

第二章：CSS3变形，画多边形

一、boder-radius画圆，半圆

border-top-left-radius: 10% 20%;

border-top-right-radius: 20%;

二、画三角形

border-top:50px solid transparent;

border-left:50px solid #f66;

border-bottom:50px solid transparent;

第三章：CSS3的颜色  透明，颜色模式，渐变

一、opacity：value|inherit

     阴影box-shadow: 3px 3px 5px #888;

*外层样式使用相对布局，内层样式使用绝对布局

二、颜色模式

rgba(),颜色变化，文字不变，而opacity会是文字一起褪色，所以opcacity只作用于背景

hsla()

第四章：CSS3的过度属性  简单的过度属性

第五章：CSS3的动画  复杂的CSS动画

第六章：CSS3文字排版的新特性