CSS
CSS介绍
Css:
层叠样式表/级联表
样式风格:
展开式,小写,选择器与大括号,冒号和键值,有空格
结构:
选择器+一条多条声明
选择器
选择器:单选择器和复合选择器
单选择器
单选择器:标签选择器,类选择器,id选择器,通配符选择器
1. 标签选择器
定义标签选择器:
p {
color: blue;
}
调用选择器:自动调用
- 定义方式:标签名{}
- 特点:选择某类标签。可快速全局设置样式。但不能差异化设置
2. 类选择器
定义类选择器:
.red {
color: red;
}
调用选择器:
单类名调用:
<p class="red">gaoyang</p>
多类名调用:
<p class="red font">gaoyang</p>
- 定义方式: .类名字
- 类名字不能用标签名字
- 可以用段横线分割长名字
- 不能用纯数字和中文
- 多类目之间用空格隔开
作用:能差异化设置
3. id选择器
定义id选择器:
#gaoyang {
color: black;
font-size: 30px;
background-color: blanchedalmond;
width: 150px;
}
调用选择器:
<div id="gaoyang">gaoyang</div>
- 定义方式:#定义
- 用id调用
- 调用是一次性的
- 通常和js一起使用
4. 通配符选择器
定义通配符选择器:
* {
color: darkmagenta;
font-size: 10px;
}
调用选择器:自动调用
定义适用于所有的标签元素
复合选择器
复合选择器:后代选择器,子选择器,并集选择器,伪类选择器
1. 后代选择器(包含选择器):
通过空格 选择后代,可以是任意选择器,可跳跃选择
定义后代选择器:
ol li {
color: red;
}
.nav li a {
color: gold;
}
2. 子选择器:
通过>选择亲儿子。而非后代
定义子选择器:
.d1>a {
color: indianred;
}
3. 并集选择器:
选择多组标签,定义相同样式,统一声明。
可嵌套使用后代选择器,子选择器。
不同标签间用,隔开。
通常竖着写。
a,
li {
font-size: 30px;
}
4. 伪类选择器:
向某些选择器添加效果
链接伪类/结构伪类
用:进行分割
链接伪类:
a:link 所有未选过的链接
a:visited 选择所有已访问的链接
a:hover 位于其上的链接
a:active 活动链接(鼠标按下未弹起的链接)
按顺序声明才可生效
先写一个a{}
focus伪类:
选择表单元素
Input:focus