总的来说CSS分为CSS和CSS3，只不过CSS3是在CSS基础上增添了新属性，而且CSS3的兼容性暂时不好，也就是chrome支持，其他浏览器兼容性不强。
CSS的主要作用就是为我们的HTML增添样式，比如颜色，大小等，所以我们要使用CSS必须先选取到HTML的元素， 即选择器的用法，能选取到你需要改变的HTML元素，选择器分为很多种，常用的也就4种，可以去W3SCHOOL上面去查询。这里还涉及到元素的命名，主要使用的是id命名，class命名，name命名，各选取的方式也不同，在CSS中常用class来命名。
选择好元素之后，我们能对HTML进行元素属性的改变。元素属性分类主要是：
一元素样式：元素可改变的属性
1.背景 ------background-color背景颜色 background-image背景图片 background-repeat背景重复 background-positon背景定位 background-attachment背景跟随滚动
2.文本 ------text-decoration文本装饰（主要是下划线、删除线、上划线） text-indent文本缩进（段落首行缩进）text-align文本居中对齐（垂直方向） 还有字间隔，字母间隔（不常用，W3SCHOOL查询）
3.字体 -----font-size字体大小 font-family字体系列 font-style字体风格（字体斜体） font-weight字体加粗
4.链接 -----这里主要使用a:hover{color:blick} 代表当鼠标移动到a链接上的时候，字体会变成黑色，：hover不仅仅适用在a标签上，它使用在大部分元素上都可以。
5.列表 -----这里主要使用li{list-style:none} 代表的是去掉列表中li中的小圆点或者数字。
二 框模型：CSS中盒子模型十分重要，我们可以把每一个元素当做一个盒子模型使用
1.元素本身 ----元素本身的大小，上下左右的宽度，比如ul he p自身就有一定的大小
2.盒子本身的内边距 -----盒子边框距离元素的距离 ---padding
3. 盒子的边框 ------盒子边框也有一定的宽度 ----border{1px solid red}
4.盒子的外边距 ------盒子距外界的距离 ------margin 注：当2个盒子相邻时，都有外边距的时候，我们取较大的那个外边距。
三定位 - - - - -相对父元素定位，必须要要给父元素给个定位position:relative，不然会相对于body定位
1.相对定位 -----positon:relative 相对父元素移动，但是原位置还会占据空间，不会被后面的元素代替。
2.绝对定位 -----positon:absolute 相对父元素移动，但是原位置失去，因为绝对定位会漂浮起来，脱离文档流，后面的元素代替其原来的位置。
3.固定定位 -----positon:fixed 相对于body移动，但是移动之后位置不发生改变，不随滚动条滚动，始终出来网页的固定位置。
4.浮动定位 -----float:left 浮动是指让该块漂浮起来，脱离了文档流，后面的元素不浮动的话会代替该元素，clear:both代表的是清除浮动。
浮动在导航中可以使用，让ul中的li浮动即可很想显示
CSS3的作用主要是配合HTML做一些简单的动画效果，取代一些flash js的功能
边框效果 -------给予边框特效
1.边框阴影 -----box-shadow:10px 10px 5px red----红色阴影，5像素的模糊值，右下10个像素的阴影宽度
2.边框圆角 -----border-radius:25px ------边框
还有个边框图片，不建议使用，叫UI小妹做个图吧！！！
文字效果
1.文字阴影 -----text-shadow:10px 10px 5px red 用法和盒子阴影一样
2D转换 ----2D转换，平面转换
1.方向移动---transform:translate(300px,200px) 向右移动300px,向下移动200px.
2.角度旋转---transform:rotate(30deg) 顺时针方向旋转30度.
3.尺寸变化----transform:scale(2,4)元素以自身中心宽放大2倍，高放大4倍
4.元素翻转----transform:skew(30deg,20deg)指元素以自身中心X轴Y轴边框旋转30度，20度。
3D转换 ----3D转换，3维转换
1.绕X轴3维旋转----transform:rotateX(120deg)绕X轴旋转120度
2.绕Y轴3维旋转----transform:rotateY(120deg)绕Y轴旋转120度
过渡----指元素值变化使用过渡
DIV{transform:width 3s linear 2s} DIV:hover{400px}-----当鼠标移入到DIV中时，2s后，DIV宽度变化到400px用时3S
动画----
@keyframes myfirst
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
DIV{animation: myfirst 5s linear 2s infinite alternate;}
DIV从红色变到绿色，时间是5S,延迟时间是2S，动画效果无限次，而且一次动画效果后会反向播放。