2017-08-08 91 views
0

我有以下的文件和目录结构CSS文件未加载

enter image description here

在practice.html我

<html> 
    <head> 
    <title>Practice</title> 
    <link type="text/css" rel="stylesheet" href="css/styles.css"/> 
    </head> 
    <body> 
     <p>Paragraph</p> 
     <h1>Heading</h1> 
    </body> 
</html> 

而在Styles.css中我有

p { 
    font-family: "Ubuntu", "Times New Roman", Times, serif; 
} 

h1 { 
    font-family: "Trebuchet MS", Helvetica, sans-serif; 
    color: red; 
} 

我一直在盯着这一段时间。我的浏览器都不使用CSS样式进行渲染。我怎样才能找出问题所在?我可以在Chrome中看到该css文件没有被加载,但我不知道为什么。

我是一个C++程序员,冒险进入Web的恐怖世界。谢谢。

enter image description here

+0

难道是你的adblocker吗? –

+0

在你的浏览器中,你可以通过按下“Ctrl + U”来查看页面源代码?点击链接到你的CSS文件,看它是否被加载。 –

+0

您是否在Chrome控制台中看到任何错误? – Nick

回答

0

这是一个真正的时间浪费。事实证明,我从macOS iBook复制的代码<link type="text/css" rel="stylesheet" href="css/styles.css"/>包含non-breaking whitespace的unicode字符,而不是标准空格字符。当我以十六进制模式查看它们时,它们是c2a0。用20代替这些修复了这个问题。

我觉得令人失望的是,Firefox和Chrome都没有报告在解析html的过程中出现任何问题。

另请注意,将代码粘贴到Stack Overflow似乎已将这些非破坏空间标准化为更常见的20空间,因此没有人能够重现我的问题。

1

没有什么是你的代码错误。每当你做这种简单的Web开发的东西,总是硬刷新你的Windows(在Windows上的Ctrl + F5,在Mac上的Opt + Cmd + E)。

我不能告诉你我认为自己做错事的次数只是为了意识到自己并不是很难提神,没有被改变。

+0

好想,虽然我不认为HTML会像这样被缓存。我们会看到我猜。在开发工具打开的情况下,Chrome的另一个好处是不会缓存。 – Don

0

我可能会推荐使用隐身编码,因此本地脚本加载速度会更快。

当您使用Chrome也着急刷新在同一时间(CTRL + SHIFT + R),所以你会看到被立即执行

古德勒克的变化!