新手如何解决css外部导入不起作用思路
HTML使用CSS样式一共有如下三种方式：1.内联样式- 在HTML元素中使用"style"属性；2.内部样式表 -在HTML文档头部区域使用；3.外部引用 - 使用外部 CSS文件。一般而言，使用前两种方式都很少有问题，但在实际开发过程中，为了方便维护，HTML一般都是外部导入CSS样式的。因此，新手使用CSS样式遇到的问题一般是外部导入的CSS不起作用。
新手先检查内部样式是否覆盖外部链的样式。
外部样式导入路径会用到：./ 当前目录，../ 父级目录，/ 根目录
在此次场景中，笔者在D盘的一个文件夹下创建了一个根目录MyChat，然后在根目录下创建两个子目录public，views分别存放css样式文件和html文件。目录结构全貌如下：
文章图片
以前端框架Bootstrap3为实例，地址：http://www.bootcss.com/
把bootstrap3的样式拷贝到本地的css文件夹下，分别在根目录和main文件夹下创建一个index.html文件，然后复制粘贴bootstrap官网的上html模板代码
文章图片
文章图片
用浏览器打开根目录的html文件看css样式有没有生效，效果如下：
文章图片
再看这些模板的css是怎么通过外部导入使用的，如下
文章图片
看得出外部的css有生效，接来下尝试导入本地的css样式。打开main文件夹的index.html文件，，粘贴复制html模板，修改link的路径。修改如下：
文章图片
用浏览器打开该html文件，如下：
文章图片
【新手如何解决css外部导入不起作用思路】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="https://www.it610.com/public/css/bootstrap.min.css"，返回上一级目录检索，给出的报错信息：file:///E:/nodejsstudy/MyChat/views/public/css/bootstrap.min.css
继续修改href="https://www.it610.com/public/css/bootstrap.min.css"，再返回上一级目录检索，引用到css文件了
文章图片
总结：在开始，当main目录下的html文件用路径href="https://www.it610.com/article/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文件。
推荐阅读
- parallels|parallels desktop 解决网络初始化失败问题
- 考研英语阅读终极解决方案——阅读理解如何巧拿高分
- 如何寻找情感问答App的分析切入点
- mybatisplus如何在xml的连表查询中使用queryWrapper
- MybatisPlus|MybatisPlus LambdaQueryWrapper使用int默认值的坑及解决
- MybatisPlus使用queryWrapper如何实现复杂查询
- SpringBoot调用公共模块的自定义注解失效的解决
- 解决SpringBoot引用别的模块无法注入的问题
- 如何在Mac中的文件选择框中打开系统隐藏文件夹
- 漫画初学者如何学习漫画背景的透视画法（这篇教程请收藏好了！）