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

KOHAI
307 阅读6分钟
原文链接： blog.gqxqd.cn

原文：css-tricks.com/css-basics-…

BY GEOFF GRAHAM ON FEBRUARY 14, 2018

CSS 是层叠样式表（Cascading Style Sheets）的缩写。

大多数关于 CSS 的讨论都是围绕着如何写样式以及层叠如何影响它们，但我们不会更多地讨论关于该语言的表（Sheet）部分。因此，让我们给那个孤独的第二个 “S” 一点聚光灯，以使当我们在说CSS样式表时明白那是什么。

表单（Sheet）包含样式

层叠描述了样式如何与另一个进行交互。样式组成了实际的代码。然后是包含这些代码的表单。就像我们写的一张纸一样，CSS 的 “表单” 是编写样式的文件。

如果我们要说明这一点，三种形式之间的关系是级联的：

img

一个HTML文档可以有多个样式表的多个样式相关联。这些表的组合以及确定哪些样式优先修饰哪些元素的计算过程称为层叠（CSS中的第一个 “C” ）。

一个表单（Sheet）是一个文件

表单（Sheet）非常特殊，它被赋予了自己的文件扩展名： .css 。你有能力自己创建这些文件。创建一个 CSS 文件可以在任何文本编辑器中完成。它们实际上是文本文件。不是富文本文档或 Word 文档，而是纯文本文本。

如果你在 Mac 上，那么你可以启动 TextEdit 来开始编写 CSS 。只要确保它处于“纯文本”模式。

img

如果你在 Windows 上，默认的记事本应用程序是等效的。你可以在任何纯文本编辑器中输入样式来编写CSS，即使这不是它所设计的。

无论您使用哪种工具，关键是将文档保存为 .css 文件。通常可以通过在保存时将其添加到文件名中来完成。以下是在 TextEdit 中的操作：

img

说真的，选择使用哪个文本编辑器来编写 CSS 完全取决于你。有很多可供选择的，这里有一些流行的：

你可能会遇到其中一个，因为他们使用起来比较便捷，比如代码语法高亮（给不同部分着色以帮助它更容易理解是什么）。

这是我用我的文本编辑器完全从头开始创建一些文件：

img

这些文件在任何网页浏览器中都是100％有效的，不管是新的还是旧的 我们确实刚刚建立了一个网站。

表单（Sheet）链接到 HTML

我们需要连接 HTML 和 CSS ，确保我们在样式表中写入的样式被加载到网页上。

一个没有CSS的网页相当简陋：

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

那是怎么发生的？如果您查看任何网页的顶部，将会有一个 <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>

该行告诉网络浏览器在读取此 HTML 文件时：

  1. 我想链接一个样式表
  2. 这就是它所在的位置

你可以用你想要的名字给你的样式表命名：

  • 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>

表单（Sheet）对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 -->

虽然这种方式可行，但这种方式有三个不好的地方：

  1. 如果您之后决定使用样式表，使用 HTML 中的样式覆盖内联样式非常困难。因为内联样式优先级高于样式表中的样式。
  2. 这种方式对样式的调整和 HTML 的阅读都非常不友好。
  3. 当我们在没有层叠或样式表的情况下写内联 CSS 时，有些奇怪。我们真正写的只是样式（只涉及 CSS 中的第二个 “S” ）。

还有就是在HTML中写CSS的第二种方式，这就是直接在<head>在一个<style>块：

<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的行为：

avatar
文章
阅读
粉丝