堆栈内存溢出
  繁体   English   中英

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

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

 原文  2012-10-16 15:18:48  2   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