如何解决css外部导入不起作用的问题-创新互联
这篇文章主要介绍“如何解决css外部导入不起作用的问题”,在日常操作中,相信很多人在如何解决css外部导入不起作用的问题问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”如何解决css外部导入不起作用的问题”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!
10年积累的网站制作、成都做网站经验,可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你,你也不认识我。但先网站设计后付款的网站建设流程,更有顺昌免费网站建设让你可以放心的选择与我们合作。HTML使用CSS样式一共有如下三种方式:1.内联样式-在HTML元素中使用"style"属性;2.内部样式表-在HTML文档头部区域使用;3.外部引用-使用外部CSS文件。
如何解决css外部导入不起作用
一般而言,使用前两种方式都很少有问题,但在实际开发过程中,为了方便维护,HTML一般都是外部导入CSS样式的。因此,新手使用CSS样式遇到的问题一般是外部导入的CSS不起作用。
外部样式导入路径会用到:./当前目录,../父级目录,/根目录
在此次场景中,笔者在D盘的一个文件夹下创建了一个根目录MyChat,然后在根目录下创建两个子目录public,views分别存放css样式文件和html文件。
把bootstrap3的样式拷贝到本地的css文件夹下,分别在根目录和main文件夹下创建一个index.html文件,然后复制粘贴bootstrap官网的上html模板代码
用浏览器打开根目录的html文件看css样式有没有生效,效果如下:
再看这些模板的css是怎么通过外部导入使用的,如下
看得出外部的css有生效,接来下尝试导入本地的css样式。打开main文件夹的index.html文件,,粘贴复制html模板,修改link的路径。修改如下:
用浏览器打开该html文件,如下:
css样式没有生效,出现报错了,看是什么原因?根据给出的信息,是css文件的路径检索出错了,html文件没有引用到外部的css文件。现在对比报错的路径和本地的路径:
index.html文件在E:\nodejsstudy\MyChat\views目录下
bootstrap.min.css文件在E:\nodejsstudy\MyChat\public目录下
浏览器给出:file:///E:/nodejsstudy/MyChat/views/main/public/css/bootstrap.min.css
index.html文件代码
按照逻辑,html文件会引用E:\nodejsstudy\MyChat\public\css目录文件下的bootstrap.min.css文件才对,但现在看来,css文件引用不到。然后继续修改路径href="../public/css/bootstrap.min.css",返回上一级目录检索,给出的报错信息:file:///E:/nodejsstudy/MyChat/views/public/css/bootstrap.min.css
继续修改href="../../public/css/bootstrap.min.css",再返回上一级目录检索,引用到css文件了
总结:在开始,当main目录下的html文件用路径href="public/css/bootstrap.min.css"引用css文件时,是在目录MyChat/views/main目录下检索有没有public/css/bootstrap.min.css的,但该目录下没有这个css文件。
然后修改路径"public/css/bootstrap.min.css"->"../public/css/bootstrap.min.css",返回到MyChat/views目录下检索css文件,出现相同的错误。
再次修改路径"../public/css/bootstrap.min.css"->"../../public/css/bootstrap.min.css",返回到MyChat目录检索public/css/bootstrap.min.css,回顾一下目录结构,可以检索到css文件。
扩展:如果把上面的MyChant文件放在服务器web根目录,用"public/css/bootstrap.min.css",是可以直接引用css文件。
到此,关于“如何解决css外部导入不起作用的问题”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注创新互联网站,小编会继续努力为大家带来更多实用的文章!
分享名称:如何解决css外部导入不起作用的问题-创新互联
URL链接:http://pwwzsj.com/article/ecopp.html