这是我参与「第四届青训营」笔记创作活动的的第3天。
1 关于CSS
CSS(层叠样式表)在前端开发中用于同时控制多重页面的样式和布局,也极大地提高了开发效率。
2 怎么开启CSS之旅
在书写CSS代码之前,我们需要先有一个style标签
<style>
选择器{
CSS属性名: 属性参数; (注意:每一句结束后都有分号!)
}
</style>
CSS选择器
-
作用:
CSS通过选择器来选择html代码中的指定对象,以方便对其样式进行修改。
-
类别:
| 基本选择器 | 调用方式 |
|---|---|
| 标签选择器 | 标签名 |
| 类选择器 | .类名 |
| id选择器 | #id属性值 |
| 通配符选择器 | * |
| 复合选择器 | 基本选择器之间的分隔方式 | 特点 |
|---|---|---|
| 后代选择器 | 空格 | 后代 |
| 子代选择器 | > | 嫡长子 |
| 并集选择器 | , | 集体声明 |
| 交集选择器 | 无 (紧挨着) | 同时满足多个选择器的对象 |
| 伪类选择器 | :link,:visited,:hover,:active | 作用:添加特殊效果 |
CSS属性
| 常用的CSS属性 | 控制对象 |
|---|---|
| backgrond-color | 背景颜色 |
| color | 文字颜色 |
| font-size | 文字大小 |
| width | 宽度 |
| height | 高度 |
有了这些,开始写咱们的第一个css代码是不是就轻而易举了呢。
样式层叠问题
看到这里,你有没有想过——假如在对同一个对象重复定义了系统的属性,但属性值不同,最终的输出结果是什么样的呢?
答案是,以最后出现的样式为准。
CSS,全称层叠样式表,即各种样式是能够进行层层叠加覆盖的。这一特性一般表现在——
有多个选择器或一个选择器对某个或某几个标签中的多条样式进行选择,如果多个选择器都赋给某个或某几个标签相同属性,样式的作用范围发生了重叠。
当CSS的属性定义发生冲突时,自动服从基本选择器的优先级。其从低到高排序为:元素(标记)样式 < 类别(class)样式 < ID样式 < 行内样式 < !important。