02-CSS学习 | 青训营笔记

101 阅读2分钟

这是我参与「第四届青训营」笔记创作活动的的第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

参考资料

  1. CSS特征之一:层叠性 - 知乎 (zhihu.com)