【青训营】CSS(一)

221 阅读2分钟

这是我参与2022首次更文挑战的第2天,活动详情查看:2022首次更文挑战

温故而知新,可以为师矣。

What is it?

image-20220119120619154

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结点生成渲染树展示页面。

image-20220119145826150

选择器 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:active
li:first-child
青训营/CSS/状态伪类
青训营/CSS/结构性伪类
组合article > p青训营/CSS/组合器
青训营/CSS/组合器2

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

image-20220119151847695

颜色

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

image-20220119152216988

image-20220119152257144

image-20220119152530091