概述

CSS 介绍

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现 HTML（标准通用标记语言的一个应用）或 XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS 不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

CSS 负责一个定义网页的样式部分，通过编写 CSS 样式，可以改变文字大小颜色背景，也可以改变元素的布局方式，还可以设置炫酷的动画效果等。

CSS 的代码可以放在 style 元素中，而 style 元素一般放在 head 元素中。

例：

<head>
  <style>
    p {
      color: red;
    }
  </style>
</head>

这段代码表示页面内所有的 p 元素字体颜色为红色，代码中的 p 表示选择所有的 p 元素， {} 内定义了这些被选中元素的样式，color:red 表示设置字体颜色为红色。

声明：在前一节的 CSS 代码中，color:red; 叫做声明，color 被称作属性，而 red 是该属性的值，属性和值之间使用 : 连接，一句声明的末尾使用 ; 结束。一句声明可以确定某种元素样式，比如字体加粗，斜体，元素的宽，元素的高等等。
声明块：{} 包裹的部分叫做 声明块，{} 内可以包含多个声明，一个声明块里的最后一句声明的 ; 可以省略。
选择器：最外面代码 p 的部分，叫做 选择器，用来确定这些样式被渲染到那些元素上。
注释：CSS 的注释使用 /**/ 来包裹，快捷键同 HTML 一样，也是【Ctrl + /】。
留白：CSS 代码也和 HTML 一样，留白对代码没有影响，可以任意缩进，或换行，添加多余的空格。

先了解两个简单的颜色属性：

颜色的值可以是一些单词，比如：blue red black white 等，也可以是一些抽象的数字或代码，后续我会介绍颜色值的编写方式，如果目前你觉得颜色太单调，可以把鼠标移动到设置的颜色上，vs code 有可视化的颜色选择。

<style>
  p {
    color: white;
    background-color: black;
  }
</style>
<p>黑底白字</p>

在 HTML 使用 style 元素的样式被称作内部样式表，就如同前面编写 CSS 的方式，style 元素可以放在任意位置，并不强制放到 head 元素中。

CSS 可以单独编写到文件中，后缀名为 .css，在 .css 文件中不用编写 style 元素，直接编写 CSS 样式即可，在当前文件夹新建一个文件 style.css，编写以下代码：

p {
  color: red;
}

然后在 HTML 文件中使用以下方式引入 CSS 文件：

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

rel="stylesheet" 表名被引入的文件是一个 CSS 文件。

CSS 代码还有一种粗暴的编写方式，直接编写在元素的 style 属性中，比如：

<p style="background-color: black; color:white ">黑底白字</p>

上述三种方式适用于不同的情况，比如外部样式表可以单独编写 css，那么可以多个网站共用同一套 css 代码，只需在自己的网站添加一个 link 元素即可。

内部样式表可以嵌入 HTML 中，相比外部样式表，不用产生格外的资源获取。

内联样式可以直接作用在元素上，简单粗暴，并且利于 JavaScript 修改。