2017-08-08 122 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),所以你會看到被立即執行

古德勒克的變化!