如何在 HTML 中添加 CSS？

层叠样式表，通常称为 CSS，为 Web 开发人员提供了一种根据自己的选择设计网页样式的方法。没有 CSS 中定义的任何样式格式的简单 HTML 页面对于最终用户来说会显得非常丑陋和无聊。因此，CSS 是现代网站的一个重要组成部分，它赋予网站美丽、有吸引力和吸引人的外观。传统上，CSS 只负责控制网站的外观和感觉。尽管如此，持续升级和新的 CSS 仍允许 Web 开发人员和设计人员控制网站对网页的响应能力，以便为笔记本电脑、平板电脑和移动设备屏幕提供独特的 UI。

由于 CSS 对于每个网站都是必需的，因此它必须灵活且易于根据设计者的要求进行定义。此外，由于 CSS 定义可能非常细粒度，因此必须可重复使用相同的样式格式才能一起应用于多个组件。幸运的是，CSS 的能力确实满足了这些要求。

在 HTML 中添加 CSS 的方法

您可以使用以下一个或所有选项将 CSS 添加到网页。现在，让我们详细探讨这三种方法。

1.内联 CSS

通过内联 CSS，HTML 设计者可以使用“style”属性在 HTML 元素的标签内定义样式信息。它确实有一些优点和缺点，稍后将通过几个例子进行讨论。内联CSS是应用CSS最基本的方法。此方法允许我们一次仅设置一个 HTML 元素的样式。它不提供任何样式可重用性。样式信息在 HTML 元素的开始标记中定义，并作为“style”属性的值提供。

在下面的示例中，我们使用内联 CSS 更改 h1、h6 和 p 元素的字体颜色。

代码：

<h1 id="I-am-a-Blue-H-heading">I am a Blue H1 heading</h1>
<h1 id="I-am-a-Blue-H-heading">I am a Blue H6 heading</h1>
<p style="color:blue;">I am a Blue Paragraph</p>

输出：

在上面的示例中，我们只想将 H1、H6 和 P 标签的字体颜色更改为蓝色。尽管想要应用相同的样式信息，但我们无法重复使用它，并且必须为每个元素单独定义三次。由于缺乏可重用性并且增加了时间消耗，网页设计者在设计具有多个页面的网站时不喜欢使用内联 CSS。此外，使用内联样式定义来制作移动响应式网站几乎是不可能的。

2.内部CSS

在Internal CSS中，HTML设计者可以在

现在让我们尝试使用内部 CSS 实现的相同示例。

代码：

.bluecolor {
color : blue ;
}


<h1 id="I-am-a-Blue-H-heading"> I am a Blue H1 heading </h1>
<h1 id="I-am-a-Blue-H-heading"> I am a Blue H6 heading </h1>
<p class=" bluecolor "> I am a Blue Paragraph </p>

输出：

如上例所示，我们必须声明一次样式信息，然后多次使用它。尽管内部 CSS 提供了很高程度的样式可重用性，但一个 HTML 文件中定义的 CSS 不能在另一个文件中使用。此外，在同一个文件中声明 CSS 和 HTML 可能会显着增加文件大小，并可能导致加载文件时出现延迟。

3.外部CSS

顾名思义，外部 CSS 可以通过在外部 CSS 文件中定义所有 CSS 信息来应用于网页，该外部 CSS 文件以扩展名 .css 保存，并可以使用 导入。 HTML 文件中需要应用样式的标记。外部CSS机制的建立是为了克服内部CSS和内联CSS的缺点。外部 CSS 需要 .css 文件来携带所有样式信息。然后，您可以将此文件链接到 HTML 文件，其中 HTML 元素引用链接的 CSS 文件中定义的 id 或类。

您可以借助 HTML 链接标签实现链接。让我们通过一个例子来理解这一点。我们将创建一个名为 mystyles 且扩展名为 .css 的 CSS 文件；该文件将联系以下数据：

代码：

.bluecolor{
color:blue;
}

Now we will add the below content in the HTML file:

<link rel="stylesheet" href="mystyles.css">


<h1 id="I-am-a-Blue-H-heading"> I am a Blue H1 heading </h1>
<h1 id="I-am-a-Blue-H-heading"> I am a Blue H6 heading </h1>
<p class=" bluecolor "> I am a Blue Paragraph </p>

The above code will produce the following output in the browser:

Output:

Conclusion

With the above examples, we can conclude that External CSS would be the most efficient way of implementing CSS in the website due to the highest degree of code reusability that it provides limited time consumption. Web designers use External CSS for building all professionally developed and popular themes available because it greatly enhances manageability and efficiency in web designing.

以上是如何在 HTML 中添加 CSS？的详细内容。更多信息请关注PHP中文网其他相关文章！