堆棧內存溢出
  簡體   English   中英

為什么CSS沒有鏈接到我的HTML？

[英]Why is the CSS not linking to my html?

 原文  2012-10-16 15:18:48  1   3    html/ css

問題描述

我通常在Windows中使用Notepad ++編寫HTML和CSS（我是初學者）。 但是，我也非常喜歡使用Linux，並且非常喜歡在Ubuntu中工作。 我在Ubuntu中使用BlueFish編輯器。

我的問題是在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？

謝謝

3 個解決方案

解決方案1
 1  2012-10-16 16:53:54

好的，我整理了一下您的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" />

我不太了解Bluefish如何干擾未加載的CSS文件。 如果您使用的是Chrome或IE，請按F12鍵在打開“網絡”標簽的情況下調出開發人員控制台，然后重新加載頁面，然后查看style.css是否正確加載（如果返回200 OK或300 Not Modified代碼，我記得正確）。 您可以在帶有Firebug的Firefox中執行相同的操作。

解決方案2
 0  2012-10-16 15:21:23

您的style.css文件需要與html文件位於Web服務器上的同一目錄中。

解決方案3
 0  2012-10-16 15:59:48

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

<ul id="nav

至 

<ul id="nav">

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 為什么我的 HTML 和 CSS 中的某些項目沒有鏈接？ 為什么我的CSS文件沒有鏈接到我的HTML文件？ 為什么我的 CSS 文件沒有鏈接到我的 HTML 文件？ 為什么我的 html 文件沒有鏈接到我的 CSS 布局？ 為什么我的html鏈接到我的打印CSS樣式表？ 為什么我的 CSS 樣式表沒有鏈接到我的 HTML 文件？ 為什么我的 CSS 文件沒有鏈接到 VS Code 上的 HTML 文件？ 為什么我的 CSS 樣式表不再工作/鏈接到我的 HTML 文件？ 為什么我的 css 文件沒有與 django 中的 HTML 文件鏈接？ 我的 CSS 樣式表沒有鏈接到我的 html
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM