CSS学习
1. 继承
标签未设置的属性会继承父标签设置了的属性，父标签未设置属性会继承父标签的父标签的属性，以此类推。
2. 选择器
div p 选择 <div> 元素内部的所有 <p> 元素。
div>p 选择父元素为 <div> 元素的所有 <p> 元素。
div+p 选择紧接在 <div> 元素之后的所有 <p> 元素。
[target=_blank] 选择 target="_blank" 的所有元素。
[title~=flower] 选择 title 属性包含单词 "flower" 的所有元素。
[lang|=en] 选择 lang 属性值以 "en" 开头的所有元素。
input:focus 选择获得焦点的 input 元素。
3. CSS样式
背景
background-attachment：fixed 背景随着滚动条滚动
background-repeat 背景是否重复
文字
text-indent：首行缩进
如果有要求除首行或者标题等不缩进，其他缩进则可以：
h1{
text-indent : -2em;
}
div{
padding-left : 2em;
}
<div>
<h1>标题</h1>
<p>文字</p>
<p>文字</p>
</div>
text-transform:改变字母大小写
text-shadow：文字阴影（属性1：表示向右平移的距离，属性2：表示向下平移的距离，属性3：表示模糊度，属性4：阴影颜色）
word-wrap：文字换行（可以规定宽度）
text-align:center 文字居中
伪类
a:link 普通的未被访问的链接
a:visited 用户已访问的链接
a:hover 鼠标指针位于链接上方
a:active 链接被点击的时刻
注意： 在CSS定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。
注意： 在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。
注意：伪类的名称不区分大小写。
p:first-child 匹配第一个<p>元素
p:before 在每个<p>元素之前插入内容
p:after 在每个<p>元素之后插入内容
表格
border-collapse: collapse 表格边框折叠（由双行变为单行）
colspan 是合并列，rowspan是合并行，合并行的时候，比如rowspan="2"，它的下一行tr会少一列；合并列的时候 colspan="2"，此行的列会少一列
定位
position:static 默认值
position:relative 相对布局,相对于其正常位置进行定位
position:absolute 绝对布局,相对于 static 定位以外的第一个父元素进行定位
position:fixed 绝对布局,相对于浏览器窗口进行定位
浮动
clear:left 清除左浮动
clear:right 清除右浮动
clear:both 清除所有浮动
盒子模型
外边距会叠加，采用外边距更长的那段，浮动元素不会叠加
兼容性
-ms- IE浏览器
-moz- 火狐浏览器
-webkit- Google Chrome浏览器
-webkit- Safari浏览器
-o- Opera浏览器
-xv- Opera浏览器
CSS动画
transform:translate(100px,200px); 延X轴向右平移100px，延Y轴向下平移200px。
transform:rotate(45deg); 顺时针旋转45度。
transform:scale(1,2); 宽度不变，高度变为原来的2倍。
transform:skew(20deg,30deg); X轴倾斜20度，Y轴倾斜30度。
transform:rotateX(60deg); 延X轴向平面里旋转60度。
transform:rotateY(60deg); 延Y轴向平面里旋转60度。
transition: width 1s linear 2s; 宽度过渡时间1s，过渡方式 linear，等2s开始
animation:anima 5s; 定义一个动画，名称为anima，完成时间5s
@keyframes anima{
0%{}//初始状态
25%{}//动画演示到25%状态
50%{}//动画演示到50%状态
75%{}//动画演示到75%状态
100%{}//动画演示到100%状态
}
权值
标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100，继承的权值最低可以看成0.1
p{color:red;} /*权值为1*/
p span{color:green;} /*权值为1+1=2*/
.warning{color:white;} /*权值为10*/
p span.warning{color:purple;} /*权值为1+1+10=12*/
#footer .note p{color:yellow;} /*权值为100+10+1=111*/
