如何在 HTML 中嵌入 CSS 样式？四个方法一次性告诉你

前端

2023-12-07 14:23:08

嵌入式 CSS：将样式直接融入 HTML

简介

作为前端开发人员，您一定对 HTML 和 CSS 十分熟悉。HTML 负责构建网页结构，而 CSS 则用于控制这些结构的外观。通常，我们会将 CSS 样式表作为单独文件，然后通过<link>标签将其链接到 HTML 页面。

然而，有时需要将 CSS 样式直接嵌入 HTML 页面中。这在需要快速应用样式或在页面头部添加少量样式时很有用。

嵌入 CSS 样式的方法

有四种方法可以将 CSS 样式嵌入 HTML 页面中：

1. 使用<style>标签

这是最常用也是最简单的方法。将 CSS 代码直接写在<style>标签内，并将该标签放置在<head>标签内。

<head>
<style>
body {
  background-color: #ffffff;
  color: #000000;
  font-family: Arial, Helvetica, sans-serif;
}
</style>
</head>

2. 使用 CSS 内联样式

这种方法允许您将 CSS 样式直接写在 HTML 元素的style属性中。

<body>
<h1 style="background-color: #ffffff; color: #000000; font-family: Arial, Helvetica, sans-serif;">This is a heading</h1>
<p style="background-color: #ffffff; color: #000000; font-family: Arial, Helvetica, sans-serif;">This is a paragraph.</p>
</body>

3. 使用 CSS 类

CSS 类是一种将 CSS 样式与 HTML 元素关联的方式。首先定义一个 CSS 类，然后将其应用到 HTML 元素。

<head>
<style>
.my-class {
  background-color: #ffffff;
  color: #000000;
  font-family: Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
<h1 class="my-class">This is a heading</h1>
<p class="my-class">This is a paragraph.</p>
</body>

4. 使用 CSS ID

CSS ID 是一种将 CSS 样式与单个 HTML 元素关联的方式。CSS ID 是唯一的，只能应用于一个 HTML 元素。

<head>
<style>
#my-id {
  background-color: #ffffff;
  color: #000000;
  font-family: Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
<h1 id="my-id">This is a heading</h1>
<p>This is a paragraph.</p>
</body>