CSS 没有导入 HTML答案

【问题标题】：CSS Is Not Importing into HTMLCSS 没有导入 HTML
【发布时间】：2013-01-08 23:58:15
【问题描述】：

我一定很累。 CSS 没有导入 HTML。所有显示的是：测试测试测试（在不同的行）另外，在网格 CSS 中只有 920.gs：

<!DOCTYPE html>
<html>
        <head>
            <title>Some title</title>
        <link rel="stylesheet" type="text/css" href="/css/styles.css" />
    </head>
    <body>
        <div class="container_12" id="content">
            <div class="grid_3" id="leftside">
                <h1>Test</h1>
            </div>
            <div class="grid_6">
                <h1>Test</h1>
            </div>
            <div class="grid_3" id="rightside">
                <h1>Test</h1>
            </div>
        </div>
    </body>
</html>

添加 CSS：

@import url("http://fonts.googleapis.com/css?family=Days+One&effect=font-effect-fire-                         animation");
@import url("css/grid.css"")

body {
        background-attachment:fixed;
    background-repeat:no-repeat;
    background-color:#7FA8FF;
    background-position:top;
    background-image:url("../images/background.png");
    text-align: center; 
    font-family: 'Days One', sans-serif;
}

【问题讨论】：

可能是因为您在相对路径的开头使用“/”引用文件，这会将其转换为绝对路径。它可能正在搜索您的服务器根目录。检查 Chrome 开发工具是否有文件加载失败？

标签： html css background stylesheet grid-system

【解决方案1】：

尝试从 css 路径中删除前导斜杠：

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

这将假定您在 Web 应用程序的根目录中有一个 css 文件夹，与 HTML 页面处于同一级别。

【讨论】：

谢谢，这就是问题所在。感谢所有回复的人。
额外说明。您可以使用 ./ 表示同一目录：D

【解决方案2】：

@import 中的相对 URL 被解释为与导入样式表相关。现在，如果您显示的样式表是"/css/styles.css"，@import url("css/grid.css"")（不包括末尾的“”）会查找文件/css/css/grid.css，这可能不是您想要的。

只是猜测，但我认为是

@import url("grid.css")

你需要。

【讨论】：

【解决方案3】：

我也有类似的想法，即开头的“/”可能是像 duffymo 这样的问题。所以我建议使用

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

但除此之外，我还会从您的 css 文件中删除 include 语句，然后将其放在 main 中，例如：

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

可能是网格没有导入，因为您正在从 css/ 调用 css/grid.css 来制作 css/css/grid.css 但我可能是错的；不过试一试也无妨。

【讨论】：

【解决方案4】：

检查您是否可以下载您尝试导入的 CSS。

我无法获得以下 CSS

@import url("http://fonts.googleapis.com/css?family=Days+One&effect=font-effect-fire-animation");

【讨论】：