CSS复习资料
CSS简介
概念
Cascaing Style Sheet 这三个单词的首字母缩写，翻译过来就是层叠样式表；
css的作用主要是用来定义页面中的表现；
引入
1. 外部样式表
使用link标签引入外部样式表。一般情况下，会有一些样式是公有的，这些样式写在一个或多个文件中，通过外部样式表引入到文件中，维护起来也比较方便。
<head>
<link rel='stylesheet' href='http://demo.css'>
</head>
2. 内部样式表
写在style里面，如果一些页面有特有的样式，并且样式比较少的情况么可以放在内部样式表中。
如果内容比较多，并且为了不影响页面的加载，一般采用外部样式表。
<head>
<style>
body{background-color:#ffffff;}
p{margin-left:20px;}
</style>
</head>
3. 内嵌样式
直接写在标签内部，用style属性的方式；这种方式使得css样式和html标签嵌在一起，不利于后面的维护，一般不建议使用这种方式。
<p style='color:red;margin-left:20px;'>
this is a paragraph
</p>
语法
总语法
在大括号前面是选择器，在大括号里面是属性声明；
每个属性生命需要用分号来分隔（最后一个属性可以不写分号，但是为了以后的维护，我们一般在最后一个属性后也写上分号）；
每一个属性由属性名和属性值组成，中间用冒号来分隔；（属性名：属性值）
注释：/* 注释内容 */
/*用户列表*/
.m-userlist{
margin:0 0 30px 0;
}
.m-userlist .list{
position:relative;
height:93px;
overflow:hidden;
}
.m-userlist .list ul{
margin:-13px 0 0 -13px;
zoom:1;
}
@规则
- @media 主要是一些响应式的布局
- @keyframes 主要是用来描述css动画的中间步骤
- @font-face 引入外部字体
浏览器私有属性
浏览器厂商会实现一些还没有成为标准的属性，为了区分标准属性，浏览器会在属性前加一些前缀
- chrome、safri
-webkit- - Firefox
-moz- - IE
-ms- - opera
-o-
为了兼容这些私有的属性，我们会把这些私有属性写在前面，将标准属性写在后面，
.pic{
-webkit-transform:rotate(-3deg);
-moz-transform:rotate(-3deg);
-ms-transform:rotate(-3deg);
-o-transform:rotate(-3deg);
transform:rotate(-3deg);
}
