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

原始的HTML显然是不够美观的，而要在HTML上添加许多样式，又会使得HTML变得臃肿而又不易于维护，于是，deng deng deng deng~ —— CSS闪亮登场了，就是它，为HTML披上了华丽的外衣！✨🎉🎉🎉

CSS自我介绍环节

什么是CSS

层叠样式表 (Cascading Style Sheets，缩写为 CSS），是一种样式表语言，用来描述 HTML 或 XML（包括如 SVG、MathML、XHTML 之类的 XML 分支语言）文档的呈现。CSS 描述了在屏幕、纸质、音频等其它媒体上的元素应该如何被渲染的问题。

CSS结构

CSS规则集

CSS整个结构称为 规则集（通常简称“规则”），由以下部分构成：

选择器（Selector）

声明（Declaration）

属性（Properties）

属性的值（Property value）：从指定属性的众多外观中选择一个值（我们除了 red 之外还有很多属性值可以用于 color ）。

CSS语法

每个规则集（除了选择器的部分）都应该包含在成对的大括号里（{}）。
在每个声明里要用冒号（:）将属性与属性值分隔开。
在每个规则集里要用分号（;）将各个声明分隔开。

常用的选择器类型：

选择器名称	选择的内容	示例
元素选择器（也称作标签或类型选择器）	所有指定 (该) 类型的 HTML 元素	`p` 选择 `<p>`
ID 选择器	具有特定 ID 的元素（单一 HTML 页面中，每个 ID 只对应一个元素，一个元素只对应一个 ID）	`#my-id` 选择 `<p id="my-id">` 或 `<a id="my-id">`
类选择器	具有特定类的元素（单一页面中，一个类可以有多个实例）	`.my-class` 选择 `<p class="my-class">` 和 `<a class="my-class">`
属性选择器	拥有特定属性的元素	`img[src]` 选择 `<img src="myimage.png">` 而不是 `<img>`
伪（Pseudo）类选择器	特定状态下的特定元素（比如鼠标指针悬停）	`a:hover` 仅在鼠标指针悬停在链接上时选择 `<a>`。