这是我参与「第五届青训营」伴学笔记创作活动的第 2 天

本节课所学内容

什么是 CSS
CSS 工作方式和使用方式
CSS 选择器
CSS 常用样式

何为 CSS

CSS (Cascading Style Sheet 层叠样式表) 是用来定义网页页面中的样式，使页面整体更美观。如：

h1 {
    color: #fff;
    font-size: 14px;
}

通过以上设置使页面中的 h1 标签的内容文字颜色为白色，字体大小 14px。

CSS 工作方式和使用方式

工作方式

当浏览器接收到 HTML 文件后会进行解析，解析过程中遇到 CSS 会进行加载并解析，解析完毕后会根据解析结果将样式添加到 DOM 节点，最后由浏览器渲染出来。

使用方式

使用方式共有三种，分别是内联、外链、内嵌。

内联

<p style="color: #f60;font-size: 14px;"></p>

外链

<link rel="stylesheet" href="style.css">

内嵌

<style>
  p {
    color: #f60;
    font-size: 14px;
  }
</style>

选择器

CSS 中为了给不同的元素设置不同的样式，提供了多种选择器选中元素。

id 选择器：一般在页面中 id 选择器唯一

<p id="paragraph">一个段落</p>

#paragraph {
    color: #f60;
    font-size: 14px;
}

类选择器：通过 class 属性设置元素的类名

<p class="paragraph">一个段落</p>

.paragraph {
    color: #f60;
    font-size: 14px;
}

标签选择器：直接通过标签名设置样式，所有标签都会生效

<p>一个段落</p>

p {
    color: #f60;
    font-size: 14px;
}

属性选择器：通过选择标签的属性选择元素

<input disabled />

[disabled] {
    border: 1px solid #f60;
}

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

a:link {
  color: black;
}

a:visited {
  color: gray;
}

a:hover {
  color: orange;
}

a:active {
  color: red;
}

:focus {
  outline: 2px solid orange;
}

通配符选择器：所有元素都会被匹配

其他选择器

直接选择器

<!-- 匹配 div 元素，同时该元素包含 .light 类名 -->
div.light {
   background-color: #fff;
   color: #eee;
}

后代选择器

<!-- 匹配 div 元素下边的所有 p 元素 -->
div p {
    ...
}

亲子选择器

<!-- 匹配 div 元素下边的子元素 p，仅父子关系 -->
div > p {
    ...
}

兄弟选择器

<!-- 匹配 div 元素后边所有同级的兄弟元素 p -->
div ~ p {
    ...
}

相邻选择器

<!-- 匹配紧跟在 div 元素后边的 p -->
div + p {
    ...
}

选择器组：当某些元素或类名的样式相同时，可通过 , 间隔这些元素并设置样式
```
body, h1, h2, h3, h4, h5, h6 {
    margin: 0;
    padding: 0;
}
```

常用样式

文字相关

fon-size ：设置文字字体大小
font-family ：设置字体类型
font-weight ：设置字体粗细程度
color ：设置字体颜色
line-height ：设置行高
text-align ：设置文字对齐方式
spacing ：有 letter-spacing 和 word-spacing，分别设置文字的间隔和单词的间隔
text-indent ：设置文字缩进
text-decoration ：设置文字修饰，有 dashed、dotted、double、line-through 等
white-space ：设置文字换行

布局相关

width ：设置元素的内容宽度，取值为长度、百分数、auto，百分数相对于内容盒的宽度
height ：设置元素的内容高度，取值为长度、百分数、auto，百分数相对于内容盒的高度
padding ：指定元素四个方向的内边距
margin ：指定元素四个方向的外边距
border ：指定容器的边框样式，粗细、颜色、圆角等
box-sizing ：设置容器的类型，分为 content-box 和 border-box
overflow ：设置内容溢出的处理方式
display ：设置元素显示类型，分为 block、inline、inline-block、none、flex、float 等

样式优先级

当某个元素有多种不同的选择方式设置样式时，优先级高的选择方式会覆盖低优先级的样式。

权重

在css中，会根据选择器的 特殊性(权重) 来决定所定义的样式规则的次序，具有更特殊选择器的规则优先于一般选择器的规则。如果两个规则的特殊性相同，那么后定义的规则优先。

权重分为 4 个等级，每一个等级代表一类选择器，每个等级的值相加得出选择器的权重。

第一等级：代表内联样式，如 style=""，权值为 1000
第二等级：代表id选择器，如 #content，权值为 100
第三等级：代表 类、伪类 和 属性选择器，如 .content，权值为 10
第四等级：代表 标签选择器 和 伪元素选择器，如 div p，权值为 1
剩余其他的选择方式权值为 0

因此，选择器优先级顺序依次是：
行内样式（1000）> ID选择器（100）> 类选择器（10）> 标签选择器（1）> 通配符选择器（0）

总结

通过整节课的学习，学到了：

CSS 在开发过程中的使用方式（内联、外链、内嵌），以及它的工作方式（由浏览器加载并解析，完成后挂载到 DOM 节点上，最后由浏览器渲染出来）
CSS 常用的基本样式
CSS 样式的优先级

理解CSS｜青训营笔记