Question

我正在为某项任务创建一个基于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。

Answer 1

@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>

@import在Chrome中出现问题，但未在实时预览

1 个答案: