CSS样式、动画以及盒子模型

CSS: 级联样式表

优势：
内容与表现分离
网页的表现统一，容易修改
丰富的样式，使得页面布局更加灵活
减少网页的代码量，增加网页的浏览速度，节省网络带宽
运用独立于页面的CSS，有利于网页被搜索引擎收录

行内样式：

<p style="color: red;">我叫 xxx</p>

内部样式表(一般书写在head标签内部)：

<style type="text/css">
     p{ color: red;}
</style>

外部样式:

<link href="css/index.css" rel="stylesheet" type="text/css">

优先级别：
行内样式 > 内部样式表 >外部样式表

标签选择器：
P{ color:red;}

类选择器（class）:
.xxx{ …}

ID选择器(id):
#xxx{ …}

优先级：
ID选择器>类选择器>标签选择器

字体样式

font-family 	设置字体类型					font-family:"隶书"; 
font-size 		设置字体大小					font-size:12px; 
font-weight 	设置字体的粗细				font-weight:bold; 
font 			在一个声明中设置所有字体属性	font: bold 36px "宋体"; 

文本属性

属性					含义						举例
color 				设置文本颜色				color:#00C; 
text-align 			设置元素水平对齐方式		text-align:right; 
text-indent 		设置首行文本的缩进			text-indent:20px; 
line-height 		设置文本的行高			line-height:25px; 
text-decoration 	设置文本的装饰			text-decoration:underline; 
text-shadow			设置文本阴影				text-shadow:30px -10px 2px red; 
//4个参数分别表示阴影向右偏移、向下偏移、阴影模糊度、阴影颜色

行级元素：

1.与其他行内元素共享一行
2.不能修改width、height属性，大小由内容撑开
3.padding属性 top、right、botto、left设置都有效；margin属性只有left、right设置有效
a 、 img 、 span …

块级元素：

1.独占一行，在不设置自己的宽度的情况下，块级元素会默认填满父级元素的宽度
2.可以修改width、height属性
3.padding、margin四个方向的值设置均有效
div 、p 、h1~h6 …

display：

none： 隐藏元素，不显示
block：以块级元素的特点显示
inline：以行级元素特点显示
inline-block：使元素变成行内块级元素，结合了行内元素和块级元素的特性（不独占一行的块级元素），即
1.与其他行内元素共享一行
2.可以修改width、height属性
3.padding、margin四个方向的值设置均有效

伪类样式：

伪类名称			含义							示例
a:link 			未单击访问时超链接样式			a:link{color:#9ef5f9;} 
a:visited 		单击访问后超链接样式			a:visited {color:#333;} 
a:hover 		鼠标悬浮其上的超链接样式		a:hover{color:#ff7300;} 
a:active 		鼠标单击未释放的超链接样式		a:active {color:#999;} 
设置伪类的顺序：a:link->a:visited->a:hover->a:active

设置鼠标样式：
cursor:pointer /设置鼠标样式为手指/

列表样式：

List-style-type：设置列表格式（列表每一项前面的符号），设置（实心圆、空心圆、正方形…），如果设置为none，表示列表项没有符号
list-style-image:设置列表项为自定义图片（需注意图片的路径）

list-style-image: url("../image/bang.gif")

背景：

background-color：背景颜色
background-image:设置背景图片
background-repeat:设置背景图片是否重复
background-position:设置背景图片位置
background-size：设置背景图片大小（拉伸…）

背景颜色渐变：

线性渐变

background: linear-gradient(white,#5bc0de 30%,white)

径向渐变

background: radial-gradient(yellow 30%, red 50%,green,white);

CSS动画

translate()：平移函数，基于X、Y坐标重新定位元素的位置
右平移20像素：transform: thranslate(20px,0px)
scale()：缩放函数，可以使任意元素对象尺寸发生变化
缩放0.8倍： transform: scale(0.8)
rotate()：旋转函数，取值是一个度数值
旋转45度：transform: rotate(45deg)
skew()：倾斜函数，取值是一个度数值
水平倾斜45度：transform: skew(45deg,0deg)

合在一起写：空格隔开

transform: thranslate(20px) scale(0.8) rotate(45deg)

transition呈现的是一种过渡，是一种动画转换的过程，如渐现、渐弱、动画快慢等
CSS3 transition的过渡功能更像是一种“黄油”，通过一些CSS的简单动作触发样式平滑过渡

transition: all 1s ease-in-out 1s;

过渡动画速度：
ease：速度由快到慢（默认值）
linear：速度恒速（匀速运动）
ease-in：速度越来越快（渐显效果）
ease-out：速度越来越慢（渐隐效果）
ease-in-out：速度先加速再减速（渐显渐隐效果）

设置过渡步骤：
在默认样式中声明元素的初始状态样式
声明过渡元素最终状态样式，如悬浮状态
在默认样式中通过添加过渡函数，添加一些不同的样式
animation实现动画主要由两个部分组成
1.通过类似Flash动画的关键帧来声明一个动画
2.在animation属性中调用关键帧声明的动画实现一个更为复杂的动画效果

盒子模型

Border 边框
border: solid 1px red;` 边框类型 边框粗细 边框颜色

margin：外边距 （网页居中）
设置他的上外边距15px 左外边距 10px 右外边距 20px 下外边距5px；
margin：15px 20px 5px 10px； 顺时针（上右下左）
margin： 15px 20px； 上下外边距 15px ，左右外边距20px；
margin： 0px auto； 设置盒子居中（必须要有宽度）

padding：内边距
设置他的上内边距15px 左内边距 10px 右内边距 20px 下内边距5px；
padding：15px 20px 5px 10px； 顺时针（上右下左）
padding： 15px 20px； 上下内边距 15px ，左右内边距20px；

盒子模型总尺寸=border+padding+margin+内容宽度
圆角边框
border-radius: 15px; 四个角都设置15px

border-radius: 15px 10px 20px 5px;`顺序依次为左上、右上、右下、左下（顺时针）

盒子阴影（用法同text-shadow）：

box-shadow: #999999 5px 5px 10px;