归纳整理（思维导图）
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
font-size/line-height
14px/2
9) text-indent 缩进
p {
text-indent : 2em; //首行缩进
}
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-shadow
h v blur color;
text-shadow:2px 2px 5px black;
2. 列表规则
list-style: circle inside;
list-style: 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) 盒子样式
1. margin
margin-top
margin-right
margin-bottom
margin-left
margin: 5px;
margin: 5px 10px;
margin: 5px 10px 15px;
margin: 5px 10px 15px 20px;
2. padding
padding-top
padding-right
padding-bottom
padding-left
padding: 5px;
padding: 5px 10px;
padding: 5px 10px 15px;
padding: 5px 10px 15px 20px;
3. 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
4. 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-color背景色颜色
颜色
background-clip 背景色的填充方式
border-box / padding-box / content-box
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;
4. 表格规则
border-collapse
table-layout
5. 布局
---------------------------
css
语法
规则
选择器 {
样式规则
}
注释
/**/
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.
================
http://zhaopin.jd.com/web/job/job_info_list/3