原文：Inline Style in HTML – CSS Inline Styles，作者：Joel Olawanle

级联样式表（CSS）是一种标记语言，可确定你的网页将如何显示。它管理网站元素的颜色、字体和布局，并允许你向页面添加效果或动画。

我们可以通过三种方式设置 HTML 文件/页面的样式：外部样式、内部样式和内联样式。在本文中，我们将专注于内联样式。

如何在 HTML 中使用内联样式

使用 style 属性，我们可以将样式应用于具有内联样式的单个 HTML 标记内的 HTML。

<h1 style="...">...</h1>

style 属性的工作方式与任何其他 HTML 属性相同。我们使用样式，后跟等号（=），然后是一个引号，其中所有样式值都将使用标准 CSS 属性-值对 - “property: value;” 来存储。

注意：只要我们用分号（;）分隔它们，我们就可以拥有任意数量的属性-值对。

值得注意的是，style 属性通常用在 HTML 开头标记中，因为它是 HTML 元素的一部分，可以包含文本、数据、图像或任何内容。内联样式的示例如下：

<h1 style="color: red; font-size: 40px;">Hello World</h1>

这与此类似：

h1 {
  color: red;
  font-size: 40px;
}

唯一的区别是内联样式仅适用于应用它的标签，而第二个代码示例会影响 html 页面上的所有 p 标签。

何时使用内联样式

但是，使用内联样式并不被认为是最佳实践，因为它会导致大量重复——因为这些样式不能在其他地方重用。

但有时内联样式是最好的（或唯一的）选择，例如在样式化 HTML 电子邮件、CMS 内容（如 WordPress、Drupal 等）时。你也可以在样式化动态内容时使用它们，动态内容由 HTML 创建或由 JavaScript 更改。

除了 !important 声明外，内联样式具有最高优先级，这意味着它们将覆盖内部和外部样式表中的大多数其他规则。

假设我们有两个段落文本，内联样式设置为 red，内部样式设置为 green：

<html>
  <head>
      <title>Hello World</title>
      <style>
       p {
           color: green;
       }
   </style>
  </head>
 
  <body>
     <p style="color: red;">Paragraph one is red.</p>
     <p style="color: red;">Paragraph two is also red.</p>
  </body>
</html>

我们的内联样式中的 CSS 将覆盖内部样式中的 CSS，因此两个段落都是 red。

内联样式的优缺点

到目前为止，我们已经了解了什么是内联样式以及如何在 HTML 标记中使用它。现在，让我们来看看它的优点和缺点，以确定什么时候应该使用内联样式，以及什么时候不应该使用它。

内联 CSS 的优点：

  • 内联优先于所有其他样式。内部和外部样式表中定义的任何样式都被内联样式覆盖。
  • 你可以快速轻松地将 CSS 规则插入 HTML 页面，这对于测试或预览更改以及在你的网站上执行快速修复非常有用。
  • 无需创建其他文件。
  • 要在 JavaScript 中应用样式，请使用 style 属性。

内联 CSS 的缺点：

  • 向每个 HTML 元素添加 CSS 规则需要时间，并且会使你的 HTML 结构变得杂乱无章，很难重用和扩展。
  • 设置多个元素的样式会影响页面的大小和下载时间。
  • 内联样式不能用于设置伪元素和伪类的样式。例如，你可以使用外部和内部样式表设置定位标记的已访问、悬停、活动和链接颜色的样式。

小结

在本文中，我们学习了如何在 HTML 中使用内联样式、何时使用它，以及这样做的一些优点和缺点。

由于内联样式优先于所有其他样式，因此使用它的最佳时机之一是在你的网站上测试或预览更改以及执行快速修复时。