CSS 基础：CSS 中的第二个“S”

CSS 是层叠样式表的缩写。

虽然网上（甚至是在 CSS-Tricks 上）关于 CSS 的大多数讨论都集中在编写样式以及级联如何影响它们，但我们没有过多讨论的是该语言的表部分。所以让我们让那个孤独的第二个“S”成为关注的焦点，并了解当我们说 CSS 是一个样式表时，我们是什么意思。

表包含样式

级联描述了样式如何相互作用。样式构成了实际的代码。然后是包含该代码的表。就像我们书写的一张纸一样，CSS 的“表”是编码样式的数字文件。

如果我们要说明这一点，三者之间的关系就形成了一种级联

可以有多个表，所有表都包含多个样式，所有样式都与一个 HTML 文档相关联。这些表的组合以及确定哪些样式优先于哪些元素的样式的过程称为级联（CSS 中的第一个“C”）。

表是一个数字文件

表是一个如此特殊的东西，以至于它被赋予了自己的文件扩展名：.css。您可以自己创建这些文件。创建 CSS 文件可以在任何文本编辑器中完成。它们实际上是文本文件。不是“富文本”文档或 Word 文档，而是普通的文本。

如果您使用的是 Mac，则可以启动 TextEdit 来开始编写 CSS。只要确保它是“纯文本”模式。

如果您使用的是 Windows，则默认的记事本应用程序是等效的。说实话，您几乎可以在任何纯文本编辑器中键入样式来编写 CSS，即使它不是它的设计用途。

无论您使用什么工具，关键是将您的文档保存为 .css 文件。这通常可以通过在保存时简单地将其添加到文件名来实现。以下是 TextEdit 中的显示方式

说真的，选择哪个文本编辑器来编写 CSS 完全取决于您。这里有很多很多可供选择，但以下是一些流行的选项

您可能会选择其中一个，因为它们会为您完成一些便捷的操作，例如语法高亮代码（对不同的部分进行着色，使其更容易理解各部分的作用）。

嘿，看看我用文本编辑器从头开始创建了一些文件

这些文件在任何新旧浏览器中都完全有效。我们实际上已经创建了一个网站。

表链接到 HTML

但是，我们需要连接 HTML 和 CSS。就像确保我们在表中编写的样式加载到网页上一样。

没有 CSS 的网页非常简陋

查看笔无样式网页 by Geoff Graham (@geoffgraham) on CodePen.

一旦我们链接了 CSS 文件，瞧！

查看笔带样式的网页 by Geoff Graham (@geoffgraham) on CodePen.

这是怎么发生的？如果您查看任何网页的顶部，都会有一个 <head> 标签，其中包含有关 HTML 文档的信息

<!DOCTYPE html>
<html>
	<head>
		<!-- a bunch of other stuff -->
	</head>

	<body>
		<!-- the page content -->
	</body>

</html>

即使 <head> 内部的代码看起来很奇怪，但也通常有一行（或者更多行，如果我们使用多个样式表）引用了该表。它看起来像这样

<head>
  <link rel="stylesheet" type="text/css" href="styles.css" />
</head>

这行告诉 Web 浏览器在读取此 HTML 文件时

我想链接一个样式表
它的位置是

您可以根据需要命名该表

styles.css
global.css
seriously-whatever-you-want.css

重要的是提供 CSS 文件的正确位置，无论它是在您的 Web 服务器上、CDN 上，还是其他任何服务器上。

以下是一些示例

<head>
  <!-- CSS on my server in the top level directory -->
  <link rel="stylesheet" type="text/css" href="styles.css">

  <!-- CSS on my server in another directory -->
  <link rel="stylesheet" type="text/css" href="/css/styles.css">

  <!-- CSS on another server -->
  <link rel="stylesheet" type="text/css" href="https://some-other-site/path/to/styles.css">
</head>

表对于 HTML 不是必需的

您在上面看到了一个简陋网页的示例。不需要任何网页使用样式表。

此外，我们可以在技术上使用 HTML style 属性直接在 HTML 中编写 CSS。这被称为内联样式，如果您想象一下正在查看 HTML 文件的代码，它看起来像这样

<h1 style="font-size: 24px; line-height: 36px; color: #333333">A Headline</h1>
<p style="font-size: 16px; line-height: 24px; color: #000000;">Some paragraph content.</p>
<!-- and so on -->

虽然这是可能的，但采用这种方式编写样式有三大弊端

如果您决定稍后使用样式表，则用表中的样式覆盖内联样式非常困难。内联样式优先于表中的样式。
如果您需要进行“快速”更改，则维护所有这些样式非常困难，而且它使 HTML 难以阅读。
在没有级联或表的情况下，说我们在内联编写 CSS 有点奇怪。我们真正写的是样式。

在 HTML 中编写 CSS 的第二种方法是在 <head> 中的 <style> 块中直接编写 CSS

<head>
	<style>
  	h1 {
  		color: #333;
  		font-size: 24px;
  		line-height: 36px;
  	}

  	p {
  		color: #000;
  		font-size: 16px;
  		line-height: 24px;
  	}
	</style>
</head>

这确实使 HTML 更易于阅读，比内联样式要好。但是，以这种方式管理所有样式很困难，因为必须在网站的每个页面上管理它，这意味着一次“快速”更改可能需要进行多次，具体取决于我们处理的页面数量。

通常，您最好使用一个外部表，它可以在 <head> 中调用一次。

表很重要

我希望到目前为止您已经开始了解表的意义。它是编写 CSS 的核心部分。没有它，样式将难以管理，HTML 将变得杂乱无章，并且级联至少在一个情况下将不存在。

表是 CSS 的核心组件。当然，它通常看起来像是在第一个“S”的衬托下，但这可能是因为我们所有人都对它的重要性有默契的理解。

升级

现在您已经了解了有关样式表的信息，这里提供更多资源供您深入了解 CSS 的行为

特异性详解 – 级联是一个令人困惑的概念，本文深入探讨了特异性的概念，这是一种管理级联的方法。
处理级联、继承和特异性的最新方法 – 这些词很多，但本文提供了有关如何管理级联的专业技巧，包括未来可能出现的一些想法。
使用 CSS 覆盖内联样式 – 这是一个老方法，但仍然很好。虽然这种技术可能不是当今的最佳实践，但它很好地说明了如何覆盖我们之前提到的那些内联样式。
何时使用 !important 是正确选择 – 本文是对上一篇关于为什么该方法可能不是最佳实践的文章的完美补充。

# 2018 年 2 月 14 日

使用外部样式表时需要注意的一点是，会对服务器进行额外的调用。这曾经是最佳实践（我认为现在对于代码组织仍然是最佳实践），但 Google 开始针对标准网站的“阻止渲染”样式表进行标记，鼓励使用混合模型，其中关键渲染 CSS 位于头部样式中，外部文件在后台延迟加载。然后，如果您正在开发 AMP 页面，您将对 CSS 有各种限制，并且所有 CSS 都位于头部……这让我怀疑在未来的几年里，第二个 s 是否会成为过去时代的遗物…… :(

Vagelis

您也可以包含有关使用 style.php 文件的提示，例如使用 php 变量作为页面主要内容的宽度。尤其是在涉及 CMS 时。

The Real Nirv

# 2018 年 2 月 15 日

很棒的文章！我会查看您在文章末尾提供的建议进一步阅读链接。

Joris

# 2018 年 2 月 16 日

使用 TextEdit（MacOS）时要小心，因为它会将直引号转换为智能（弯曲）引号，即使在“纯文本”模式下也是如此……除非您关闭导致这种恐怖现象的系统范围设置。
系统偏好设置 > 键盘 > 文本 > “使用智能引号和破折号”。

Bibiano Wenceslao

# 2018 年 2 月 17 日

Sublime Text 是一款很棒的编辑器，但如果您正在寻找免费的替代方案，我建议从 Notepad++ 开始。Atom 也不错。

非常喜欢这个系列！请继续发布。

表包含样式

表是一个数字文件

表链接到 HTML

表对于 HTML 不是必需的

表很重要

升级

评论