将样式表链接到 html 文档的问题答案

【问题标题】：Problems linking stylesheet to html doc将样式表链接到 html 文档的问题
【发布时间】：2012-07-16 22:14:21
【问题描述】：

我正在尝试自学 html/css。我无法让 Aptana 识别我的 CSS 样式表。

这是我的 html 文件 (index.html)：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Josh's Worthwhile Practice</title>
        <meta name="author" content="Joshua Soileau" />
        <link rel="stylesheet" href="style.css" type="text/css"/>
        <!-- Date: 2012-07-11 -->
    </head>
    <body>
        <div id="nav">
            <ul>
                <li><h4>Solutions</h4><p>what we do</p></li>
                <li><h4>Work</h4><p>what we've done</p></li>
                <li><h4>Team</h4><p>who we are</p></li>
                <li id="nav_logo">LOGO</li>
                <li><h4>Blog</h4><p>stuff we say</p></li>
                <li><h4>Contact</h4><p>talk to us</p></li>
                <li><h4>Client</h4><p>login</p></li>
            </ul>
        </div>
    </body>
</html>

这是我的 .css 文件（style.css，与 index.html 位于同一目录）

* {
    clear: both;
    padding: 0;
    margin: 0;
}

body {
    background-color: #eee;
    font-family: Arial, Helvetica, sans-serif;
}

#nav {
    color: #121415;
    width: 100%;
    height: 30px;
}

我的 html 代码中有链接标签：

<link rel="stylesheet" href="style.css" type="text/css"/>

但是当我在浏览器或 Aptana 预览窗格中打开 index.html 时，它只显示纯 html，而我的 css 没有被拉入。

我是否遗漏了一些明显的东西？

【问题讨论】：

标签： html css

【解决方案1】：

我找到了答案。我在文件中留下了一个空的 css 标签，而 Aptana 不喜欢它。这是我的错，因为我认为它不相关，所以我把它从这篇文章中删除了。

我有：

#nav li {}

很抱歉没有给你们提供所有信息，你们都非常有帮助，我帮助我学习了一些新东西。谢谢！

【讨论】：

请记住，如果您已经解决/回答了自己的问题，请接受它作为答案：Stack Overflow FAQ。

【解决方案2】：

尝试删除type="text/css" 属性。如果指定了 type 并且与文件返回的 Content-Type 标头不完全匹配，并且在本地加载文件时没有 Content-Type 标头，大多数现代浏览器都会抱怨。

【讨论】：

感谢您的回复。试过了，没有骰子。

【解决方案3】：

您的 style.css 文件必须与 index.html 位于同一位置才能正常工作。

预览时在浏览器的地址栏中看到什么？

如果将 index.html 替换为 style.css 会发生什么？你能看到 CSS 文件吗？

如果直接打开 index.html 文件，没有 Aptana 的预览是否可以工作？

同时打开 firebug 或开发者工具并点击网络选项卡以检查浏览器是否正在请求 CSS 文件以及是否报告了任何错误。还要检查响应标头。

您可能还想在生成预览后验证 Aptana 对您的源所做的操作。在预览浏览器中查看源代码是否会显示与样式表完全相同的链接/路径？

您是否有与此用户在 Aptana 预览中使用绝对路径的类似问题：Aptana Studio 3 preview problems with absolute path

【讨论】：

我的index.html和style.css在同一个目录下，把addr栏里的index.html换成style.css拉起样式表。 Firebug 没有显示任何错误，并且我的代码在 aptana 中验证良好，尽管我不知道网络选项卡是什么或如何检查浏览器是否正在请求 css 文件，因为我才刚刚开始： \
如果直接在浏览器中打开 index.html 文件，而不是用 apatan 的预览，它会起作用吗？
在萤火虫中，它是“网络”标签。
是的，我可以直接从finder中的文件夹打开它到chrome或firefox就可以了。它加载 html 没有任何问题。
@Josh：你的意思是，它会加载应用了样式的文件？

【解决方案4】：

我很确定 aptana 对文件和其他 html/css 标签有自动完成功能，所以试试

<link rel="stylesheet" href="

我相信，当您输入此内容时，应该会开始为您提供您文件夹中的所有文件的歇斯底里设置。如果它不尝试/ 之类的？

【讨论】：

【解决方案5】：

尝试将它放在一个文件夹中，例如 CSS

<link href="CSS/aki.css" rel="stylesheet"
    type="text/css" />

【讨论】：