CSS⚓︎

约 2209 个字 91 行代码预计阅读时间 9 分钟

引入

在我们学习了 HTML 之后，我们知道 HTML 负责定义网页的结构和内容。但是，仅仅有 HTML 的网页通常看起来比较朴素。CSS (Cascading Style Sheets, 层叠样式表 ) 就是用来为 HTML 文档添加样式（例如，字体、颜色、间距、布局等）的语言。通过 CSS，我们可以将网页内容和其表现形式分离，使得代码更易于维护和管理。

基础知识⚓︎

CSS 是什么？⚓︎

CSS 是一种样式表语言，用于描述 HTML 或 XML（包括如 SVG、MathML 等衍生技术）文档的呈现方式。CSS 描述了如何在屏幕、纸张、语音合成器或其他媒体上显示元素。也就是说，可以用于多种与网页外观和风格相关的用途，比如有文本样式、布局、动画等。

CSS 基础语法⚓︎

一个 CSS 规则集由一个选择器 (selector) 和一个声明块 (declaration block) 组成。

选择器 (Selector)：指向你想要设置样式的 HTML 元素；
声明块 (Declaration Block)：包含一条或多条用分号隔开的声明 (declaration)；
声明 (Declaration)：每条声明由一个 CSS 属性名 (property) 和一个值 (value) 组成，中间用冒号隔开，不同的 CSS 属性具有不同的允许值；

/* 这是一个 CSS 注释 */
selector {
  property1: value1; /* 声明 1 */
  property2: value2; /* 声明 2 */
}

例如，要将所有 <h1> 元素的文本颜色设置为红色，并且将字体大小设置为 2em：

h1 {
  color: red;
  font-size: 2em;
}

可以在 MDN CSS 参考中找到所有 CSS 属性页面（以及其他 CSS 功能）的链接。或者，每当需要查找有关 CSS 功能的更多信息时，应该习惯在常用的搜索引擎中搜索 “mdn css-feature-name”。例如，尝试搜索“mdn color”或“mdn font-size”！

如何将 CSS 应用到 HTML⚓︎

当导航到网页时，浏览器首先接收包含网页内容的 HTML 文档并将其转换为 DOM 树，DOM 称为文件对象模型（document object model），它是一个树形结构，HTML 中的每一个元素、属性以及每一段文字都对应着树中的一个节点。之后，网页中找到的任何 CSS 规则（无论是直接插入 HTML 还是引用的外部 .css 文件）都会根据它们将应用到的不同元素（由其选择器指定）分类到不同的“存储桶”中。然后，CSS 规则会应用于 DOM 树，生成渲染树，并最终绘制到浏览器窗口中。当浏览器遇到无法解析的 CSS 时会选择忽略这条规则，继续解析下一个样式。

有三种主要的方式可以将 CSS 应用到 HTML 文档中：

外部样式表 (External CSS)：这是最常用和推荐的方法。将 CSS 代码保存在一个单独的 .css 文件中，然后在 HTML 文档的 <head> 部分使用 <link> 元素引入，也就是 <link rel="stylesheet" href="styles.css">；
内部样式表 (Internal CSS)：将 CSS 代码直接写在 HTML 文档的 <head> 部分的 <style> 元素内；
内联样式 (Inline CSS)：将 CSS 规则直接应用到 HTML 元素的 style 属性中，并且优先级最高，可能会覆盖其他样式，也就是 <p style="color: orange; font-size: 20px;">这是一个内联样式的段落。</p> 这样子；

使用通用选择器⚓︎

改变元素默认行为⚓︎

比如说：

li {
  list-style-type: none;
}

上面的代码会将所有 <li> 元素的默认列表样式去掉。list-style-type 属性用于设置列表项标记的类型，none 表示不使用任何标记，我们也可以选择其他类型的标记，比如 square 等。

使用类名⚓︎

如果我们不希望每个相同的元素都具有相同的样式，我们可以给 HTML 元素加个类名（class），再选中那个类名，这样就可以了。我们来看个例子理解一下：

<p class="highlight">这是一个高亮段落。</p>

.highlight {
  background-color: yellow;
}

上面的代码中，我们给 <p> 元素添加了一个 class 属性，值为 highlight。在 CSS 中，我们使用 .highlight 选择器来选中这个类名，并设置它的背景颜色为黄色。这样，所有带有 highlight 类的段落都会被高亮显示，并且不只是段落，其他元素也可以使用这个类名来应用相同的样式。

按照我个人的感受而言，大概就像是给元素贴上了一个标签 (tag)，之后我们就可以通过这个标签来选中它们并设置样式。这样做的好处是，我们可以在多个元素之间共享相同的样式，而不需要为每个元素单独编写 CSS 规则。通过元素和类，我们就可以形成一个二维的表格，行是元素，列是类名。这样就可以很方便地组合确定出不同的样式。

我们也可以让选择器和类名结合起来使用，比如说：

p.highlight {
  background-color: yellow;
}

这个意思就是，选中每个 highlight 类的 p 元素，按照我上面的说法，这样子就相当于选中的了表格中的一格，而如果说单纯为元素或者类进行定义，那么就是表格中的一行或者一列都是这个样式。

那么如果我们想要多行、多列或者多格都应用这个样式呢，我们用逗号把它们并列起来就可以了，比如说：

p.highlight, div.highlight {
  background-color: yellow;
}

那么如果我们想要对某元素内部的几个元素选中怎么办呢，我们只要用空格就可以了，像下面这样：

li em {
  color: rebeccapurple;
}

上面的代码会选中所有在 li 元素内部的 em 元素，并将它们的颜色设置为 rebeccapurple。注意，这里 li 和 em 之间有一个空格，表示 em 是 li 的后代元素，无论是直接子元素还是更深层级的后代。和之前的选择方法还是具有比较明显的差异，可以看下面的文本来理解：

<ul>
  <li>这是列表项，<em>这里的 em 文本会被选中</em></li>
  <li>这是另一个列表项，<span>其中也可能<em>包含一个 em 文本被选中</em></span></li>
  <li class="em">这个 li 元素本身不会被这个规则选中，但如果它内部有 em 标签，那个 em 标签会被选中</li>
</ul>

此外，我们还可以使用 + 来选中紧接在某个元素后面的元素，比如说：

h2 + p {
  color: rebeccapurple;
}

上面的代码会选中紧接在 h2 元素后面的第一个 p 元素，并将它的颜色设置为 rebeccapurple。

我们也可以根据状态来确定样式，比如对链接的不同状态进行设置：

a:link { color: blue; } /* 未访问的链接 */
a:visited { color: purple; } /* 已访问的链接 */
a:hover { color: red; text-decoration: underline; } /* 鼠标悬停时的链接 */
a:active { color: orange; } /* 被激活（点击）时的链接 */

对于上述所说的几种选择方式，其选择器和选择符等都可以组合使用，包括 . 和 [u] 空格 [/u] 等符号，可以看一看下面例子：

body h1 + p .special {
  color: yellow;
  background-color: black;
  padding: 5px;
}

上面的代码会选中 body 元素内紧跟在 h1 元素后面的第一个 p 元素内的 class 为 special 的元素，并将它们的颜色设置为黄色，背景颜色设置为黑色，内边距设置为 5 像素。

一些其它 CSS 特性⚓︎

支持一些函数：
- calc()：它可以在 CSS 中执行简单的数学运算，比如 width: calc(100% - 20px);；
- transform()：它可以对元素进行旋转、缩放、倾斜等变换，比如 transform: rotate(45deg);；
@rules：它们用于定义 CSS 规则的特殊语法，比如 @media 用于响应式设计，@import 用于在 CSS 中导入其他样式表等；

@media 规则

@media (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

上面的代码会在浏览器窗口宽度小于等于 600 像素时，将 body 元素的背景颜色设置为浅蓝色。

简写属性：有些属性，例如 font、background、padding、border 和 margin 被称为简写属性，这是因为简写属性在一行中可以设置多个值，如下所示：

简写属性

/* 设置字体属性 */
font: italic small-caps bold 16px/1.5 "Helvetica Neue", sans-serif;
/* 等价于 */
font-style: italic;
font-variant: small-caps;
font-weight: bold;
font-size: 16px;
line-height: 1.5;
font-family: "Helvetica Neue", sans-serif;

/* 设置背景属性 */
background: url("image.jpg") no-repeat center center / cover;
/* 等价于 */
background-image: url("image.jpg");
background-repeat: no-repeat;
background-position: center center; /* 表示背景图片在水平和垂直方向上都居中 */
background-size: cover; 

/* 设置内边距属性 */
padding: 10px 20px 15px 5px; /* 上、右、下、左 */
/* 等价于 */
padding-top: 10px;
padding-right: 20px;
padding-bottom: 15px;
padding-left: 5px;

选择器 (Selectors)⚓︎

选择器是 CSS 的核心，它们用于“选择”要应用样式的 HTML 元素，上面我们已经对于其选择的方式有了一个大概的认识，下面我们来仔细了解了解。

基本选择器⚓︎

类型选择器 (Type selectors)：也称为元素选择器，选择指定类型的 HTML 元素；

h1 {
    font-family: Arial, sans-serif;
}
div {
    background-color: lightgray;
}

类选择器 (Class selectors)：选择具有特定 class 属性的元素，类选择器以一个点 ( . ) 开头；

<p class="highlight">这是一个高亮段落。</p>
<div class="highlight important">这是一个高亮且重要的 div。</div>

.highlight {
    background-color: yellow;
}
.important {
    font-weight: bold;
}

这样可以用于构建可复用的、模块化的样式组件。

如果我们希望不同元素对于同一类，有着不同的表达效果，我们就用 . 来组合他们，比如有 p.highlight 和 div.highlight，这样我们就可以在 CSS 中分别定义它们的样式了，便可以拥有不同的表达效果。

当然，我们也可以让一个 HTML 元素同时使用多个类：类选择器的书写中让多个类连成一串（不带空格），比如 .class_name1.class_name2，在 HTML 元素中 class 属性的值为 class_name1 class_name2。如果没有在 CSS 文件单独声明 .class_name1 或 .class_name2，则在 HTML 中不能单独使用这些类。

<p class="highlight important">这是一个高亮且重要的段落。</p>

.highlight.important {
    background-color: yellow;
    font-weight: bold;
}

注意 !

此文还没有写完 ...

参考资料⚓︎

MDN Web Docs - CSS

注意

需要注意的一点是，在本人学习过程中，发现 MDN Web Docs - CSS 的中文版和英文版有着较大的区别，建议阅读英文版。

评论区

有什么意见和想法，欢迎在评论区提出，也欢迎聊天哦~