爲什麼CSS沒有鏈接到我的html？

我一般在Windows中使用Notepad ++來編寫HTML和CSS（我是初學者）。不過，我也很喜歡使用Linux，並且在Ubuntu上工作很多。我在Ubuntu中使用BlueFish編輯器。爲什麼CSS沒有鏈接到我的html？

我的問題是，在BlueFish中，當我放入簡單的CSS樣式並將它們鏈接到HTML文檔並進入瀏覽器預覽時，除寫入的HTML（段落，文本，圖像等）

這就是我對HTML的看法：我只需要知道我是否正確鏈接，如果是這樣，當我創建一個「style.css」文檔時，爲什麼它不能正常工作。

<!DOCTYPE HTML> 
<!-- This is a mockup page --> 
<html> 
    <head> 

     <link rel="stylesheet" href="style.css" type="text/css"/> 
     <title>Daily News</title> 

    </head> 

    <body> 

    <ul id="nav 

     <li><a href="#" >Home</a></li> 
     <li><a href="#" >About</a></li> 
     <li><a href="#" >Services</a></li> 
     <li><a href="#" >Contact</a></li> 

    </ul> 

    <div id="p1"> 
    <h4>Coding is fun</h4> 
<p>Morbi posuere fermentum urna non iaculis. Vivamus posuere felis sed orci luctus vel tempor nunc ultrices. Sed accumsan mauris ac orci condimentum id posuere tellus tincidunt. Aliquam pellentesque tortor ac magna porttitor luctus. Fusce nec augue in est tempus mollis ac ut libero. Vestibulum eget mi eu orci vestibulum ullamcorper sed non ligula. Nulla facilisi. Sed consectetur, libero imperdiet condimentum mattis, nisl tortor fringilla tortor, in consequat erat libero eget diam. Ut tortor erat, tincidunt vel cursus ut, varius sit amet est. </p> 
    <h4>Open Source is for the better good</h4> 
<p>Morbi posuere fermentum urna non iaculis. Vivamus posuere felis sed orci luctus vel tempor nunc ultrices. Sed accumsan mauris ac orci condimentum id posuere tellus tincidunt. Aliquam pellentesque tortor ac magna porttitor luctus. Fusce nec augue in est tempus mollis ac ut libero. Vestibulum eget mi eu orci vestibulum ullamcorper sed non ligula. Nulla facilisi. Sed consectetur, libero imperdiet condimentum mattis, nisl tortor fringilla tortor, in consequat erat libero eget diam. Ut tortor erat, tincidunt vel cursus ut, varius sit amet est. </p> 
    <h4>Ubuntu 12.10 is coming out next week</h4> 
<p>Aenean commodo libero at purus varius at bibendum lacus gravida. Nullam sollicitudin, justo eget hendrerit pharetra, massa est ullamcorper sem, vitae commodo nulla risus eget tortor. Curabitur viverra hendrerit ornare. Donec eu nisl erat. Suspendisse sed bibendum metus. Praesent luctus euismod odio ut semper. Suspendisse molestie vulputate sapien eleifend hendrerit. Nullam gravida cursus mattis. </p> 

<div id="right_sidebar"></div> 
    </div> 
    <div id="footer"> 

<footer>Webpage designed by me</footer> 
    </div> 
</body> 

</html>

* 還有我開始學習Codeyear.com任何其他好的資源出的淨學習HTML CSS JavaScript的？

THANK YOU

來源

2012-10-16 ed-2012

ocw.mit.edu是開始編碼器的另一個很好的資源。 – 2012-10-16 16:44:02

你的style.css文件需要在web服務器作爲您的HTML文件放在同一目錄下。

來源

2012-10-16 15:21:23 Sparr

我把這兩個文件放在名爲「網頁」的桌面上的文件夾中，但它不起作用... – 2012-10-16 15:29:56

我不知道它是否解決了問題，但您應該完成ul標記。更改

<ul id="nav

到

<ul id="nav">

來源

2012-10-16 15:59:48 palacsint

不，我只是試過。但是，謝謝。我感到非常激動，因爲BlueFish在我看來是一個很好的編輯，我真的希望它不是編輯，而是我。所以這就是爲什麼我很困惑什麼是錯的... – 2012-10-16 16:02:27

好吧，我清理你的HTML一點。請記住，你的縮進應該是一致的 - 你關閉標籤應該打開的標籤對齊等

<!DOCTYPE HTML> 
<!-- This is a mockup page --> 
<html> 
    <head> 
     <link rel="stylesheet" href="style.css" type="text/css" /> 
     <title>Daily News</title> 
    </head> 

    <body> 
     <ul id="nav> 
      <li><a href="#" >Home</a></li> 
      <li><a href="#" >About</a></li> 
      <li><a href="#" >Services</a></li> 
      <li><a href="#" >Contact</a></li> 
     </ul> 

     <div id="p1"> 
      <h4>Coding is fun</h4> 
      <p>Morbi posuere fermentum urna non iaculis. Vivamus posuere felis sed orci luctus vel tempor nunc ultrices. Sed accumsan mauris ac orci condimentum id posuere tellus tincidunt. Aliquam pellentesque tortor ac magna porttitor luctus. Fusce nec augue in est tempus mollis ac ut libero. Vestibulum eget mi eu orci vestibulum ullamcorper sed non ligula. Nulla facilisi. Sed consectetur, libero imperdiet condimentum mattis, nisl tortor fringilla tortor, in consequat erat libero eget diam. Ut tortor erat, tincidunt vel cursus ut, varius sit amet est. </p> 

      <h4>Open Source is for the better good</h4> 
      <p>Morbi posuere fermentum urna non iaculis. Vivamus posuere felis sed orci luctus vel tempor nunc ultrices. Sed accumsan mauris ac orci condimentum id posuere tellus tincidunt. Aliquam pellentesque tortor ac magna porttitor luctus. Fusce nec augue in est tempus mollis ac ut libero. Vestibulum eget mi eu orci vestibulum ullamcorper sed non ligula. Nulla facilisi. Sed consectetur, libero imperdiet condimentum mattis, nisl tortor fringilla tortor, in consequat erat libero eget diam. Ut tortor erat, tincidunt vel cursus ut, varius sit amet est. </p> 

      <h4>Ubuntu 12.10 is coming out next week</h4> 
      <p>Aenean commodo libero at purus varius at bibendum lacus gravida. Nullam sollicitudin, justo eget hendrerit pharetra, massa est ullamcorper sem, vitae commodo nulla risus eget tortor. Curabitur viverra hendrerit ornare. Donec eu nisl erat. Suspendisse sed bibendum metus. Praesent luctus euismod odio ut semper. Suspendisse molestie vulputate sapien eleifend hendrerit. Nullam gravida cursus mattis. </p> 

      <div id="right_sidebar"></div> 
     </div> 

     <div id="footer"> 
      <footer>Webpage designed by me</footer> 
     </div> 
    </body> 
</html>

至於爲什麼你的CSS可能不會顯示出來 - 記住，CSS文件必須正確放置相對於鏈接到它的HTML頁面。這是一個模擬的目錄結構，例如，基於上面的代碼你<link>標籤：現在

/ 
/style.css 
/index.html

，如果style.css中都在它自己的文件夾，它應該是如下：

/ 
/css/styles.css 
/index.html

而在後一種情況下，鏈接標記會讀<link rel="stylesheet" href="css/styles.css" type="text/css" />

我不太瞭解如何鯥將與沒有被加載CSS文件被幹擾。如果您使用的是Chrome或IE，請按F12打開開發者控制檯並打開Network選項卡，然後重新加載頁面，並看到正在正確加載style.css（如果返回200 OK或300 Not Modified代碼，則返回if我記得沒錯）。您可以使用Firebug在Firefox中執行相同的操作。

來源

2012-10-16 16:53:54 jsanc623

有你！我在一個小時前解決了這個問題。我意識到我在輸入通用HTML（默認），所以我切換到HTML5，然後再次在瀏覽器中查看，它的工作原理。我的主要問題是我在CSS中定位事物有問題，我還沒有理解。不過謝謝你的幫忙。 – 2012-10-16 16:56:30

你會到那裏......處理跨瀏覽器定位和其他問題是一個痛苦。 – jsanc623

爲什麼CSS沒有鏈接到我的html？

回答

相關問題