↩ zhcn 编程语言 Web相关 JSON 非公開: HTML 参考 CSS（4 种方法）

HTML 参考 CSS（4 种方法）

为了使 CSS 样式真正有效，必须在 HTML 中引用它们。下面我们来介绍一下。

1. 嵌入样式表

您可以在 HTML head 的<style>标记（ <head>标记内）中定义 CSS 样式，在嵌入样式表中定义的 CSS 样式仅在当前网页中可用。示例代码如下：是的。 :

 
<!DOCTYPE html>
<html>
    <head>
        <title>IT基礎</title>
        <style>
            body {
                background-color: linen;
            }
            h1 {
                color: maroon;
                margin-left: 40px;
            }
        </style>
    </head>  
    <body>
        <h1>IT基礎</h1>
        <p>https://it-kiso.com/</p>
    </body>
</html>

执行时的效果如下图所示。

输出结果

插图：嵌入样式表

嵌入样式表要求在 HTML 文档中定义 CSS 样式，因此，如果您的文档不断增长并且其他文档也需要嵌入样式表中的相同样式，则您可以将它们导入到其他文档中，但不能。在其他文档中重新定义会导致代码冗余，对后期维护没有帮助。

2. 内联样式

内联样式直接在 HTML 标记的 style 属性中定义样式信息，但由于内联样式是在标记内定义的，因此只有放置它的标记才有效。示例代码如下。

 
<!DOCTYPE html>
<html>
    <head>
        <title>IT基礎</title>
    </head>  
    <body>
        <h1 style="color: maroon; margin-left: 40px">IT基礎</h1>
        <p style="color: blue;">https://it-kiso.com/</p>
    </body>
</html>

执行时的效果如下图所示。

内联样式

插图：内联样式

虽然内联样式可以很容易地为 HTML 标签赋予 CSS 样式，但它们的缺点也非常明显，因此我们建议谨慎使用它们。

定义内联样式需要为每个HTML标签定义一个样式属性，这很不方便。
在内联样式中使用双引号或单引号时要特别小心。这是因为 HTML 标记属性通常使用双引号来括住属性的值，例如<input type="text"> 。
使用内联样式定义的样式不能在其他地方重用。
内联样式对于后期维护非常不方便，因为网站通常由很多页面组成，如果要更改页面样式，则必须一一更改。
添加太多内联样式会增加 HTML 文档的大小。

3. 外部样式表

外部样式表是引用 CSS 的最常见和推荐的方法。只需在 .css 文件中定义 CSS 样式，然后使用 HTML <link>标记将 .css 样式文件应用到 HTML。文档。

下面通过一个具体的例子来演示如何使用外部样式表。首先，您需要定义一个.css格式的样式文件（例如style.css）：

 
body {
    background-color: linen;
}
h1 {
    color: maroon;
    margin-left: 40px;
}

然后将此 style.css 文件导入到您的 HTML 文档中，如下所示：

 
<!DOCTYPE html>
<html>
    <head>
        <title>IT基礎</title>
        <link rel="stylesheet" href="./style.css">
    </head>  
    <body>
        <h1>IT基礎</h1>
        <p>https://it-kiso.com/</p>
    </body>
</html>

执行时的效果如下图所示。

外部样式表

图：外部样式表

CSS样式定义在单独的.css文件中，因此可以跨多个页面引用，并且如果要更改网页的样式，只需要更改CSS样式文件即可，非常方便。

与使用<link>标签类似，您还可以使用@import引用外部样式表。使用@import引用外部样式表的语法是：

@导入“网址”；
还
@导入网址（“网址”）；

URL是外部样式表的保存路径。

如果你也使用上面定义的style.css样式表，通过@import引用HTML文档的代码如下：

 
<!DOCTYPE html>
<html>
    <head>
        <title>IT基礎</title>
        <style>
            @import url("./style.css");
            /*@import "./style.css";*/
        </style>
    </head>  
    <body>
        <h1>IT基礎</h1>
        <p>https://it-kiso.com/</p>
    </body>
</html>

执行时的效果如下图所示。

[标题id =“attachment_383”对齐=“alignnone”宽度=“1024”]

外部样式表[/标题]

图：导入样式表

使用@import引用 CSS 时需要记住一些事项。

在 HTML 文档中使用@import时，必须在@import <style>标记中定义它。如果<style>标签中有其他 CSS 样式，则必须在所有样式的开头定义@import 。
@import也可以用在.css格式文件中，但也必须在所有样式之前定义。
@import是 CSS2.1 中的新功能，较旧的浏览器版本可能不支持。
页面加载时， <link>标签引用的样式文件会与页面同时加载，而@import引用的样式文件会在页面加载后加载。如果@import引用的样式文件太大，加载时间过长，页面加载后样式会丢失，影响用户体验。

JSON

为了使 CSS 样式真正有效，必须在 HTML 中引用它们。下面我们来介绍一下。

1. 嵌入样式表

您可以在 HTML head 的<style>标记（ <head>标记内）中定义 CSS 样式，在嵌入样式表中定义的 CSS 样式仅在当前网页中可用。示例代码如下：是的。 :

 
<!DOCTYPE html>
<html>
    <head>
        <title>IT基礎</title>
        <style>
            body {
                background-color: linen;
            }
            h1 {
                color: maroon;
                margin-left: 40px;
            }
        </style>
    </head>  
    <body>
        <h1>IT基礎</h1>
        <p>https://it-kiso.com/</p>
    </body>
</html>

执行时的效果如下图所示。

输出结果

插图：嵌入样式表

嵌入样式表要求在 HTML 文档中定义 CSS 样式，因此，如果您的文档不断增长并且其他文档也需要嵌入样式表中的相同样式，则您可以将它们导入到其他文档中，但不能。在其他文档中重新定义会导致代码冗余，对后期维护没有帮助。

2. 内联样式

内联样式直接在 HTML 标记的 style 属性中定义样式信息，但由于内联样式是在标记内定义的，因此只有放置它的标记才有效。示例代码如下。

 
<!DOCTYPE html>
<html>
    <head>
        <title>IT基礎</title>
    </head>  
    <body>
        <h1 style="color: maroon; margin-left: 40px">IT基礎</h1>
        <p style="color: blue;">https://it-kiso.com/</p>
    </body>
</html>

执行时的效果如下图所示。

内联样式

插图：内联样式

虽然内联样式可以很容易地为 HTML 标签赋予 CSS 样式，但它们的缺点也非常明显，因此我们建议谨慎使用它们。

定义内联样式需要为每个HTML标签定义一个样式属性，这很不方便。
在内联样式中使用双引号或单引号时要特别小心。这是因为 HTML 标记属性通常使用双引号来括住属性的值，例如<input type="text"> 。
使用内联样式定义的样式不能在其他地方重用。
内联样式对于后期维护非常不方便，因为网站通常由很多页面组成，如果要更改页面样式，则必须一一更改。
添加太多内联样式会增加 HTML 文档的大小。

3. 外部样式表

外部样式表是引用 CSS 的最常见和推荐的方法。只需在 .css 文件中定义 CSS 样式，然后使用 HTML <link>标记将 .css 样式文件应用到 HTML。文档。

下面通过一个具体的例子来演示如何使用外部样式表。首先，您需要定义一个.css格式的样式文件（例如style.css）：

 
body {
    background-color: linen;
}
h1 {
    color: maroon;
    margin-left: 40px;
}

然后将此 style.css 文件导入到您的 HTML 文档中，如下所示：

 
<!DOCTYPE html>
<html>
    <head>
        <title>IT基礎</title>
        <link rel="stylesheet" href="./style.css">
    </head>  
    <body>
        <h1>IT基礎</h1>
        <p>https://it-kiso.com/</p>
    </body>
</html>

执行时的效果如下图所示。

外部样式表

图：外部样式表

CSS样式定义在单独的.css文件中，因此可以跨多个页面引用，并且如果要更改网页的样式，只需要更改CSS样式文件即可，非常方便。

与使用<link>标签类似，您还可以使用@import引用外部样式表。使用@import引用外部样式表的语法是：

@导入“网址”；
还
@导入网址（“网址”）；

URL是外部样式表的保存路径。

如果你也使用上面定义的style.css样式表，通过@import引用HTML文档的代码如下：

 
<!DOCTYPE html>
<html>
    <head>
        <title>IT基礎</title>
        <style>
            @import url("./style.css");
            /*@import "./style.css";*/
        </style>
    </head>  
    <body>
        <h1>IT基礎</h1>
        <p>https://it-kiso.com/</p>
    </body>
</html>

执行时的效果如下图所示。

[标题id =“attachment_383”对齐=“alignnone”宽度=“1024”]

外部样式表[/标题]

图：导入样式表

使用@import引用 CSS 时需要记住一些事项。

在 HTML 文档中使用@import时，必须在@import <style>标记中定义它。如果<style>标签中有其他 CSS 样式，则必须在所有样式的开头定义@import 。
@import也可以用在.css格式文件中，但也必须在所有样式之前定义。
@import是 CSS2.1 中的新功能，较旧的浏览器版本可能不支持。
页面加载时， <link>标签引用的样式文件会与页面同时加载，而@import引用的样式文件会在页面加载后加载。如果@import引用的样式文件太大，加载时间过长，页面加载后样式会丢失，影响用户体验。