Question

我是html的新手，肯定是CSS。我从使用CSS，XHTML和JavaScript的基础网站创建这本书中学习，我在这个问题的时候已经知道了这个，但仍然希望我可以帮助很多人。这是我的标记：

 <head>
     <meta http-equiv="Content-Type" content="text/html; 
     charset=utf-8"/>
     <title>Welcome to Papa Pepperoncini's</title>
     <link  href="C:\Users\Kevin Turner\Desktop\html\indexcss.css" rel="stylesheet"          type="text/css"/>
 </head>

为什么我的样式表没有链接？我可以建立这个链接吗？我该怎么办？我相信它在Chrome中工作，但不是在IE或Firefox中，也许你也可以帮我理解这一点。

谢谢，凯文

Answer 1

请勿使用C:\Users\Kevin Turner\Desktop\html\indexcss.css。这不是正确的URL。通常您使用相对URL路径。如果包含css的文件位于同一目录中，则只需写入文件名。

如果文件与html文件位于同一目录（文件夹）中，则此方法应该有效：

<head>
     <meta http-equiv="Content-Type" content="text/html; 
     charset=utf-8"/>
     <title>Welcome to Papa Pepperoncini's</title>
     <link  href="indexcss.css" rel="stylesheet" type="text/css"/>
 </head>

要解释relative URL path是什么，想象一下你有一个像这样的文件夹结构：

 --- html/
 ----- index.html
 ----- css/
 ------- maincss.css

并且您希望在maincss.css中加入index.html - 文件。那你就做 <link rel="stylesheet" type="text/css" href="css/maincss.css" />。因为maincss.css位于css/目录（文件夹）中，相对于您所在的目录（html/）。

您可以使用file:///c:/Users/Kevin%20Turner/Desktop/html/indexcss.css Source。但是 ONLY 如果css文件位于您正在加载页面的计算机上！

因此。如果CSS文件与包含它的文件位于同一目录（可能是index.html），那么您的代码将是：

<head>
     <meta http-equiv="Content-Type" content="text/html; 
     charset=utf-8"/>
     <title>Welcome to Papa Pepperoncini's</title>
     <link  href="indexcss.css" rel="stylesheet" type="text/css"/>
 </head>

另一方面，file:/// URI和文件位于加载html页面的计算机上，看起来像

<head>
     <meta http-equiv="Content-Type" content="text/html; 
     charset=utf-8"/>
     <title>Welcome to Papa Pepperoncini's</title>
     <link  href="file:///c:/Users/Kevin%20Turner/Desktop/html/indexcss.css" rel="stylesheet" type="text/css"/>
 </head>

Answer 2

标准CSS链接声明如下：

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

您输入的路径可能有问题。将来，请考虑同时使用您正在编辑的HTML文档。和桌面上的CSS文档（或只是在同一个文件夹中）。这样你就不必每次都输入完整的路径（假设你只是使用一个简单的类似记事本的编辑器）

Answer 3

在您的本地网址之前输入file:///

Answer 4

由于您的文件存储在本地，请确保使用file:/// URI方案：

<link rel="stylesheet" type="text/css" href="file:///C:\Users\Kevin Turner\Desktop\html\indexcss.css" />

仍然无效？

某些（或大多数？）浏览器阻止访问本地文件系统，即使网页本身在本地运行也是如此。这是一种防止网页访问和修改本地文件的安全措施。

例如，Chrome会返回错误，例如Not allowed to load local resource。要在Windows上解决此问题，您必须使用--allow-file-access-from-files标记启动Chrome。只需关闭Chrome，右键单击并修改快捷方式，在快捷方式目标末尾添加标记即可。所以你的目标是这样的：C:\path\to\chrome\chrome.exe --allow-file-access-from-files。这将允许Chrome访问您的本地样式表。

Answer 5

您不应该链接到本地文件，因为在您的实时网站上，这不会起作用。即使您的文件系统设置方式相同，HTTP服务器也可能无法提供服务。它还取决于您在本地（通过服务器或仅使用文件）提供HTML的方式。

无论如何，您应该链接到相对于html文件的CSS文件，或者最好是文档根目录（为您的网站文件提供服务的文件夹）。如果你能找出你的文档根目录，你可以使用：

<link href="/indexcss.css">

...假设你的文档根目录是

C:\Users\Kevin Turner\Desktop\html\

如果您的html文件（<head>）与indexcss.css位于同一文件夹中，则可以使用

<link href="indexcss.css">

确保您了解文档根目录和相对/绝对路径。

链接到CSS样式表

5 个答案: