Styling Our Content

造型简介

在过去的几周里，我们讨论了如何在网页上获取您需要的所有信息。但是，如果您一直在跟踪并编写代码，您可能会注意到您的页面看起来不太吸引人。事实上，他们甚至可能看起来很糟糕……

到目前为止，我们还没有向我们的网页添加任何样式。样式是我们为浏览器提供的规则，告诉它我们希望 HTML 元素在页面上的外观。我们可以更改大小、字体、颜色、位置、对齐方式和许多其他内容！但如何呢？

添加我们的第一个样式

<p style="color: blue;">This text is blue now!</p>

登录后复制

就是这样！如果您好奇，请将其复制并粘贴到文档中，然后在浏览器中打开它。你看到了什么？文字现在是蓝色的！不错！

那么，这是怎么回事？我们用段落元素包围文本内容，并为该段落元素赋予样式属性。请注意开头

中的 style=标签。在属性值中，我们将颜色样式指定为蓝色值：“color: blue;”。

现在，这很酷，但是如果我们想让文本在页面上居中怎么办？

<p style="color: blue; text-align: center;">This text is blue and centered!</p>

登录后复制

我们需要更改的只是 style 属性中的值！强大的！但是该值属性发生了什么？我们以前没有见过这种语法！这就是CSS！但是等等，如果我们正在编写 HTML，为什么它会在这里？

我们是！但 HTML 并不是为样式而设计的；它是为样式而设计的。它是为结构和语义而设计的（我们将在后面的文章中介绍）。如果我们想改变页面的外观，我们必须修改样式表。默认情况下，我们的浏览器决定如何使用所谓的“用户代理样式表”来解释 HTML 中的信息。到目前为止您所看到的字体大小和颜色都是基于此！当我们将 CSS 添加到 style 属性时，我们定义的样式将覆盖用户代理样式表，而我们未定义的任何样式将回退到该表。 CSS 代表级联样式表，这就是原因！

这太棒了。现在我们可以改变页面的外观，可能性是无限的。但想象一下，如果我们想要更多定制：

<h1 style="font-size: 36px; 
    font-weight: 500; 
    text-align: center;
    text-decoration: underline;
    padding-bottom: 16px;
    color: #b0b1b2;
    opacity: 0.7;">Welcome to My Website!</h1>
<p style="font-size: 16px;
    font-weight: 300;
    text-align: left;
    padding-left: 100px;
    background-color: yellow;">I hope you're having a great day!</p>

登录后复制

哇…只有两行文本就有很多代码…而且很难快速了解发生了什么！这是一个问题，因为如果您稍后尝试返回编辑此信息，那么您将花费比如下所示更长的时间：

<h1>Welcome to My Website</h1>
<p>I hope you're having a great day!</p>

登录后复制

我们该如何解决这个问题？

CSS 简介

为了防止 HTML 变得混乱，我们将所有样式移至 .css 文件中！对于小型项目，我们通常称之为 style.css。除了整理我们的代码之外，将样式移动到新文件中还实现了称为关注点分离的编程概念。这意味着我们希望我们的代码被分割成它的功能组件。我们的代码不应该尝试做所有事情，而应该分解成更小的部分，只做好一件事！

在此示例中，我们没有使用一个文件来构建内容并对其进行样式设置，而是使用两个文件：一个用于构建内容，另一个用于设置样式。忧虑分开！那么，这会是什么样子？

h1 {
  font-size: 36px; 
  font-weight: 500; 
  text-align: center;
  text-decoration: underline;
  padding-bottom: 16px;
  color: #b0b1b2;
  opacity: 0.7;
}

p {
  font-size: 16px;
  font-weight: 300;
  text-align: left;
  padding-left: 100px;
  background-color: yellow;
}

登录后复制

啊，好多了！现在，我们的 HTML 文件不再因所有这些样式而混乱！您在上面看到的是两个 CSS 规则集。规则集由一个选择器和两个大括号组成，其中包含有关如何设置选择器样式的所有信息。在此示例中，我们看到的两个选择器是 h1 和 p。这意味着此处列出的所有样式都将应用于任何 HTML

样式。或
分别为元素！

我们可以对任何类型的元素执行此操作！事实上，我们可以通过多种方式使用 CSS 选择器来选择对象，但我们将在另一周再讨论。现在，只要知道如果您输入元素类型，您就可以在大括号内添加样式！

我们定义了一些样式，但是我们如何确保我们的浏览器知道将它们应用到哪个文件？

链接元素

第一个我们将学习的元素是元素。它有一些用例，但出于我们的目的，我们将使用它将 style.css 链接到 index.html。换句话说，这个元素告诉我们的浏览器该页面使用哪个样式表。实际上，它看起来像这样：

<!DOCTYPE html>
<html>
  <head>
    <title>My Webpage</title>
    <link href="./style.css" rel="stylesheet"/>
  </head>
  <body>
    ...
  </body>
</html>

登录后复制

就是这样！我们的 style.css 链接到我们的 HTML 文档，并且样式将被应用。

让我们分解这个链接元素。首先，它是一个自关闭元素，因此我们不需要关闭标签，并且它内部不包含任何内容。该元素有两个必需的属性：href 和 rel。这些是必需的，因为元素将外部资源链接到 HTML 文档。因此，我们需要告诉浏览器 1）该资源在哪里以及 2）该资源的用途。 href 代表“超文本引用”，决定了位置，而 rel 或关系决定了用途！

需要注意的是，使用 href 属性时，您提供的路径可以是绝对路径，也可以是相对路径。这意味着您可以给出根目录中的文件路径的位置，例如 /Users/username/Documents/project/style.css （绝对）。或者您可以相对于您正在处理的文件的位置来执行此操作，如上所述。文件名前的 ./ 表示浏览器应在与 HTML 文件相同的文件夹（或目录）中查找 style.css。您还可以在此处添加 URL；许多内容交付网络允许您使用预制样式表，您可以使用来连接这些样式表。元素也是！