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

到目前为止，我们还没有向我们的网页添加任何样式。风格是我们为浏览器提供的规则，告诉它我们希望 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>

如何解决这个问题？

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

在这个例子中，我们没有使用一个文件来构建内容并设置样式，而是使用两个文件：一个用于构建内容，另一个用于设置样式。担心分开！那么，这可能是什么样子的呢？

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

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

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

元素！

我们可以执行任何类型的元素！事实上，我们可以以多种方式使用它们 CSS 选择器来选择对象，但我们将在另一周讨论。现在，如果您输入元素类型，您可以在大括号中添加样式！

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

我们要学的第一个

  
    <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！这是他们网站的链接。使用侧栏中“参考”下的属性列表，看看有什么可能！

下周见！

以上是设计我们内容的详细内容。请多关注其他相关文章！