在 HTML 中插入 CSS 的方法有多少种?

htmlweb developmentfront end technology更新于 2025/3/29 19:24:17

CSS 是 层叠样式表 的缩写。它指定了 HTML 元素在屏幕、纸张或其他媒体上的显示方式。它可以同时控制多个网页的布局，从而节省时间和精力。它可用于各种样式设置，例如更改页面文本和背景的颜色、移除链接的下划线以及为图像、文本和其他 HTML 元素添加动画效果。

CSS 可以通过三种方式添加到 HTML。要设置页面上单个 HTML 元素的样式，我们可以在 style 属性中使用内联 CSS。我们可以通过在 HTML 文档的 head 部分添加 CSS 来包含内部样式表。我们还可以链接到包含除 HTML 之外的所有 CSS 的外部样式表。

内联 CSS: style 属性必须放置在 HTML 元素内。
内部 CSS: 要求将 <style> 元素放置在 HTML 文件的 head 部分内。
外部 CSS: 要求在 HTML 文件的 head 部分使用 <link> 元素。

在本文中，我们将详细讨论在 HTML 中插入 CSS 的三种方法。

内联 CSS

内联 CSS 允许我们将 CSS 添加到 HTML 中。要添加内联 CSS，我们必须在 HTML 元素的起始标签内使用 style 属性。语法如下:

<element_name style="CSS property: attribute_value">

内联 CSS，也称为"嵌入式样式表"，优先于针对相同元素的任何其他 CSS。但是，不建议使用内联样式，因为样式无法在其他地方复用，会导致大量重复。然而，有时它们是最佳(或唯一)选择，例如针对具有不同样式属性的单个元素时。

示例

在此示例中，我们将使用内联 CSS 设置 HTML 元素的样式。

<!DOCTYPE html>
<html>
<head>
    <title>An example of inline CSS</title>
</head>
<body>
    <div style="border:2px solid blue; width:230px; padding:5px">
        <p style="background-color:lightblue; color:navy; font-weight:bold">This is a paragraph styled using inline CSS</p>
    </div>
</body>
</html>

内部 CSS

内部 CSS 是最常用的 CSS 形式之一，用于更改、设置样式和修改单个网页的独特样式。可以通过在 HTML 网页的 <head> 部分中添加 <style> 元素来使用内部 CSS。CSS 属性和值仍然会设置，但不是直接放在 style 属性中，而是用括号括起来，并通过 CSS 选择器定义。它可以应用于整个网页，但不能应用于多个网页，并且我们可以在每个网页上使用相同的代码来设置多个网页的样式。

<!DOCTYPE html>
<html>
<head>
<style>
CSS selector {
   CSS property_name: attribute_value;
}
</style>
</head>

内部 CSS 被认为是一种比内联 CSS 更好的做法，因为它允许我们一次性设置多组元素的样式，而不必重复向元素添加相同的样式属性。

它也非常适合单页网站，因为它将 CSS 和 HTML 分成不同的部分，但同时将它们保留在同一个文档中。如果我们有一个多页网站，并且想要全面更改，则必须打开代表这些页面的每个 HTML 文件，并在每个 head 部分添加或更改内部 CSS。

示例

在此示例中，我们将使用内部 CSS 来设置 HTML 元素的样式。

<!DOCTYPE html>
<html>
<head>
    <title>An example of internal CSS</title>
    <style>
        body{
            background-color:lemonchiffon;
        }
        div{
            width:300px;
            background-color:sienna;
            margin:10px;
            padding:10px;
            border:5px solid wheat;
        }
        p{
            text-align:justify;
            color:white;
            font-size:18px;
        }
    </style>
</head>
<body>
    <div>
        <p>All the HTML elements including this paragraph have been styled using internal CSS.</p>
    </div>
</body>
</html>

外部 CSS

外部样式表被广泛认为是设置 HTML 代码样式的最有效方法。它们的格式与内部 CSS 类似，但它们并非包含在 <style> 标签中，也并非放置在 HTML 文件的 head 部分。相反，它们与 HTML 完全分离，必须放置在一个 CSS 文件(扩展名为 .css)中。我们只需在 head 部分添加指向此外部样式表的链接，即可在 HTML 代码中使用它。

<link rel="stylesheet" href="path_to_css-file">

与内联和内部样式表相比，外部 CSS 具有多种优势。

样式表更改会影响所有链接的页面。
我们可以创建样式类，然后将其应用于各种 HTML 元素。
所有网页均具有统一的外观和风格。
由于 CSS 文件只需下载一次并根据需要应用于每个相关页面，因此减少了加载时间。

示例

在此示例中，我们将使用外部 CSS 设置 HTML 元素的样式。

mystyle.css

 body{
            background-color:linen;
        }
        div{
            width:480px;
            background-color:powderblue;
            border:3px dashed midnightblue;
            padding:5px;
            margin:20px;
        }
        p{
            color:white;
            font-size:18px;
            font-weight:bold;
        }

index.html

<!DOCTYPE html>
<html>
<head>
    <title>An example of external CSS</title>
    <style>
       body{
            background-color:linen;
        }
        div{
            width:480px;
            background-color:powderblue;
            border:3px dashed midnightblue;
            padding:5px;
            margin:20px;
        }
        p{
            color:white;
            font-size:18px;
            font-weight:bold;
        }
   </style>
</head>
<body>
    <div>
        <p>External CSS has been used for styling this HTML document.</p>
    </div>
</body>
</html>