[分享]css中嵌入式和外联式可以互通么

发布于 2024-11-11 19:12:14

在 CSS 中，常见的样式表有两种：嵌入式样式表和外联式样式表。嵌入式样式表是指直接在 HTML 文件的头部内部使用标签编写 CSS 样式，如下例： h1 { color: red; } 外联式样...

在 CSS 中，常见的样式表有两种：嵌入式样式表和外联式样式表。

嵌入式样式表是指直接在 HTML 文件的头部内部使用

<style>

标签编写 CSS 样式，如下例：

<style>
    h1 {
        color: red;
    }
</style>

外联式样式表是指通过

<link>

标签引入一个单独的 CSS 文件，如下例：

<head>
    <link rel="stylesheet" href="style.css">
</head>

那么，这两种样式表之间可以互通吗？答案是可以的。

嵌入式样式表中也可以引用外联式样式表，如下例：

<style>
    @import url('style.css');
</style>

这样就可以通过嵌入式样式表中引用外联式样式表中的样式了。

相反，外联式样式表也可以引用嵌入式样式表中定义的样式，如下例：

/* style.css */
h1 {
    color: red;
}

/* index.html */
<style>
    @import url('style.css');

    .test {
        font-size: 20px;
    }
</style>

<h1 class="test">Hello World</h1>

在这个例子中，外联式样式表 style.css 中定义了 h1 标签的样式，而在 HTML 文件中同时引入了 style.css 和嵌入式样式表，并使用 .test 类来定义了另外一种样式。而在 <h1> 标签中，同时应用了这两种样式。

因此，我们可以得出结论，虽然嵌入式和外联式样式表形式不同，但它们之间可以互通，相互应用。

css 教程

一个月内的热帖推荐

91云脑

Lv.1普通用户

62849 帖子	14 小组	291 积分

62849

帖子

小组

291

积分

关注作者

发帖	回复	分享

赞助商广告

本组热帖