2012-02-28 156 views
8

我完全難住爲什麼這不起作用。看起來HTML文件由於某種原因無法加載CSS,即使它們都在同一個目錄中。任何想法可能是什麼問題?HTML未加載CSS文件

的index.html

<!DOCTYPE html> 
<html> 
<head> 
<title>Home Page</title> 
<link rel="stylesheet" href="style.css" media="screen" /> 
<meta name="viewport" content="width=1100"> 
</head> 
<body> 
<div id="main"> Hello </div> 
</body> 
</html> 

的style.css

body{ 
    background-color: #F9F9F9; 
    background-image: url(images/bg3.png); 
    background-position: center top; 
    background-repeat: repeat; 
    text-shadow: #FFFFFF 0px 1px 0px; 
    font-family: "Georgia", "Times", serif; 
    -webkit-font-smoothing: antialiased; 
} 

a{ 
    text-decoration: none; 
} 

#main{ 
    margin: 50px auto 50px auto; 
    width: 1000px; 
    min-height: 500px; 
    padding: 0px 20px 0px 20px; 
} 

以上不起作用。 index.html中添加CSS內聯工作正常,雖然

<!DOCTYPE html> 
<html> 
<head> 
<title>Homepage</title> 
<style type="text/css" media="screen"> 
    body { 
     background-color: #F9F9F9; 
     background-image: url(images/bg3.png); 
     background-position: center top; 
     background-repeat: repeat; 
     text-shadow: #FFFFFF 0px 1px 0px; 
     font-family: "Georgia", "Times", serif; 
     -webkit-font-smoothing: antialiased; 
    } 
    a { 
     text-decoration: none; 
    } 
    #main { 
     margin: 50px auto 50px auto; 
     width: 1000px; 
     min-height: 500px; 
     padding: 0px 20px 0px 20px; 
    } 
</style> 
<meta name="viewport" content="width=1100"> 
</head> 
<body> 
    <div id="main"> Hello </div> 
</body> 
</html> 
+0

是在同一目錄下兩個文件?您是否可以通過簡單地更改文件名來訪問這兩個文件(例如http://example.com/index.html - > http://example.com/style.css)?你嘗試過一個絕對路徑('/ style.css')嗎? – Zeta

+0

您正在使用哪種瀏覽器?你是否已經檢查過style.css文件的權限?你有沒有嘗試驗證CSS來檢查解析問題? – fcalderan

+1

如果F12開發者工具仍然失敗,請添加一個type =「text/css」,看看網絡監視器,它是否需要.css url?這是200好嗎? –

回答

12

添加

type="text/css" 

你的鏈接標籤

雖然這可能不再是在現代瀏覽器所必需的HTML4 specification宣佈這個要求屬性。

類型=內容類型[CI]

該屬性指定的元素的 內容的樣式表語言和覆蓋默認的樣式表語言。 表單語言被指定爲內容類型(例如「text/css」)。 作者必須爲此屬性提供一個值;此屬性沒有默認值 值。

+0

樣板(h5bp)不使用該屬性,它也可以正常工作。 – fcalderan

+0

type =「text/css」是默認值。它不需要添加它。 –

+0

HTML4 [link](http://www.w3.org/TR/html4/present/styles.html#h-14.2.3)中的type屬性是非可選的,因此一些瀏覽器可能會將其視爲這樣。 –

2

你可以試試這個:

<link href="style.css" rel="stylesheet" type="text/css" media="screen, projection"/> 

確保瀏覽器實際上使請求,並在同一目錄不返回404

+0

rel =「stylesheet」爲我工作! –

+0

type =「text/css」爲我工作 –

5

檢查這兩個文件 然後試試這個

<link href="style.css" rel="stylesheet" type="text/css"/> 
+1

謝謝你,rel =「stylesheet」對我來說是一個問題,我錯過了它hhh –

2

正如你所說你的兩個文件都在同一個目錄。 1. index.html和2. style.css

我已經複製你的代碼並在我的本地機器上運行它的工作正常沒有問題。

據我你的瀏覽器不刷新該文件,因此您可以刷新/按CTRL + F5在MAC CMD +窗口R.

重新加載整個頁面

嘗試,如果仍然得到問題,那麼你可以測試它通過使用Firefox的firebug工具。

對於IE8和谷歌瀏覽器,你可以通過按F12來檢查它,你的開發者工具會彈出,你可以看到Html和CSS。

如果您有任何問題,請留下評論,以便我們爲您提供幫助。

3

您必須添加type="text/css"你也可以指定href="./style.css"其中.指定當前目錄

+0

我不知道爲什麼,但添加點幫助我。 –

0

用於加載.css文件它很簡單以下步驟。

<link rel="stylesheet" href="path_here.css">

注:1 - >不要忘記在rel屬性寫 「樣式」。 2 - >使用正確的路徑例如:d:\文件夾1 \ forlder2 \ folder3 \ file.css」

現在你在不斷的目錄,您可以準確路徑你提到加載.css文件

祺!穆罕默德·馬吉德。

-3

添加類型= 「文/ CSS」 它爲我工作。

+4

5年前,這個相同的答案已經提供了三次。這個答案提供了什麼額外的價值? – JJJ

1

我有同樣的問題(的Ubuntu 16.04,鯥編輯器,火狐,谷歌Chrome掙扎。

解決方案:清除br在Chrome中瀏覽數據「設置>高級設置>清除瀏覽數據」, 在Firefox中的「打開菜單圖像右上角工具欄」首選項'>高級「,在菜單中查找此圖像: 緩存Web內容單擊」立即清除「。 瀏覽器緩存的.css文件,如果它沒有改變,他們通常不會重新加載它。因此,當您更改.css文件時,請清除此Web緩存,並且它應該可以正常工作,除非您的.css文件中存在問題。 和平, 斯坦

2

使用HTML5所有你需要的是rel,甚至不是type

<link href="custom.css" rel="stylesheet"></link>