回顾总结
1.字体规则
1）color
2）cursor
3）font-family
1. 常规字体
2. 常用字体
3. 字体栈
4. webfont
5. 字体图标（第一个框架）
font-awesome
iconfont
@font-face {
font-family:
src:
}
4）font-style
normal/italic/oblique
5) font-weight
normal/bold/bolder/lighter/100~900
6) font-size
16px , 12px / 14px
7) line-height 行高 14px
8)font 速写形式
必须写的两个属性：font-size,font-family
顺序：
font-style
font-weight
font-size
line-height
font-family
9）text-indent 缩进
p {
text-indent : 2em; //首行缩进2个字符
}
10) text-align 文字排列方式：
left/center/right
11) text-decoration 文本修饰：
text-decoration-line
underline/overline/linethrough
text-decoration-style
solid / dotted /dashed /double
text-decoration-color
12）text-shdow 文字阴影：
h v blur color;
text-shadow:2px 2px 5px black;
2.列表规则
list-style:circle inside;/none;
list-style-image:url();
list-style-type:circle /…
list-style-position:inside / outside
3.盒子规则
1）盒子模型
box-sizing
content-box(内容盒子/传统盒子)
width = 内容的宽度
实际占有width = width + padding + border
border-box(边框盒子)
width = 实际占有的width(width + padding + border)
2）盒子样式
margin:(外边距)
margin-top
margin-right
margin-bottom
margin-left
margin: 5px;
margin: 5px 10px;
margin: 5px 10px 15px;
margin: 5px 10px 15px 20px;
padding:(内边距)
padding-top
padding-right
padding-bottom
padding-left
border:(边框)
border-top
border-top-style
border-top-width
border-top-color
border-right
border-right-style
border-right-width
border-right-color
border-bottom
border-bottom-style
border-bottom-width
border-bottom-color
border-left
border-left-style
border-left-width
border-left-color
background:(背景)
background-image
url(path)
background-position: 背景图片的位置
关键字/20px 20px
backgroupd-origin:背景图片的起点
border-box/content-box
background-repeat:背景图片的重复方式
repeat-x/repeat-y/no-repeat
background-size:背景图片的填充方式
cover/ contain
background速写:
1) color
2) clip color
3) image position repeat
4) image position
5) image repeat
background: url(“./images/bg.jpg”) 0 0 no-repeat;
background-color: #0e3b98;
backgrond-clip:设定背景的覆盖范围
border-box——–背景位于边框以内
padding-box——-背景位于内边距以内
content-box——-背景位于内容区
background-attachment (设置背景图像的固定点)
速记写法取值：
[][][][
css
语法
规则
选择器 {
样式规则
}
css注释: /* mmm */
html注释:<!-- mmm -->
css在html中的应用:
1 style=""
2 <style></style>
3 style.css
<link rel="stylesheet" href="">
选择器
规则
1. 字体模块
2. 列表模块
3. 盒子模块
4. 表格模块
5. 动画模块
6. 媒体查询模块
布局
1、2、3、4、5、