如何访问 HTML 中的 CSS 文件？

Question

我知道这是一个基本且直接的问题，但是似乎无法让我的 html 文件读取 css 文件并且背景图像不起作用。

这是我的 CSS:

body, html {
background-image: url(images/background.jpg);
width: 100%;}

这是我的 HTML:

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

文件树：

网络/ 静态的/ file.css/

网络/模板/ file.html

网络/图像/ image.css

Answer 1

CSS 可以很好地加载（假设 URL 到 file.html 是 /templates/file.html 并且您不只是将它用作服务器端模板用于不同的URL) 如果你的文件名正确（它是 file.css 而不是 style.css）。

width: 100% 应该应用并创建一个（短）水平滚动条，但不应该有任何其他效果。

图像无法加载，因为 URL 是 相对于样式表 并且 /static/images/background.jpg 不存在（根据您的目录结构） .

Answer 2

变化：<link rel="stylesheet" href="../static/style.css" />

至：<link rel="stylesheet" href="../static/file.css" />

您必须提供 CSS 文件的正确路径，在树中您将 css 文件命名为 'file.css' 而不是 'style.css'

Answer 3

在 CSS 文件中...

body, html {
background-image: url(../images/background.jpg);
width: 100%;}

../告诉路径备份出CSS文件所在的目录，然后寻找images 目录.

Answer 4

在此处尝试您的 css 文件：

body, html {
background-image: url('/web/images/background.jpg');
width: 100%;}

也可以这样使用csslink标签：

<link rel="stylesheet" href="/web/static/file.css" />

Answer 5

我建议您检查您用来命名文件的确切名称。

你用过file.css和image.css但你HTML是Style.css

<link rel="stylesheet" href="../static/style.css" />
尝试：

body, html { background-image: url('/web/images/background.jpg'); width: 100%;}

How to access to a CSS file in HTML?