无法将我的CSS链接到我的HTML
[英]Cannot link my CSS to my HTML
问题描述
I'm at the last of my wits here. 
我在这里最后一次斗智斗勇。 I've searched through dozens of websites trying to find the answer to this issue, but I have yet to find a solution that helps me. 我已经搜索了几十个网站，试图找到这个问题的答案，但我还没有找到一个可以帮助我的解决方案。
Here is the top section of my HTML, linking to my CSS file: 这是我的HTML的顶部，链接到我的CSS文件：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<title>Sample Page</title>
</head>
For some reason, when I preview my .html file on my browsers, my CSS code is not taken into account. 出于某种原因，当我在浏览器上预览我的.html文件时，我的CSS代码没有被考虑在内。
Just to clear things up a bit, I've already made sure the following are not the reasons for my issues: 只是为了清楚一点，我已经确定以下不是我的问题的原因：
- My CSS code worked just fine when it was in the HTML within the style tags. 我的CSS代码在样式标记中的HTML中工作得很好。 It only stopped working once I put it into its own .css file. 它只有在我把它放入自己的.css文件后才停止工作。
- There are no
<style>tags on my .css file.我的.css文件中没有<style>标记。 - The rest of my HTML is correctly formatted. 我的其余HTML格式正确。 I have the
</html>tag and the<body>tags.我有</html>标签和<body>标签。 - I've tested this page on Chrome and Firefox, and even on a different computer's Chrome. 我在Chrome和Firefox上测试了这个页面，甚至在不同的计算机Chrome上测试过。 I've even tried running them as an Administrator. 我甚至试过以管理员身份运行它们。
- I've checked to confirm that my browsers are not set to Quirks Mode. 我已经检查确认我的浏览器未设置为Quirks模式。
- I've tried multiple DOCTYPE headers, none have shown any signs of working. 我尝试过多个DOCTYPE标头，没有任何标志显示有效。
- The .css name is correct, and the file location is correct. .css名称正确，文件位置正确。 Both the index.html and the style.css are in the same folder. index.html和style.css都在同一个文件夹中。
- I've tried these lines of code in different orders, different formats, I've even tried other peoples' code and nothing works. 我已经尝试了不同顺序，不同格式的这些代码行，我甚至尝试了其他人的代码而没有任何作用。
- I've checked the source code for the page on my browser, and clicking the style.css link leads straight to the file. 我在浏览器上检查了页面的源代码，然后单击style.css链接直接进入该文件。
The only lead I've gotten is that I clicked "Inspect Element" on my page in Chrome and checked the "Resources" tab, where the HTML is found under Frames>(index.html)>index.html and the CSS is found under Frames>(index.html)>Stylesheets>style.css . 我得到的唯一领先是我在Chrome页面上单击了“Inspect Element”并检查了“Resources”选项卡，其中的HTML位于Frames>（index.html）> index.html下 ，找到了CSS在框架>（index.html）>样式表> style.css下 。 If I click index.html, the body is blank, but if I click style.css, the body is, strangely enough, a bit of Chinese text. 如果我单击index.html，正文是空白的，但如果我单击style.css，那么正文就是一些奇怪的中文文本。
Here is a sample of a style.css I've tried: 这是我试过的style.css的示例：
body
{
background-color: yellow;
}
Even with the CSS as simple as this, it still won't work. 即使CSS很简单，它仍然无法正常工作。
Please help. 请帮忙。
EDIT: http://i.imgur.com/SgoFkvw.png 编辑： http ： //i.imgur.com/SgoFkvw.png
Read my post, you guys. 读你的帖子，伙计们。 They're in the same folder. 他们在同一个文件夹中。 The different paths are in the "Inspect Element" mode in Chrome, not in my folders themselves. 不同的路径位于Chrome中的“检查元素”模式，而不是我的文件夹本身。
6 个解决方案
解决方案1
3 2014-08-24 07:47:14
Jozef Dúc wrote in the comments ( 1 , 2 ): 约瑟夫·DUC在评论（发表文章1 ， 2 ）：
Open css file in some editor for example Notepad++ and change encoding of file to UTF-8
Notepad++, open file, in main menu find Encoding->Convert to UTF-8.Look again in Encoding and option Encode in UTF-8 should be checked and save file.
This is what solved it for me. 这就是为我解决的问题。
解决方案2
1 2014-08-24 07:52:28
According to your screenshot 根据你的截图
it looks like you have bad encoding in file. 看起来你在文件中编码不好。
So first add 所以先添加
<meta charset="utf-8">
to your HTML. 到你的HTML。
Then you must change encoding in CSS files. 然后，您必须更改CSS文件中的编码。 Open the file in some editor (I recommended Notepad++ ). 在某些编辑器中打开文件（我推荐使用Notepad ++ ）。 In Notepad++, find Encoding in menu and in submenu choose option Convert to UTF-8 . 在Notepad ++中，在菜单和子菜单中找到编码选择转换为UTF-8选项。 Now, look again in "Encoding" and "Encode in UTF-8" should be checked, then save the file. 现在，再次查看“编码”和“在UTF-8中编码”应该检查，然后保存文件。
解决方案3
1 2016-05-02 13:11:48
i had the same issue and this is what worked for me. 我有同样的问题，这对我有用。 i realized the .html and .css files where all in one single folder that's why it wasn't working. 我意识到.html和.css文件所有在一个单独的文件夹中，这就是它无法正常工作的原因。 to solve this, 解决这个问题，
open the project folder(the folder that contains your html files), in this folder, create another folder called 'styles'. 打开项目文件夹（包含html文件的文件夹），在此文件夹中创建另一个名为“styles”的文件夹。 Finally, place the .css file in the style folder and run your site again. 最后，将.css文件放在样式文件夹中，然后再次运行您的站点。
this worked for me. 这对我有用。 hope it works for you 希望这对你有用
解决方案4
0 2014-08-24 06:52:12
Try adding this line <meta charset="utf-8"> 尝试添加此行<meta charset="utf-8">
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
解决方案5
0 2014-08-24 08:02:52
1. Ensure that CSS is enabled in your browser. 1.确保在浏览器中启用了CSS 。
1.1 Firefox & Chrome: I recommend using Chris Pederick's Web Developer Toolbar , it is a CSS menu (third from left if you have a newer version where the text labels got KOed). 1.1 Firefox和Chrome：我建议使用Chris Pederick的Web Developer Toolbar ，它是一个CSS菜单（如果你有一个较新版本的文本标签被KOed，则左起第三位）。
1.2 Safari: ensure the Develop menu is visible (Edit-->Preferences-->Advanced) and then ensure that Disable Styles is not checked. 1.2 Safari：确保显示“ 开发”菜单（“编辑” - >“首选项” - >“高级”），然后确保未选中“ 禁用样式” 。
1.3 Opera (Real Opera, 12.5 and earlier): Tools-->Preferences-->Advanced [tab]-->Content-->"Style Options" [button]-->Presentation Mode [tab] and ensure that "Page Style Sheet" is checked. 1.3 Opera（Real Opera，12.5及更早版本）：工具 - >首选项 - >高级[标签] - >内容 - >“样式选项”[按钮] - >演示模式[标签]并确保“页面” “样式表”已选中。
1.4 Internet Explorer: Go to Tools-->Options and ensure that under the "Security" tab that the zone (either Local Intranet (if loading the page from your hard drive) or Internet (if you're uploading to a server and then loading it in a browser) are set to Medium-High. 1.4 Internet Explorer：转到工具 - >选项，并确保在“安全”选项卡下的区域（本地Intranet（如果从硬盘驱动器加载页面）或Internet（如果要上载到服务器，然后）在浏览器中加载它）设置为中高。
2. Ensure that your HTML and CSS files do not have a BOM (Byte Order Mark) which is created by Notepad and other Microsoft text editors. 2.确保您的HTML和CSS文件没有由记事本和其他Microsoft文本编辑器创建的BOM（字节顺序标记）。 You can disable the BOM by using Notepad++ or SuperEdi in the Save As... dialog, you will need to do so for both. 您可以在“ 另存为...”对话框中使用Notepad ++或SuperEdi禁用BOM，您需要同时执行这两项操作。 NEVER USE MICROSOFT TEXT EDITING TOOLS FOR WEBSITES! 千万不要使用MICROSOFT TEXT编辑工具来访问网站！
3. Running a local server? 3.运行本地服务器？ Check either the Apache access logs or the Developer Network tab to ensure the style.css file isn't coming up as 404. 检查Apache访问日志或Developer Network选项卡以确保style.css文件不会出现为404。
解决方案6
0 2014-08-24 10:13:15
My link tags work also without the / at the end of the tag. 我的链接标签也可以在标签的末尾没有/。 you can try that. 你可以试试。 and you can get to element ispect and that to console. 你可以得到元素ispect和控制台。 maybe the console can tell you what's wrong. 也许控制台可以告诉你什么是错的。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.