在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文件;