1. css选择器
1) 基本选择器
2) 层次选择器
3) 属性选择器
.first[name]
4) 伪类选择器
:hover
:first-child
:last-child
:nth-child
:nth-last-child
5) 伪元素选择器
::before
::after
::first-letter
::first-line
2. css层叠
1) 优先级
1. important
div{
background-color:lightblue !important;
}
2. 选择器权重（特性值）
1000 规则应用在了 style 属性中
100 id选择器
10 类选择器，伪类选择器，属性选择器
1 元素选择器，伪元素选择器
div{
background-color:lightblue ;
}
div.one{
background-color:orange ;
}
#first{
background-color:pink ;
}
<div class="one top" id="first">
hello world
</div>
3. 顺序
div.one{
background-color:orange ;
}
div.top{
background-color:pink ;
}
2) 继承
规则的继承，可以被继承的规则有
font-*
text-*
list-*
color
...
不可以被继承
background-*
border-*
margin-*
padding-*
...
body {
font-size:14px;
}
.first {
font-size: unset;
}
<body>
<div class="first">hello world</div>
</body>
inherit
initial
unset
3) 单位
颜色
1. 关键字 black
2. 十六进制 #000000
3. rgb() rgb(0,0,0)
4. rgba() rgba(0,0,0,0.4)
长度
1. 绝对单位
px 100px
cm
mm
in
2. 相对单位
1) em
相对于当前元素的字体大小值
html{
font-size:14px;
}
<div style="font-size:18px; margin:1em"></div>
1em = 18px
2) rem
相对于html元素的字体大小值
html{
font-size:14px;
}
<div style="font-size:18px; margin:1rem"></div>
1rem = 14px
3. 字体规则
css语法-> 选择器 -> 规则
-> 字体规则
-> 列表规则
-> 盒子规则
-> animate
1) color
2) font-family
通用字体(英文)
serif
sans-serif
monospace
cursive
fantasy
常用字体（中文）
Microsoft YaHei
微软雅黑
宋体
应用规则
html {
font-size:14px;
font-family:"Microsoft YaHei","宋体","serif"
}
webfont
1. 下载字体
ttf (TTF)
woff
svg
eot
2. 在css定义字体
@font-face {
font-family:'myfont',
src:url('../fonts/myfont.ttf'),url('../fonts/myfont.woff')
}
3. 在自定义css中使用字体
html {
font-family:'myfont' , serif;
}
字体图标图
iconfont 阿里巴巴
font-awesome
css
font-awesome.css
@font-face{
}
.fa {
font-family:FontAwesome
}
.fa-user::before {
content:'\f000'
}
font
font-awesome.ttf
font-awesome.svg
<i class="fa fa-user">\f000</i>
3) font-style
4) font-weight
bold
5) line-height
行高
6) font
速写形式
font: [font-style] [font-weight] font-size [line-height] font-family
必须填写的属性
font-size
font-family
字体大小和行高同时出现，语法
14px/2
font-size 14px
line-height 2em
font: 14px "微软雅黑","宋体";
7) text-indent
8) text-align
9) text-transform
10)text-decoration
text-decoration:
text-decoration-style 样式(solid,dashed,dotted,double)
text-decoration-color 颜色
text-decoration-line 位置
11)text-shadow
text-shadow: h v blue color;
12) cursor
pointer
13) outline 外边框
4. 列表样式
list-style-image 列表图标
list-style-position 列表图标位置
list-style-type 列表图标类型
速写形式 list-style none
5. 盒子样式
1) 盒子模型
所有的块元素都可以理解为盒子模型
div p
盒子特性
margin 外边距盒子距离其他盒子的空间
border 盒子边框
padding 盒子边框距离内容的空间
content 盒子内容，用于存放子元素或者内容的地方
1. 传统盒子（内容盒子）
box-sizing:content-box;
width = content
<div class="box1"> hello </div>
width = 内容
100 100px
.box1 {
width:100px;
height:100px;
margin:10px;
padding:10px;
border:10px solid #ccc;
}
内容区 ： width
占有面积: width + padding + border
2. 边框盒子
box-sizing:border-box;
width = border以内
<div class="box1"> hello </div>
width = border + padding + 内容
100 20 20 60px
.box1 {
width:100px;
height:100px;
margin:10px;
padding:10px;
border:10px solid #ccc;
}
盒子所在空间=
盒子内容空间=
2) 边框
border
border-top 上边框
border-top-style
border-top-width
border-top-color
border-right 右边框
border-bottom 下边框
border-left 左边框
border : 1px solid #ccc;
3) 盒子居中
margin: 0 auto;
4) 外边距
margin
margin-top
margin-right
margin-bottom
margin-left
margin : 1px;
上右下左都为1px
margin : 5px 10px;
上下5px,左右10px;
margin : 1px 5px 10px;
上1px,左右5px,下10px
margin : 1px 5px 10px 20px;
上1px,右5px,下10px,左20px
5) 内边距
padding
padding-top
padding-right
padding-bottom
padding-left
padding : 1px;
上右下左都为1px
padding : 5px 10px;
上下5px,左右10px;
padding : 1px 5px 10px;
上1px,左右5px,下10px
padding : 1px 5px 10px 20px;
上1px,右5px,下10px,左20px
6) 背景
background
background-color
背景色，从边框开始覆盖
background-image :url(path)
图片默认从内容区开始覆盖，但是可以通过bg-origin修改
background-origin
border-box 从边框覆盖
content-box 从内容覆盖
background-repeat
图片重复方式
repeat x,y重复
repeat-x x重复
repeat-y y重复
no-repeat 不重复
background-position
图片的起始位置
关键字 center
坐标 20px 20px
background-size
cover 覆盖，覆盖最大的边
contain 包含，覆盖最小的边