These path components are shortcuts with specific meanings:
. means the current path level (so if you’re on index.aspx and you reference ./style.css then the latter would have to be in the same folder as the former)
.. means one path level up (so if you’re on /somefolder/index.aspx and you reference ../style.css then the latter would have to be in the parent folder of someFolder)
/ means the root level (so /style.css is the same as http://www.mysite.com/style.css)
~ in ASP.NET means the server-side application root (so ~/index.aspx would be translated to the URL of the index.aspx file that’s in the application’s root)
There are a number of things to note here:
There is a difference between server paths and client paths. For example, from the web browser’s perspective there’s no “application root.” A web browser wouldn’t know what to do with ~. That can only be used in paths which are pre-processed in server-side components. The server-side components would then know to translate that into a client-visible path based on the current location of the application relative to the web server.
Parent path specifiers (..) have no limit. The root’s parent is considered the root. So if you’re on http://www.mysite.com/someFolder/index.aspx and you reference ../../../../style.css it will go to http://www.mysite.com/style.css.
The browser also translates paths for you. This is one of the differences between the “page source” and the “DOM.” Your page source may have a reference to ../somePage.aspx, but when you hover over it with your mouse the browser indicates that it’s http://www.mysite.com/somePage.aspx. This is because the browser has converted the relative path of the former into the absolute path of the latter.
Let’s see…
. = this directory
.. = the parent directory
../ = the parent directory
~/ = the user’s home directory or the application’s, in ASP
/ = the root directory
../../ = the parent’s parent directory
and so on.
BTW, this works for all Linux/Unix systems.