Question

我正在努力将我的html文件链接到我的css文件。当我在chrome浏览器中打开时，我只看到html。我已经使用绝对文件链接和亲戚，并有双重和三重检查我的文件位置。 index.html文件和style.css文件都在同一个文件夹中，并排，兄弟姐妹。

的index.html

<!DOCTYPE html>
<html>
<head>
        <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1 class="title">My App</h1>
    <div class="app">
        <div class="screenshot"> image</div>

        <div class="description"
            >This is some text on my webpage. This is some text on my webpage. This is some text on my webpage. This is some text on my webpage. This is some text on my webpage. This is some text on my webpage. This is some text on my webpage. This is some text on my webpage. This is some text on my webpage. This is some text on my webpage. </div>
    </div>
</body>
</html>

的style.css

*{
    outline: 1px soild red !important;
}
*{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}

.image {
    max-width: 460px;
}
.desription {
    max-width: 705px;
}

这些文件位于同一文件夹中。

我觉得我已经在这里阅读过这种性质的所有问题，似乎没有人和我有同样的问题。但如果我的代码在某个地方出错了，也许我只需要第二眼就能看到它。
我对此有些陌生，不能为我的生活弄明白。
谢谢你的帮助！

Answer 1

正如我在评论中所说，你不会“看到”CSS - 它只会影响你页面上的HTML。

你没有看到所有内容的红色轮廓的原因是你的CSS中有一个拼写错误：

*{
    outline: 1px soild red !important;
}

应该是

*{
    outline: 1px solid red !important;
}

编辑：一旦你做了这个改变，你可能需要做一个硬刷新才能清除CSS的缓存版本 - 在chrome中，你可以通过在新鲜时按住ctrl来完成这个，例如ctrl + f5。

Answer 2

您的link没问题。我在当地装了它。

由于*拼写错误，因此solid样式无法正常工作。 outline: 1px solid red !important;

下次使用chrome调试器来确保正在加载style.css，然后你可以知道其他地方有什么问题（比如你的css，在这种情况下）。如果没有正确加载，则会出现错误（如找不到style.css）。

Answer 3

在浏览器中打开开发人员工具，然后查看“网络”标签，查找style.css。

如何将我的HTML文件链接到我的CSS文件

3 个答案: