这是我参与2022首次更文挑战的第2天,活动详情查看:2022首次更文挑战。
温故而知新,可以为师矣。
What is it?
CSS即层叠样式表,我们可以通过以下方式来修改h1标题的颜色:
h1 {
color: red;
}
其中各部分名称为:
h1选择器 selectorcolor属性 propertyred属性值 valuecolor: red声明 declaration
Usage
在页面中使用CSS有三种方法,分别是:
- 外链,样式与内容分离
<link rel="stylesheet" href="/assets/style.css">
- 嵌入
<style>
p {
margin: 1em 0;
}
</style>
- 内联,一般情况不建议使用
<p style="margin: 1em 0">Example</p>
How to work?
不包含JS的大致工作流程如下,CSS解析后会添加样式到DOM结点生成渲染树展示页面。
选择器 Selector
顾名思义,选中要修改的元素,以便给它们设置样式。
有多种方式选择元素,也就是有多种类型的选择器:
- 按照标签名,类名或id
- 按照属性
- 按照DOM树中的位置
| 选择器类型 | Example | |
|---|---|---|
| 通配选择器 | * | 青训营/CSS/通配选择器 |
| 标签选择器 | h1 | 青训营/CSS/标签选择器 |
| ID选择器 | #logo | 青训营/CSS/ID选择器 |
| 类选择器 | .done | 青训营/CSS/类选择器 |
| 属性选择器 | [disabled] | 青训营/CSS/属性选择器 |
input[type="password"] | 青训营/CSS/属性选择器2 | |
a[href^="#"] 以#开头a[href$=".jpg"] 以.jpg结尾 | 青训营/CSS/属性选择器3 | |
| 伪类 | a:activeli:first-child | 青训营/CSS/状态伪类 青训营/CSS/结构性伪类 |
| 组合 | article > p | 青训营/CSS/组合器 青训营/CSS/组合器2 |
伪类:不基于标签和属性定位元素,分为状态伪类和结构性伪类。
颜色
- 当然还有CSS自己的颜色关键字: