【问题标题】：html not linking to css file in Visual Studio Codehtml没有链接到Visual Studio Code中的css文件
【发布时间】：2018-02-11 17:16:52
【问题描述】：

环境

Windows 8.1 64 位
Visual Studio 代码 1.15.1

问题

html 没有链接到 css

css 中的类和 ID 不会显示在 html 中的 Intellisense 上。
当我将光标放在 html 中的类或 id 上并按 F12 跳转到 css 时，会弹出一个窗口并显示“未找到定义”。

但是，当我在浏览器中打开 html 时，网页显示得非常好。所以我的 Visual Studio Code 似乎有问题。

html

<!DOCTYPE html>
<html lang="en">

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

<body>
  <div class="abc"></div>
  <div id="xyz"></div>
</body>

</html>

css

.abc{
    width: 100px;
    height: 100px;
    background: red;
}

#xyz{
    width: 100px;
    height: 100px;
    background: blue;
}

文件

index.html
CSS
|
+---style.css

网页

我想知道如何解决这个问题。

编辑 17/9/3 19:03

谢谢你们的回答，伙计们。以下方法无效。

href="../css/style.css"
href="~/css/style.css"
href="css/style.css"
在标签中嵌入样式表（我想将 css 保存在单独的文件中）

【问题讨论】：

标签： html css windows visual-studio-code

【解决方案1】：

如果 html 和 css 在同一个目录中，它应该可以工作。怎么可能没有？好吧，如果预览在显示之前将 html 复制到临时目录，则 css 将不存在。这是我能想象到这个问题存在的唯一方法。

【讨论】：

【解决方案2】：

我不相信 Vscode 本身支持跳转到 css 类和 id。试试CSS Peek 扩展，它可以很好地满足您的需求。

【讨论】：

【解决方案3】：

确保您提供的访问 style.css 文件的路径正确。如果这不起作用，请尝试在 index.html 中添加内联 css：

<!DOCTYPE html>
<html lang="en">

<head>
<title>Test</title>
<style type="text/css" media="screen">
.abc{
     width: 100px;
     height: 100px;
     background: red;
    }

#xyz{
    width: 100px;
    height: 100px;
    background: blue;
    }
</style>
</head>

<body>
<div class="abc"></div>
<div id="xyz"></div>
</body>

</html>

这是另一种解决方案。

根据我的说法，您的浏览器没有刷新文件，因此您可以通过在 windows for mac 中按 CTRL + F5 来刷新/重新加载整个页面 CMD + R

如果还是有问题可以试试，可以用firefox的firebug工具测试一下。

对于 IE8 和谷歌浏览器，您可以按 F12 进行检查，您的开发者工具将弹出，您可以看到 Html 和 css。

你也可以试试这个语法：

<link href="./css/style.css" rel="stylesheet" type="text/css" media="screen, projection"/>

确保浏览器确实发出了请求并且没有返回 404。

希望对你有帮助！！

【讨论】：

也许 ./css 也应该是 ../css ？
取决于你在哪个目录。根据这一点，您应该能够生成相对路径。

环境

相关问题

问题

html 没有链接到 css

编辑 17/9/3 19:03