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 |
953
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
