2017-03-13 124 views
1
<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="utf-8"> 
     <title>JavaScript Basics</title> 
     <link rel="stylesheet" href="style.css"> 
    </head> 
    <body> 
     <div class="container"> 
      <div class="header"> 
       <h1>JavaScript Basics</h1> 
      </div> 
    </body> 
</html> 





h1{ 
    color: green; 
} 

這裏是我的HTML和CSS。我在我的Mac上使用ATOM文本編輯器。每當我預覽HTML時,它都會以默認的黑色顯示JavaScript Basics,而不是從我的CSS中以綠色顯示。css和html沒有鏈接

+0

你確保你的CSS是在一個名爲'style.css'在**同一文件夾作爲**您的HTML文件的文件? –

+0

是的,是的,他們都在同一個文件夾。 –

+0

然後它聽起來像你有一個緩存問題。我會在這裏寫一個答案:) –

回答

0

試試這個傢伙!


`<link href='style.css' rel='stylesheet' type='text/css'> 
+0

它工作感謝Nica! –

+0

小東西哥們;) – Nica

0

問題是一個緩存問題。 CSS對於緩存可能有點奇怪,雖然經典組合CTRL + F5適用於圖像,但它不適用於CSS。處理CSS中緩存的更好的解決方案是在點擊刷新符號的同時按住SHIFT

很明顯,您可以在文件路徑中爲CSS引用添加反斜槓,或附加版本號,例如:<link rel="stylesheet" type="text/css" href="style.css?v2 />

這個版本號本質上並不意味着任何東西,但可以用來表示對CSS的更新,重要的是瀏覽器會認爲它是另一個文件(迫使它重新加載CSS)。

如果你有機會獲得像PHP後端語言,你也可以強制瀏覽器自動刷新CSS每次頁面加載PHP的時間,通過鏈接到CSS文件中附加一個時間戳,用是這樣的:

<link rel="stylesheet" type="text/css" href="style.css?<?php echo date('l jS \of F Y h:i:s A'); ?>" /> 

請記住,CSS可以「昂貴」,所以當你完成開發,你可能想,讓遊客通過在生產環境中:)

移除時間戳緩存希望這可以幫助! :)

+0

這有助於,再次感謝! –

+0

很高興聽到這個答案爲你解決了這個問題。請不要忘記通過點擊表決按鈕下方的灰色檢查標記解決方案是正確的 - 這會將其從「未答覆的問題」隊列中移除,並將問題授予問題提問者和問題答疑者。當然,在說,你沒有義務標記我的答案(或任何其他答案)是正確的,但它確實有助於保持事情順利進行:) –

+0

再次感謝! –