关于导入外部样式表的目录问题

  在html中插入css样式或者是js文件的方式往往分为内部插入和外部导入两种途径,今天已css样式表为例,总结一下外部文件导入的路径问题:

1.内联样式,即在html文档内部应用样式:

  方式一:行内样式:

 1 <p style="font-size:20px;color:red">这种是行内样式</p>  样式与结构紧密耦合,不推荐!

  方式二: 内部样式,一般插入在文档<head></head>标签中<style></style>内:

 1 <html>
 2 <head>
 3 <title>内部样式表演示</title>
 4 <style type="text/css">
 5      div{
 6              width:100px;
 7              height:100px;
 8              backgrond:#ffccaa;
 9            } 
10       ul{
11            color:red;
12            font-size:12px;
13          }
14 </style>
15 </head>
16 <body>
17        <div>内部样式表</div>
18 </body>
19 </html>

2.外部样式导入:

   一,  导入方式:

 
1 <head>
2 <title>title of article</title>
3 <link rel=stylesheet href="http://www.dhtmlet.com/rainer.css" type="text/css">
4 </head>

  二,导入路径:

(1)  相对路径:

文档相对路径:"./ "当前目录    " ../  "   上一级目录    " / " 下一级目录

假设你本地文件夹如下:  fff > fsfa >   src     >      index.html ;

                     up.html     images;

                             javascript;

                                html          >  now.html

                                   css             >want.css

   此时 在now.html中导入want.css,目录为:../css/want.css                  语言描述为 :导入上级目录(src)下的css文件夹下的want.css文件;

      在index.html文件中导入want.css,目录为:css/want.css  或者./css/want.css          :导入当前目录(src)下的css文件夹下的want.css文件;

      在up.html文件中导入want.css,目录为:./src/css/want.css                            :导入当前目录(fsfa)下的src中css中的want.css文件;

  

原文地址:https://www.cnblogs.com/younylight/p/7668576.html