CSS基础笔记｜青训营笔记这是我参与「第五届青训营」伴学笔记创作活动的第 6 天，今天学习了 CSS 的基础知识，包

这是我参与「第五届青训营」伴学笔记创作活动的第 6 天，今天学习了 CSS 的基础知识，包括 CSS 的工作原理、页面中 CSS 的使用方法、如何调试 CSS 等。

CSS 概述

CSS 全称 Cascading Style Sheets，意为层叠样式表，用于定义页面元素的样式，比如字体、颜色、位置、大小等，还可以使用 CSS 为页面添加动画效果。

CSS 语法

常见的 CSS 语句由选择器 (Selector)和声明 (Declaration) 组成。其中声明由属性名 (Property) 以及属性值 (Value) 组成。

例如以下的 CSS 代码：

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

其中 h1 为选择器，选择器之后由花括号 {} 括起来的内容为一条条的声明，声明由分号 ; 结尾，冒号 : 前为属性名，冒号 : 后为属性值。例如第一条声明了 color 属性的值为 #fff，第二条声明了 font-size 的值为 14px。

在页面中使用 CSS

常见的在页面中使用 CSS 的方法有三种：分别是外链样式、嵌入样式和内联样式。

外链样式

外链样式将 CSS 代码写在外部 .css 文件中，在 HTML 文件里使用 <link> 标签引入外部的 .css 文件。例如：

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

嵌入样式

嵌入样式将 CSS 代码写在 HTML 文件的 <style> 标签内。例如：

<style>
    h1 {
        color: blue;
        background-color: yellow;
        border: 1px solid black;
    }

    p {
        color: red;
    }
</style>

内联样式

内联样式将 CSS 代码写在 HTML 元素的 style 属性内。例如：

<h1 style="color: blue;background-color: yellow;border: 1px solid black;">Hello World!</h1>

CSS 的工作原理

CSS 的工作过程如下：

载入 HTML 文件
将 HTML 文件转化成一个 DOM (Document Object Model)
解析 DOM 中的 CSS
添加样式到 DOM
显示页面

CSS 选择器

CSS 中的选择器 (Selector) 的作用是找出页面中的元素，并给他们设置样式。

类型选择器

直接使用标签名，可以选择指定名称的标签。

h1 { }

上述代码选择所有 <h1> 标签。

类 (Class) 选择器

使用 . 加上类名，可以选择 class 属性为某个值的标签。

.box { }

上述代码选择所有 class="box" 的标签。

ID 选择器

使用 # 加上ID，可以选择 id 属性为某个值的标签。

#unique { }

上述代码选择所有 id="unique" 的标签。

标签属性选择器

在选择器后加上 [] 可以选择具有某个属性的标签。

a[title] { }

上述代码选择所有具有 title 属性的 <a> 标签。

或者根据一个有特定值的标签属性是否存在来选择：

a[href="https://example.com"] { }

上述代码选择所有具有 href 属性且属性值为 https://example.com 的 <a> 标签。

伪类选择器

在选择器后加上 : 可以选择具有某个伪类的标签。伪类用于表示标签的不同状态。

a:hover { }

上述代码选择所有具有 hover 伪类（处于鼠标悬浮状态）的 <a> 标签。

CSS基础笔记 ｜ 青训营笔记