Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/html/73.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
为什么CSS没有链接到我的html?_Html_Css - Fatal编程技术网

为什么CSS没有链接到我的html?

为什么CSS没有链接到我的html?,html,css,Html,Css,我通常在Windows中使用Notepad++编写HTML和CSS(我是初学者)。不过,我也很喜欢使用Linux,也很喜欢在Ubuntu中工作。我在Ubuntu中使用BlueFish编辑器 我的问题是,在BlueFish中,当我输入简单的CSS样式并将它们链接到HTML文档并进入浏览器进行预览时,除了编写的HTML(段落、文本、图像等)之外,什么都没有 这就是我对HTML的理解:我只需要知道我的链接是否正确,如果正确,当我创建一个“style.css”文档时,它为什么不能正常工作 <!DO

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

每日新闻

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

我不知道这是否解决了问题,但您应该完成
ul
标记。改变

<ul id="nav

好的,我清理了一下你的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>
现在,如果style.css位于其自己的文件夹中,则应如下所示:

/
/css/styles.css
/index.html
在后一种情况下,链接标签将读取


我不太明白Bluefish会如何干扰未加载的CSS文件。如果您使用的是Chrome或IE,请按
F12
打开网络选项卡,打开开发者控制台,然后重新加载页面,查看style.css是否正确加载(如果调用正确,应返回200 OK或300 Not Modified代码)。您可以在Firefox中使用Firebug执行相同的操作

对于初学者来说,ocw.mit.edu是另一个很好的资源。我把这两个文件都放在桌面上一个名为“webpage”的文件夹中,但它不起作用……不,我只是尝试了一下。不过还是要谢谢你。在我看来,蓝鱼是一个很好的编辑,我真的希望不是编辑而是我,所以我很沮丧。所以这就是为什么我对什么是错的感到困惑…明白了!我大约一小时前解决了这个问题。我意识到我输入的是通用HTML(默认),所以我切换到HTML5,然后再次在浏览器中查看,它就可以工作了。我的主要问题是,我在css中的定位问题,我还没有理解。谢谢你的帮助。你会成功的…处理跨浏览器定位和其他问题是一件痛苦的事情。
/
/style.css
/index.html
/
/css/styles.css
/index.html