层叠样式表（CSS）是一种标记语言，决定了你的网页将如何出现。它管理你的网站元素的颜色、字体和布局，并允许你为你的网页添加效果或动画。
我们可以通过三种方式对HTML文件/页面进行样式设计：外部样式设计、内部样式设计和内联样式设计。在这篇文章中，我们将重点讨论内联样式。
如何在HTML中使用内联样式
使用样式属性，我们可以在单个HTML标签内使用内联样式为我们的HTML添加样式：
<h1 style="...">...</h1>
样式属性的工作方式与其他的HTML属性相同。我们使用style ，后面是等号（=），然后是一个引号，所有的样式值将使用标准的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中使用内联样式，何时使用，以及这样做的一些好处和坏处。
由于内联样式优先于所有其他样式，使用它的最佳时机之一是在测试或预览变化和对网站进行快速修复时。
