为什么无法链接CSS文件？

Question

我一直在学习HTML5和CSS，直到现在我一直在HTML <head> <style> </style> <head>部分中进行样式设置。当我第一次尝试将样式从html文件移动到css文件时，但是我无法使用link。

我想要什么？我正在尝试将样式移动到.css文件中。

我尝试了什么？

我创建了一个新文件夹，并且在该文件夹中有一个新的.HTML file和一个新的.CSS file。我是using VScode。

我尝试将HTML和CSS粘贴到codepen中并渲染，因此我不确定<link>出了什么问题。

我的html文件如下：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title> Try this again</title>

        <link rel="Hope this works" href="newcssstyle.css" type="text/css">
    </head>

    <body>

        <h1> Here we go </h1>
    </body>
</html>

我的.css文件如下：

h1{ 
    font-family: Arial, Helvetica, sans-serif; 
    color: blue;
}

Answer 1

为什么无法链接CSS文件？

在您的示例中，您只需要将rel="Hope this works"更改为rel="stylesheet" ，即可将其识别为样式表，如下所示：

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

这仅仅是为了区分stylesheet链接和icon图片链接之间的区别。 This link to a w3 Schools page描述了属性rel的可能值。

此外，如果仍然无法运行，请确保文件“ newcssstyle.css”与所引用的HTML文件位于同一目录中。如果将其放在“样式表”之类的文件夹中，请确保将相对文件夹路径添加到HTML文件。

例如，如果您有这样的目录：

父目录名称：
- index.html
- 样式表：
  - newcssstyle.css

然后，您将“ newcssstyle.css”（相对于“ index.css”）作为href='Stylesheets/newcssstyle.css'

位置，位于这样的目录中：

父目录名称：
- HTML文件：
  - index.html
- 样式表：
  - newcssstyle.css

然后，您应将“ newcssstyle.css”替换为href='../Stylesheets/newcssstyle.css'（其中..的意思是“将级别返回到父目录”）。

如果问题仍然存在，则可能是您的浏览器与您的特定HTML或CSS版本不兼容。例如，Internet Explorer就是一个糟糕的浏览器。如果您使用它，只需安装Chrome。

Answer 2

元素在当前文档和外部文档之间建立关系。

关于i代表关系的属性的重要点。此属性定义链接文档与当前文档的关系。如何阅读。

还请确保您的.css文件具有与Your href相同的名称。

您可以在此处详细了解-> https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link

Answer 3

您必须将rel属性更改为rel="stylesheet"。您应该在文本编辑器中键入以下内容：

link rel="stylesheet" href="newcssstyle.css" type="text/css"

确保使用正确的路径。

有关更多信息，请查看以下链接： https://www.w3schools.com/html/html_css.asp

如何从HTML文件链接.css文件？

3 个答案:

为什么无法链接CSS文件？