为什么CSS没有链接到我的HTML？

Question

I generally use Notepad++ in Windows to write HTML and CSS (I am a beginner). 我通常在Windows中使用Notepad ++编写HTML和CSS（我是初学者）。 However, I also like using Linux a lot and work in Ubuntu a lot. 但是，我也非常喜欢使用Linux，并且非常喜欢在Ubuntu中工作。 I use BlueFish editor in Ubuntu. 我在Ubuntu中使用BlueFish编辑器。

My problem is that in BlueFish when I put in simple CSS styles and link them to the HTML document and go into a browser to preview, there is nothing there besides the HTML that was written (paragraphs, text, images etc..) 我的问题是在BlueFish中，当我使用简单的CSS样式并将其链接到HTML文档并进入浏览器进行预览时，除了编写的HTML（段落，文本，图像等）之外，没有任何其他内容。

This is what I have for HTML: I just need to know if I'm linking correctly and if so, when I create a "style.css" document why it doesn't function properly. 这就是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>

* Also I started learning from Codeyear.com any other good resources out on the net for learning HTML CSS Javascript? * 另外，我也从Codeyear.com上开始从网上学习其他有用的资源来学习HTML CSS Javascript？

THANK YOU 谢谢

Answer 1

Ok, I cleaned up your HTML a bit. 好的，我整理了一下您的HTML。 Remember that your indentation should be consistent - your close tags should align with your open tags, etc. 请记住，您的缩进应该一致-关闭标签应与打开标签对齐，等等。

<!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>

As to why your CSS may not be showing up - remember that the CSS file must be correctly placed relative to the HTML page that is linking to it. 至于为什么CSS可能不会显示-请记住CSS文件必须相对于与其链接的HTML页面正确放置。 This is a mock directory structure, for example, based on your <link> tag in the above code: 这是一个模拟的目录结构，例如，基于上述代码中的<link>标记：

/
/style.css
/index.html

Now, if the style.css were in its own folder, it should be as follows: 现在，如果style.css位于其自己的文件夹中，则应如下所示：

/
/css/styles.css
/index.html

And in the latter case, the link tag would read <link rel="stylesheet" href="css/styles.css" type="text/css" /> 在后一种情况下，链接标记将显示为<link rel="stylesheet" href="css/styles.css" type="text/css" />

I don't quite see how Bluefish would be interfering with the CSS file not being loaded. 我不太了解Bluefish如何干扰未加载的CSS文件。 If you're using Chrome or IE, press F12 to bring up the developer console with the Network tab open and then reload the page and see that the style.css is being loaded correctly (should return a 200 OK or 300 Not Modified code if I recall correctly). 如果您使用的是Chrome或IE，请按F12键在打开“网络”标签的情况下调出开发人员控制台，然后重新加载页面，然后查看style.css是否正确加载（如果返回200 OK或300 Not Modified代码，我记得正确）。 You can perform the same operation in Firefox with Firebug. 您可以在带有Firebug的Firefox中执行相同的操作。

Answer 2

您的style.css文件需要与html文件位于Web服务器上的同一目录中。

Answer 3

I don't know if it's solve the problem or not but you should finish the ul tag. 我不知道它是否可以解决问题，但您应该完成ul标签。 Change 更改

<ul id="nav

to 至

<ul id="nav">

为什么CSS没有链接到我的HTML？

问题描述

3 个解决方案

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

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

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

为什么CSS没有链接到我的HTML？

问题描述

3 个解决方案

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

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

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

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

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

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