CSS选择器
css
语法
selector {declaration1; declaration2; ...}
h1,h2,div {color: red, font-size: 18px}
css
书写方式
- 嵌入式:在
<head>
标签内使用<style>
标签 - 外链式:在
<head>
标签中使用<link>
标签引入 - 行内式:在每个标签的
style
属性中写css代码
css
基本选择器
- 通用选择器:
* {}
- 标签选择器:
h1,div {}
- 类选择器:
.class {}
id
选择器:#id {}
class
:类名。每个标签都可以设置的属性
id
:ID名。每个标签都可以设置的属性
css
复合选择器
- 多元素选择器:
h1,h2,h3,div {}
- 后代元素选择器:
.box h2 {}
- 子元素选择器:
a>b {}
- 相邻元素选择器:
a+b {}
css
伪类选择器
给超链接的不同状态设置样式!
状态 | 选择器 |
---|---|
正常状态 | :link |
访问过后状态 | :visited |
鼠标放上状态 | :hover |
激活状态 | :active |
伪类选择器的设置顺序:
Love Hate
css
属性选择器
选择器 | 含义 |
---|---|
[attr] | 包含 attr 属性 |
[attr=“val”] | attr=val |
[attr^=“val”] | 以 val 开头 |
[attr$=“val”] | 以 val 结尾 |
[attr*=“val”] | attr 值含有 val |
font[color^="re"]
:先找到 font 标签,再找出 color 属性
val不区分大小写
其他特征
- 选择器为
HTML
标签,具有分组、继承功能 css
语法不区分大小写css
中不能出现html
标签的关键字
CSS继承优先级
只有文本、字体样式属性可以被继承!
类型 | 权重 |
---|---|
标签 | 1 |
类 | 10 |
id | 100 |
行内式 | 1000 |
不管是基本选择器,还是复合选择器,权重加起来,值越大,优先级越高!
!important
- 提升属性的权重值,无限大!
- 是提升属性的权重,不是选择器的权重
- 不能提升继承属性的权重
div盒子模型
属性 | 含义 |
---|---|
width | 内容宽 |
height | 内宽高 |
padding | 内填充 |
border | 边框 |
margin | 外边距 |
padding
小属性
padding-top
:上padding-right
:右padding-botton
:下padding-left
:左
简写描述:
padding: 10px 20px 30px 40px
顺序为上、右、下、左
margin
小属性
margin-top
:上margin-right
:右margin-botton
:下margin-left
:左
简写描述:
margin: 10px 20px 30px 40px
顺序为上、右、下、左
竖直方向上的
margin
不会叠加,取较大的值
水平方向的值会叠加
border
小属性
border-top
:上边框线border-right
:右边框线border-botton
:下边框线border-left
:左边框线
简写描述:
border 粗细 线型 颜色;
boder 1px solid #f00;
solid
:实线
dshed
:虚线
CSS3结构伪类
选择器 | 说明 |
---|---|
E:first-child | 匹配第一个孩子 |
E:last-child | 匹配最后一个孩子 |
E:nth-child(n) | 第n个 |
E:nth-child(2n) | 第偶数个 |
E:nth-child(2n+1) | 第奇数个 |
E:only-child | 有且只有一个孩子 |
CSS3其他标签
标签 | 说明 | 举例 |
---|---|---|
text-shadow | 文本阴影 | text-shadow: 3px 4px 5px #f00; |
box-shadow | 盒子阴影 | box-shadow: 3px 3px 3px 3px insert red; |
border-radius | 圆角矩形 | border-radius: 10px / 20% |
rgba | 透明度 | rgba(255, 255, 255, 0.4) |
trabsition | 过度时间 | width: 2s, hight: 5s |