Question

我通常在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吗？

谢谢你

Answer 1

好的，我稍微清理了你的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如果我没记错的话，不修改代码）。您可以使用Firebug在Firefox中执行相同的操作。

Answer 2

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

Answer 3

我不知道它是否解决了问题，但您应该完成ul标记。变化

<ul id="nav

到

<ul id="nav">

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

3 个答案: