造型简介

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

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

添加我们的第一个样式

<p style="color: blue;">此文本现在是蓝色的！</p>

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

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

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

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

<p style="color: blue; text-align: center;">此文本为蓝色且居中！</p>

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

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

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

<h1 style="font-size: 36px; 
    字体粗细：500； 
    文本对齐：居中；
    文本装饰：下划线；
    底部填充：16px；
    颜色：#b0b1b2；
    不透明度：0.7；">欢迎来到我的网站！</h1>
<p style="字体大小: 16px;
    字体粗细：300；
    文本对齐：左对齐；
    左内边距：100px；
    背景颜色：黄色；">希望您今天过得愉快！</p>

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

<h1>欢迎来到我的网站</h1>
<p>祝您度过愉快的一天！</p>

我们如何解决这个问题？

CSS 简介

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

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

h1 {
  字体大小：36px； 
  字体粗细：500； 
  文本对齐：居中；
  文本装饰：下划线；
  底部填充：16px；
  颜色：#b0b1b2；
  不透明度：0.7；
}

p {
  字体大小：16px；
  字体粗细：300；
  文本对齐：左对齐；
  左内边距：100px；
  背景颜色：黄色；
}

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

或

元素！

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

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

链接元素

我们要学习的第一个

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

  
    <title>我的网页</title><link href="./style.css" rel="stylesheet">头&gt;
  
    ...
  正文&gt;

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

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

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

挑战

好了，今天我们已经讲了很多了。现在是时候付诸实践了。将您在上周的挑战中创建的“关于我”页面到一个名为 style.css 的新文件。 （确保将其放在与 HTML 文件相同的文件夹中！）

然后，为每个元素创建样式。尝试使用您可以分配的不同样式，直到您的“关于我”页面看起来更漂亮！ （注意：您还可以定位 和

元素！）

有关可以应用的样式的完整列表，请查看 Mozilla 开发者网络。他们托管 Web 开发语言的完整文档：HTML、CSS 和 JS！这是他们网站的链接。使用侧边栏中“参考”下的属性列表来看看有什么可能！

下周见！