Question

我正在导入样式表，我不知道它是我的浏览器（MacBook / safari）还是不导入正确的文件。

new.html

<!doctype html>

<head>
  <link rel="stylesheet" href="stylesheet.css" type="text/css" media="screen">
</head>

<body>
  <div class="new">

    hello
  </div>

</body>

</html>

stylesheet.css中

body {
  background-color: black;
}

.new {
  font-size: 42px;
}

Answer 1

您正在引用名为stylesheet.css的样式表。由于您未指定根相对（/）或文件夹相对（./）前缀，因此样式表必须与HTML文件位于同一文件夹中。

因此，这个问题只有四个可能的原因：

您的CSS文件未被称为stylesheet.css
您的CSS文件与HTML文件不在同一文件夹中
您实际上上传您的CSS文件到服务器
一切正常，你根本没有意识到，因为你已经缓存了文件

要确保您没有缓存文件，您可以：

使用 CTRL执行DOM刷新 + F5
使用 SHIFT执行CSS刷新 + R

此外，您错过了开放式<html>标记，该标记可能导致样式表无法加载，但您的解析器几乎肯定会自动为您注入此标记。

听起来你有以下结构：

ROOT
- 索引
  - 的index.html
- 风格
  - stylesheet.css中

正如您所说的CSS文件位于名为style的文件夹index的兄弟文件夹中，您需要做的是使用{向上导航一个文件夹{1}}然后明确引用../文件夹：

style

这表明索引文件应该在文件<link rel="stylesheet" href="../style/stylesheet.css" type="text/css" media="screen">的文件夹style（相对于自身）中查找。

您可以在 CSS Tricks 了解有关文件路径横向的更多信息。

希望这有帮助！

Answer 2

引用CSS文件时，如果它与HTML文件位于不同的文件夹中，则<link ...标记需要包含此CSS文件的正确路径。否则，只是说stylesheet.css假设它们都在同一个文件夹中。

在你的情况下，你的目录结构是（如果我误解了，请纠正我）：

- index
  -- new.html
- style
  -- stylesheet.css

因此，您的<link>代码应为：

<link rel="stylesheet" href="../style/stylesheet.css" type="text/css" media="screen">

../style/stylesheet.css表示：

从当前（index）
转到名为style
找到名为stylesheet.css

无法导入CSS文件

new.html

stylesheet.css中

2 个答案: