且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

相对路径到CSS文件

更新时间:2023-02-10 07:37:58

背景



绝对
浏览器将始终解释 / 为主机名的根。例如,如果我的网站 http://google.com/ ,并指定 /css/images.css 那么它将在 http://google.com/css/images.css 搜索。如果你的项目根实际上在 / myproject / 它不会找到css文件。因此,您需要确定项目文件夹根目录相对于主机名的位置,并在 href 符号中指定。

Background

Absolute: The browser will always interpret / as the root of the hostname. For example, if my site was http://google.com/ and I specified /css/images.css then it would search for that at http://google.com/css/images.css. If your project root was actually at /myproject/ it would not find the css file. Therefore, you need to determine where your project folder root is relative to the hostname, and specify that in your href notation.

相对:如果您要引用某个您知道的网址在网址上的同一路径 - 也就是说,如果它在同一个文件夹中,例如 http: //mysite.com/myUrlPath/index.html http://mysite.com/myUrlPath/css/style.css ,而您知道它将永远是这种方式,你可以违反约定并指定一个相对路径,不在你的路径前面放置一个前导 / ,例如 css / style.css

Relative: If you want to reference something you know is in the same path on the url - that is, if it is in the same folder, for example http://mysite.com/myUrlPath/index.html and http://mysite.com/myUrlPath/css/style.css, and you know that it will always be this way, you can go against convention and specify a relative path by not putting a leading / in front of your path, for example, css/style.css.

文件系统符号:此外,您可以使用标准的文件系统符号,例如 .. 。如果您 http://google.com/images/../images/../images/myImage.png 会与 http://google.com/images/myImage.png 。如果你想从你的文件中引用一个目录,使用 ../ myFile.css

Filesystem Notations: Additionally, you can use standard filesystem notations like ... If you do http://google.com/images/../images/../images/myImage.png it would be the same as http://google.com/images/myImage.png. If you want to reference something that is one directory up from your file, use ../myFile.css.

在您的情况下,您有两个选项:

In your case, you have two options:


  • < link rel =stylesheettype =text / csshref =/ ServletApp / css / styles.css/>

  • < link rel =stylesheettype =text / csshref =css / styles.css/& code>

如果你移动的话,第一个更具体和兼容,但是如果你打算保留文件位于同一位置,并且您计划删除/ ServletApp /部分URL ,那么第二个解决方案就更好了。

The first will be more concrete and compatible if you move things around, however if you are planning to keep the file in the same location, and you are planning to remove the /ServletApp/ part of the URL, then the second solution is better.