引用外部CSS不起作用

Question

我正在尝试建立一个网站来托管我制作的应用程序，而我正在使用IntelliJ IDEA IDE来完成它。 我有两个HTML页面和一个CSS文件：

/index.html
/projects/somepage.html
/css/styles.css

因此，在两个html页面中，我都想引用css文件，因此在两个html页面中都具有此文件：

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

我以为这样可以，但是没有，两个页面都没有样式。

如果我查看html页面的源代码，然后单击以查看其试图获取css文件的位置，则它正在查看C：/css/styles.css。

我是从头开始开发网站的新手，也许路径略有错误？ 如果将styles.css从文件夹中取出，并在index.html中将其引用为“ styles.css”，在somepage.html中将其引用为“ ../styles.css”，则可以使它正常工作，但是我不想必须为不同的页面使用不同的路径。

我的IDE是否有问题？ 当我创建名为Website.iml的项目时，IntelliJ IDEA创建了一个可能相关的文件。 这是里面的东西：

<?xml version="1.0" encoding="UTF-8"?>
<module type="WEB_MODULE" version="4">
  <component name="NewModuleRootManager" inherit-compiler-output="true">
    <exclude-output />
    <content url="file://$MODULE_DIR$" />
    <orderEntry type="sourceFolder" forTests="false" />
  </component>
</module>

虽然，我真的不知道IDE会对它有什么影响，因为它只有助于创建代码，如果不使用IDE，文件结构也完全相同。

谢谢。

Answer 1

在构建应用程序时，应该运行开发服务器，因为开发服务器在服务器上的行为与在本地计算机上的文件不同，其行为将有所不同。 例如，现在路径错误，因为它正在根目录中搜索css / style.css，该目录在您的计算机上是C：/驱动器。 当您将其放到服务器上时，它将完美运行，因为所有文件都将位于根目录中。

运行开发服务器非常容易，有百万种方法可以通过以下方式启动带有php5的简单APACHE服务器：

$ php -S localhost:8000 -t /path/to/your/application

否则，您将需要在每个html文件中更改样式表的路径，因为它们都嵌套在不同的级别。

例如，您的index.html的头部将带有一个链接标记，其路径为css/style.css ，而您的/projects/somepage.html将具有一个链接标记，其路径为../css/style.css 。

话虽如此，如果您认真构建网站，则需要学习使用开发服务器。

Answer 2

您不需要在CSS前面使用多余的'/'。

<link rel="stylesheet" href="css/style.css" />

应该工作正常。 我认为使用多余的/，它正在尝试查找另一个文件夹。 希望这可以帮助！

Answer 3

尝试

<link href="./css/style.css" />

要么

<link href="css/style.css" />

通过仅使用斜杠，它试图查找站点根目录。 通过添加句点，它将在文档的根文件夹中查找。

Answer 4

在本地打开文件（使用file：//协议）时，无法正确解析此类url（相对于root的站点根目录，以斜杠开头）-浏览器将在系统根目录（C：/）中搜索这些文件。 您需要使用远程配置（使用Web服务器url而不是本地路径访问html）来完成此工作。 请注意，Idea支持所谓的内置Web服务器（ http://confluence.jetbrains.com/display/WI/built-in+web+server ），因此您无需安装Web服务器即可测试代码。 从Idea 13开始，只有一种用于JS调试的运行配置，并且从右键单击菜单创建的运行配置（动作“ Create / Debug” html文件）使用内置http服务器上的url而不是文件url。