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的头部会有一个链接标记，其路径为{ {1}}。

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

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：// protocol），无法正确解析此类网址（站点根目录，以斜杠开头） - 浏览器将在系统根目录中搜索这些文件（C： /）。您需要使用远程配置（使用Web服务器URL而不是本地路径访问您的html）才能使其正常工作。请注意，Idea支持所谓的内置Web服务器（http://confluence.jetbrains.com/display/WI/built-in+web+server），因此您无需安装Web服务器即可测试代码。从Idea 13开始，JS调试只有一个运行配置，右键菜单创建的运行配置（动作“创建/调试”html文件）使用内置http服务器上的url而不是文件url

引用外部CSS不起作用

4 个答案: