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

问题描述 投票：1回答：3

我一直在学习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;
}
css html5
3个回答
1
投票

Why does linking a CSS file not work?

在您的示例中，您只需将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_files： 的index.html 样式表： newcssstyle.css

然后你会将“newcssstyle.css”改为href='../Stylesheets/newcssstyle.css'（其中..的意思是“返回到父目录的级别”）。

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

0
投票

element创建当前文档和外部文档之间的关系。

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

另外，请确保您的.css文件与您的href具有相同的名称。

你可以在这里阅读更多相关信息 - > https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.