HTML和CSS - 内联样式、外部样式表、CSS代码示例当你在学习网络开发时，你可能很快就会听到HTML和CSS。那么

当你在学习网络开发时，你可能很快就会听到HTML和CSS。那么，这些工具是什么，你如何使用它们？

你可以把HTML想象成一栋房子的结构和框架。而当你想让这个结构看起来不错时，你就会添加油漆、装饰和其他功能。这种装饰就是CSS。

如何给HTML代码定型？

HTML是超文本标记语言的缩写。它是一个基于文本的文档，旨在显示在浏览器中。为了使HTML中包含的文本和其他嵌入式元素看起来不错，你需要添加CSS，即层叠样式表。

有3种不同的方式可以为你的HTML设置样式：

内联样式。
内部样式（也称为嵌入式CSS），以及
外部样式表。

在本教程中，我们将尽可能深入地探讨这三种样式设计方法。我们还将研究它们的优点和缺点，以便你可以在你的编码项目中开始使用它们，并选择最适合你的方式。

HTML模板

为了使本教程更容易，我准备了一个简单的HTML模板，我们将对其进行样式设计：

<article>
    <p class="paragraph-one">
      freeCodeCamp is one of the best platforms to learn how to code
    </p>
    <p class="paragraph-two">
      Learning to code is free on freeCodeCamp, that's why they call it
      freeCodeCamp
    </p>
    <p class="paragraph-three">
      freeCodeCamp generates money through donations inorder to pay employees
      and maintain servers.
    </p>
    <p id="paragraph-four">
      If you're generous enough, consider joining others who have been
      donating to freeCodeCamp
    </p>
    <p class="paragraph-five">
      At freeCodeCamp, it's not all about typing on a code editor alone,
      there's a forum like StackOverflow, where you can ask questions about
      your coding problems and get answers from campers alike.
    </p>
</article>

HTML中的内联样式

当你使用内联样式时，你直接用样式属性将它们添加到HTML标签中。

例如，在我们的HTML代码中，我们可以通过在开头的标签中直接写上CSS来为任何一个段落指定颜色。

此外，典型的做法是删除分配给链接的默认下划线和颜色，所以我们也可以在开头的<a> 标签内这样做：

<article>
   <p
     class="paragraph-one"
     style="color: darkmagenta; font-size: 2rem; text-align: center"
   >
     <a href="freecodecamp.org" style="text-decoration: none; color: crimson"
       >freeCodeCamp</a
     >
     is one of the best platforms to learn how to code
   </p>
   <p class="paragraph-two">
     Learning to code is free on freeCodeCamp, that's why they call it
     freeCodeCamp
   </p>
   <p class="paragraph-three">
     freeCodeCamp generates money through donations inorder to pay employees
     and maintain servers.
   </p>
   <p id="paragraph-four">
     If you're generous enough, consider joining others who have been
     donating to freeCodeCamp
   </p>
   <p class="paragraph-five">
     At freeCodeCamp, it's not all about typing on a code editor alone,
     there's a forum like StackOverflow, where you can ask questions about
     your coding problems and get answers from campers alike.
   </p>
 </article>

你能看到现在第一段的可读性下降了吗？这就是使用内联样式的缺点之一，我们将在下面看到。

我们的网页现在看起来像下面的截图：

内联样式的优点

适合于快速修复。
采取最高的特殊性，所以它可以覆盖任何用内联样式或外部样式表设置的样式。
你不需要在文件之间切换或滚动到头部部分来修改CSS
浏览器总是在显示网页之前下载HTML、CSS和JavaScript文件，所以使用内联CSS，需要下载的文件更少。

内联样式的缺点

使得HTML变得混乱，更难维护，可读性更差。
不能在多个HTML文件中重复使用
你可能最终会覆盖内部样式或外部样式表。
你的样式选择有限

HTML中的内部样式

当你使用内部样式时，你把样式嵌入到HTML文件的样式标签中。你通常把它们放在头部，但它在任何地方都可以使用，甚至在HTML标签的开头和结尾之外（但不要这样做，因为这是一个坏的做法）。

我们可以像这样给我们的HTML代码应用一些内部样式：

<style>
   * {
     padding: 0;
     margin: 0;
     box-sizing: border-box;
 }
 body {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100vh;
   }

 .paragraph-two {
     font-size: 1.5rem;
      }

 .paragraph-one a {
      text-decoration: none;
      color: crimson;
      font-size: 2rem;
      font-weight: bolder;
     }
 </style>
</head>
 <body>
 <article>
   <p class="paragraph-one">
     <a href="freecodecamp.org">freeCodeCamp</a>
     is one of the best platforms to learn how to code
   </p>
   <p class="paragraph-two">
     Learning to code is free on freeCodeCamp, that's why they call it
     freeCodeCamp
   </p>
   <p class="paragraph-three">
     freeCodeCamp generates money through donations inorder to pay employees
     and maintain servers.
  </p>
   <p id="paragraph-four">
     If you're generous enough, consider joining others who have been
     donating to freeCodeCamp
   </p>
   <p class="paragraph-five">
     At freeCodeCamp, it's not all about typing on a code editor alone,
     there's a forum like StackOverflow, where you can ask questions about
     your coding problems and get answers from campers alike.
   </p>
 </article>

你可以看到，当我们使用内部样式时，我们现在有更多的样式选择。

内部样式的优点

减少了浏览器需要下载的文件数量
不用在不同的文件之间切换来修改CSS
有更多的样式选择，因为你可以使用组合器、类选择器和ID选择器。

如果你想知道什么是组合器，它们是用来连接不同选择器的符号。一个例子是一个空格（），用于选择一个元素的下一个子代，比如任何一段（p ），在一个div 。

类选择器用点表示 (.)，id选择器用# 表示。

内部样式的缺点

它们不能在多个HTML文件中重复使用。要在另一个HTML文件中添加相同的样式，你需要在头部再次包含它
它增加了HTML文件的大小，这可能导致加载速度变慢。

我们的网页现在看起来像这样:

HTML中的外部样式表

这被认为是对你的HTML代码进行样式化的最佳方式。外部样式表是完全独立于HTML的，你把它们放在一个CSS文件中（扩展名是.css ）。

要在你的HTML中使用外部样式表，你要在标题中用link标签将它们连接起来。

链接标签的基本语法看起来像这样:

<link rel="stylesheet" href="path-to-css-file">

为了给我们的HTML代码添加样式，我们需要创建一个CSS文件并链接它。链接后，我们的完整HTML文件现在看起来像这样:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>How to Style HTML</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <article>
      <p class="paragraph-one">
        <a href="freecodecamp.org">freeCodeCamp</a>
        is one of the best platforms to learn how to code
      </p>
      <p class="paragraph-two">
        Learning to code is free on freeCodeCamp, that's why they call it
        freeCodeCamp
      </p>
      <p class="paragraph-three">
        freeCodeCamp generates money through donations inorder to pay employees
        and maintain servers.
      </p>
      <p id="paragraph-four">
        If you're generous enough, consider joining others who have been
        donating to freeCodeCamp
      </p>
      <p class="paragraph-five">
        At freeCodeCamp, it's not all about typing on a code editor alone,
        there's a forum like StackOverflow, where you can ask questions about
        your coding problems and get answers from campers alike.
      </p>
    </article> 
</body>
</html>

你可能想知道为什么CSS文件的路径只有style.css ，这也是文件名。这是因为HTML和CSS文件是在同一个目录下。如果你把样式表放在另一个文件夹里，你必须在文件名前加上文件夹的名称。

让我们在外部样式表中为我们的HTML应用一些样式:

外部样式表的优点

使得样式可以在多个HTML文件中重复使用
它更容易维护
浏览器在初次加载时对其进行了缓存，使得后续页面的渲染更容易，耗时更少。
它可以被托管在CDN上，因此带宽变得最小，并且可以很容易地在世界不同地区传输。

外部样式表的缺点

它增加了浏览器需要下载的文件数量
浏览器必须对每个文件进行额外的HTTP请求。

总结

我希望本教程能帮助你了解到各种可以为你的HTML设置样式的方法。

现在你也知道了每种方法的优点和缺点，所以你可以选择最适合你的方法。

谢谢你的阅读，并继续编码。