如何从HTML文件链接.css文件? [英] How to link a .css file from HTML file?
问题描述
我一直在学习HTML5和CSS，直到现在我一直在使用HTML < head>< style></style>< head> 部分.当我第一次尝试将样式从HTML文件移动到CSS文件时，却无法使 link 正常工作.
I have been learning HTML5 and CSS, until now I have been styling in the HTML <head> <style> </style> <head> section. When I tried to move styles to CSS file for the first time from HTML file but, I cannot get my link to work.
我想要什么?我正在尝试将样式移动到.css文件中.
What I want? I am trying to move my styles into a .css file.
我尝试了什么?
我创建了一个新文件夹，并且在此文件夹中存在一个新的.HTML文件和一个新的.CSS文件.我正在使用VScode.
I have created a new folder and inside this folder a new .HTML file and a new .CSS file are present. I am using VScode.
我尝试将HTML和CSS粘贴到codepen中并进行渲染，所以我不确定< link> 有什么问题.
I have tried pasting my HTML and my CSS into codepen and it renders so I am not sure what is wrong with my <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文件无效?
在您的示例中，您只需在以下位置将 rel =希望此方法有效" 更改为 rel ="stylesheet" 以便将其识别为样式表，如下所示:
Why does linking a CSS file not work?
In your example, you only have to change the rel="Hope this works" to rel="stylesheet" in order for it to recognize it as a stylesheet, as demonstrated in the following:
< link rel =样式表"；href =" newcssstyle.css"type ="text/css">
这仅仅是为了区分说出 stylesheet 链接和 icon 图片链接之间的区别.到w3 Schools页面的链接描述了 rel属性的可能值.
This is simply in order to distingush the difference between say a stylesheet link and an icon image link. This link to a w3 Schools page describes the possible values for the attribute rel.
此外，如果仍然无法正常运行，请确保文件"newcssstyle.css"位于与所引用的HTML文件位于同一目录中.如果将其放在样式表"之类的文件夹中，请确保将相对文件夹路径添加到HTML文件中.
Furthermore, if it still doesn't work, ensure that the file "newcssstyle.css" is in the same directory as the referenced HTML file. If you put it in a folder such as "stylesheets", ensure that you add the relative folder path to your HTML file.
例如，如果您有这样的目录:
For example, if you had a directory like this:
- 父目录名称:
- index.html
- 样式表:
- newcssstyle.css
然后，您将引用"newcssstyle.css"(相对于"index.css")为
href ='Stylesheets/newcssstyle.css'Then you would refrence "newcssstyle.css" (relative to "index.css") as
href='Stylesheets/newcssstyle.css'位置，位于类似这样的目录中:
Whereas, in a directory like this:
- 父目录名称:
- HTML文件:
- index.html
- newcssstyle.css
然后，您将引用"newcssstyle.css"替换为
href ='../Stylesheets/newcssstyle.css'(其中..的意思是将级别返回到父目录").Then you would refrence "newcssstyle.css" as
href='../Stylesheets/newcssstyle.css'instead (where..means "go back a level to the parent directory").如果问题仍然存在，则可能是您的浏览器与您的特定HTML或CSS版本不兼容.例如，Internet Explorer就是一个糟糕的浏览器.如果您使用它，只需安装Chrome.
If the problem still persists, it may be your browser is not compatible with your specific HTML or CSS version. Internet Explorer, for example, it known to be a terrible browser. If you use it, just get Chrome.
这篇关于如何从HTML文件链接.css文件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
- HTML文件:
