将CSS / Javascript链接到网页的正确方法是什么？

Question

I want to link the css and javascript files to my asp.net form. I saw diffrent ways to do that. But dont know the diffrence.

1. With /

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

2. With ~/

    <link type="text/css" rel="stylesheet" href="~/Content/animate.css"> 

3. With nothing

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

4. With ../

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

What is the correct way and what are the difference? Please explain also when to use what?

Answer 1

正确的方法是“2”，因为你从项目的根开始寻址

<link type="text/css" rel="stylesheet" href="~/Content/animate.css">

Answer 2

1. With /

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

   This goes all the way to the root directory. If the file with that line is example.com/folder/anotherFolder/index.html , then that line of code will access example.com/Content/animate.css . It just goes to the very start.

2. With ~/

    <link type="text/css" rel="stylesheet" href="~/Content/animate.css"> 

   This goes almost to the root like the first example, but stops one folder short. If the file with that line is example.com/folder/anotherFolder/index.html , then that line of code will access example.com/folder/Content/animate.css .

3. With nothing

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

   I think for the most part, you will want this one. It accesses files relative to the current one. If the file with that line is example.com/folder/anotherFolder/index.html , then that line of code will access example.com/folder/anotherFolder/Content/animate.css .

4. With ../

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

   This one backs out just one folder/level. If the file with that line is example.com/folder/anotherFolder/index.html , then that line of code will access example.com/folder/Content/animate.css .

Answer 3

The difference is that if you site is http://example.com and you have an application http://exmaple.com/app1 .

1. This means root of the site. So it will become: http://example.com/Content/animate.css

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

2. The '~' means root of the application. so it will become: http://example.com/app1/Content/animate.css

    <link type="text/css" rel="stylesheet" href="~/Content/animate.css"> 

3. This is realtive path so depending on where the file is, it will simply look for a Content folder in that same folder and then animate.css file. If you move the file where this is written to another folder, it will still look for a Content folder at that new location and then animate.css file.

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

4. This is saying go up one directory (from the file wherever this line of code is written) and then find Content folder and then animate.css file.

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

Each one has its place and use. Now that you know what they mean, you can choose which to use.

As a final note,

1. Write all the different ones in an html file.
2. Open Chrome debugger (or any browser debugger) and select the Network tab.
3. Access the html page form the browser
4. See how the browser interprets each path. You will see the browser making requests to each one using the complete URL.

You can use that technique anytime for any path to see what it gets resolved to.

Answer 4

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

当css文件位于Content之前的文件夹内时使用此选项