gpt4 book ai didi

html - Chrome 中的@import 出现问题但实时预览中没有

转载 作者:行者123 更新时间:2023-11-28 03:37:37 25 4
gpt4 key购买 nike

我正在为某项任务创建一个简单的基于 HTML/CSS 的网站,但我遇到了一个较小的问题。

我的 main.css 文件中有大约 500 行代码,阅读和滚动浏览变得越来越困难,所以我决定将它分成几个 .css 文件,并使用 @import 函数将它们全部链接到一个文件中。

现在,我的主文件夹中仍然有 main.css 文件,其中包含以下内容:

@import url('/css/first.css')
@import url('/css/second.css')
.
.
.
@import url('/css/last.css')

我使用 Brackets 作为编辑器,虽然一切都与 Brackets 实时预览完美配合,显然,当我通过 Chrome 手动运行页面时(通过双击 index.html), CSS 根本没有出现。

是的,/css/ 是包含所有其他 .css 文件的主文件夹内的文件夹。是的,来自 Brackets 的实时预览也使用 Chrome。

最佳答案

@import 规则可以调用多个样式文件。这些文件在需要时由浏览器或用户代理调用,例如HTML 标签调用 CSS。

试试下面的代码

@import url("../css/first.css");
@import url("../css/second.css");
@import url("../css/last.css");

或者您可以通过在标记之间的 html 中使用链接标记来添加您的 css

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link rel="stylesheet" href="../css/first.css" type="text/css" />
<link rel="stylesheet" href="../css/second.css" type="text/css" />
<link rel="stylesheet" href="../css/last.css" type="text/css" />
</head>

<body>
</body>
</html>

关于html - Chrome 中的@import 出现问题但实时预览中没有,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44384174/

25 4 0
文章推荐: javascript - Windows 侧边栏小工具 - 从 webhost 接收列表
文章推荐: javascript - 如何在