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

最新推荐文章于 2023-03-20 21:36:17 发布

落明

最新推荐文章于 2023-03-20 21:36:17 发布

阅读量568

点赞数

分类专栏： css学习文章标签： css html 文档结构

本文链接：https://blog.csdn.net/Young_Light_Lu/article/details/78563988

版权

css学习专栏收录该内容

5 篇文章 0 订阅

订阅专栏

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

1.内联样式，即在html文档内部应用样式：

方式一：行内样式：

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

方式二：　内部样式，一般插入在文档 head标签中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>
</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文件;