【青训营】CSS（一）

What is it?

CSS即层叠样式表，我们可以通过以下方式来修改h1标题的颜色：

h1 {
  color: red;
}
复制代码

其中各部分名称为：

• h1 选择器 selector
• color 属性 property
• red 属性值 value
• color: 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树中的位置

伪类：不基于标签和属性定位元素，分为状态伪类和结构性伪类。

颜色

• 我们都很熟悉的RGB以及RGBA：

• 还有HSL和HSLA：

当然还有CSS自己的颜色关键字：