Question

我正在本地计算机上制作一个简单的html页面。我有两个文件-index.html和styles.css;两者都位于同一目录中。

file：/// D：/Programming/Playground/Canvas/index.html

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" src="file:///D:/Programming/Playground/Canvas/styles.css" type="text/css"/>
    </head>
    <body>
        Hello World
    </body>
</html>

file：/// D：/Programming/Playground/Canvas/styles.css

body {
  background: #222222;
  font-size: 50px;
}

我试图用Firefox，chrome和IE加载html文件-他们都没有加载css文件。尽管我已经确认可以手动导航到css文件，但它不会显示在firefox的“网络”选项卡下。控制台中没有其他错误。知道为什么这行不通吗？

我验证了两个文件都保存为UTF-8，并且还尝试了以管理员模式打开浏览器无济于事。

编辑：注意到我在Windows 10上。

Answer 1

答案很简单，这就是为什么它很容易被忽略的原因。 您的link标签需要一个href属性，而不需要一个src属性。（此外，您不需要type，尤其是在您需要重新使用似乎是的HTML5，并且您也不需要结束标记。）

<link href="file:///D:/Programming/Playground/Canvas/styles.css" rel="stylesheet">

请参见MDN for link attributes。

Answer 2

body {
  background: #222222;
  font-size: 50px;
}

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" src="styles.css" type="text/css"/>
    </head>
    <body>
        Hello World
    </body>
</html>

已编辑！这对我有用。

在简单的HTML页面中，本地css文件将不会加载带有相对，绝对或带有file：///前缀的绝对

2 个答案: