0. 语法
css规则
选择器 {
属性名:属性值;
属性名:属性值;
}
1. 如何在html中应用css规则
1) 属性内嵌
<div style=""></div>
2) 内嵌
<head>
<style>
规则
</style>
</head>
3) 外部导入
style.css
<head>
<link rel="stylesheet" href="style.css">
</head>
2. 选择器
1) 基本选择器
div p ul
.first
#one
div.first
div,.first
*
2) 层次选择器
ul li
ul>li
ul>li+*
ul>li~*
3) 属性选择器
input[name]
input[name=user]
input[name=^user]
input[name=$user]
input[name=*user]
input[class=~user]
<div class="user one"></div>
4) 伪类选择器
:hover
:active
:first-child
:last-child
:only-child
:nth-child()
:nth-last-child()
:first-of-type
:last-of-type
:nth-of-type()
:nth-last-of-type()
5) 伪元素选择器
::after
::before
3. 级联
1) important
2) 权重
1000 内嵌在style属性中的
100 id选择器
10 类选择器，伪类选择器，属性选择器
1 元素选择器，为元素选择器
<ul class="list">
<li>one</li>
<li id="two">two</li>
<li>three</li>
</ul>
ul.list > li:nth-child(2) {
}
#two {
}
3) 代码顺序
4. 单位
1) 颜色单位
1. 关键字
2. 十六进制
3. rgb()
4. rgba()
2) 长度单位
1. px 绝对值
2. em
相对单位，相对于当前元素的字体大小
<div class="first">
this is first
</div>
.first {
font-size:20px;
}
1em = 20px;
3. rem
相对单位，相对于html上字体大小
html {
font-size:20px;
}
1rem = 20px;
4. 百分数
5. 字体
color
font-family
1) 通用字体
serif
sans-serif
2) 常用字体
Microsoft YaHei
微软雅黑
宋体
...
3) 字体栈
font-family: "微软雅黑", sans-serif;
4) webfont
将字体保存到服务器中，然后在css通过@font-face引用字体库，这样，即使客户端的电脑上没有安装该字体，也可以应用该字体
1. 下载字体，将其部署到服务器中
.woff
.ttf
2. css中定义该字体
@font-face {
font-family:'myfont',
src:url()
}
3. css中应用该字体
font-family : myfont;
font-size: 14px;
5) 字体图标库
1. font-awesome
1) 下载代码
css
font-awesome.css
@font-face {
src:url
}
.fa {
}
.fa-user {
}
font
2) 在网页中导入css代码
<link rel="stylesheet" href="css/font-awesome.css">
3) 应用
<i class="fa fa-user"></i>
2. iconfont
1) 选择性下载字体图标
css
font
2) 在网页中导入css代码
<link rel="stylesheet" href="css/iconfont.css">
3) 应用
<i class="iconfont ..."></i>
------------------
0. 注释
1. 块，行
2. h5新增标签
3. 网络字体
服务器
/
fonts
xxx.ttf
app03
index.html
浏览器
index.html
加载webfont到本地
字体图标