HTML外部引用CSS文件不生效原因分析及解决办法
互联网 & 发布时间： 14:45:20 & 作者：佚名 &
本文主要给大家介绍html外部引用css文件不生效的原因分析及解决办法，本文介绍的非常详细，具有参考借鉴价值，感兴趣的朋友一起学习吧
作为一个前端小白，鼓捣了几天前端。。今天突然发现我深信不疑的东西，竟然出现了问题。。就比如我在css目录下面写了一个css样式文档：style.css。这时里面只有一句话：
body&{& &&
background-color:&#& &&
然后再我的html文件里面去引入这个外部css：
&rel=&stylesheet&&type=&text/css&&href=&css/style.css&&&&
在浏览器一刷新。。哇，kao。竟然没反应，不起作用。。我检查了好几遍这个路径确定没有问题，打开chrome的F12调试器。确信浏览器加载了css文件，然后我打开了这个文件，看到：
竟然乱码。。应该是编码是格式出了问题，但却不得要领。。咨询了一个前端小伙伴，后检测网页当前编码：
显示的是UTF-16LE编码。。 后面我试了一下，用sublime编辑器修改本地css文件编码格式为这个utf-16LE：
重新编写了css代码。保存运行。。果然就可以了。。 但是我的html我指定的是utf-8，而css是utf-16，这让我很不爽。。所以又询问了一下解决方案。可以解决，而且很简单。。 把css重新改成utf-8，并编辑好里面的代码。只需在html引入这个css的时候，声明编码格式就好了：
即给link标签加一个属性：charset=&utf-8&就好了。。。其实就这么简单。。。
关于HTML外部引用CSS文件不生效原因分析及解决办法 小编就给大家介绍到这里，希望对大家有所帮助！
大家感兴趣的内容
12345678910
最近更新的内容前言为什么会有这篇文章，外部引入样式有什么好谈的，不外乎就是&link rel="stylesheet" href="style.css" /&
就这么简单，还有什么，so easy，我之前都是这么认为的你肯定比我聪明多了~_^，但是当做一个页面在微信上浏览并且修改再浏览的时候我发现不对劲，因为已经上传的样式表木有改变，IOS还好，可以强制刷新页面。但是安卓端这块一直在用微信的缓存，还没有刷新的按钮，所以觉得css引入问题目测应该没有这么简单。好了，下面都是一些自己的纯扯蛋瞎扯，欢迎前辈多拍砖。关于路径在还没有说之前先说下关于css引入的2种方式：相对路径(Relative Path)，顾名思义：就是css文件相对某一个参照物的位置。上物理课的时候老师都会提到相对运动：指某一个物体对另外一个物体的相对于一个固定参照物来是相对运动的。我们走路看汽车的时候觉得汽车往后走，汽车看我们的时候是往前走，那么相对路径也是酱样子的，网页所处目录就是我们的参照物。像刚刚上面这段css代码的引入就是一个相对路径地址，test是网站的目录，style.css文件跟这个网页文件是同处一个目录层级，如图：&&那么在网页文件index.html引入css应该是 &link rel="stylesheet" href="style.css" /& 假如说css文件放在跟index.html同级目录，名为css文件夹里面，类似这样：&&那么这时候引入css的时候就应该是 &link rel="stylesheet" href="css/style.css" /& 假如css放跟目录也就是test这里&&那么引入css就应该是 &link rel="stylesheet" href="/style.css" /& &link rel="stylesheet" href="./style.css" /& “/”斜杠符号在这里表示的就是根目录，也就是这些网页文件之间联系的参照物。绝对路径(Absolute Path)，既然是绝对的，那就说明这个地址是唯一性，独立性。相对本地来说，刚刚的站点test的绝对地址为F:\test，相对服务器来说，就应该是127.0.0.1/test类似这样的IP地址。关于路径引入要相对路径还是绝对路径引入css文件，个人认为本地预览的时候可以选择相对路径，项目上线的时候改成绝对路径来引入，为什么？有以下几点：1. 减少索引，绝对地址的唯一性可以确保用户在输入网页的时候，浏览器直接去索引到那个IP地址，直接一刀致命，没有拖沓。而相对路径就要一步步索引目录，这就好比在路上遇见一个心仪的妹纸，我们害羞不敢当面去谈话，于是我们制造了无数的偶遇之后才有胆子上去问联系方式，到最后才发现妹纸早名花有主，早知如此，何必当初呢~2. 增加外链，对于做SEO的人来说，我们都知道外链能带来不错的权重提高，就算是别人来抓我们的内容，假如它没有改成自己的服务器地址，那说明这个网站的引用地址还是我们的网址，爬虫会通过这个图片引用地址反爬回去，但相对路径引用，因为地址发生变更，因此爬虫爬回去之后找不到相应的文件，因此爬虫的工作也即将停止。3. 提高排名，假如是你一个干前端的，那么多少都会遇到某一个自己喜欢的动画效果，HTML搞下来了，但是不想要直接把css也下下来，因此会在本地直接调用网络地址。当你预览这个页面的时候不小心点到了引入地址，会跳转到相应的网站css，即使你没有访问其主页，但是你还是访问了他的域名，无意之中还是增加了其访问量。当然了，第三点是我自己YY出来的，至于是不是我们无从考究，希望有过研究的可以分享一下你们的见解咯。绝对路径几种表现一般式刚刚我们提到了相对来说不管是引用图片还是引用css文件，路径最好是绝对路径，所以上面的style.css文件的引入地址应该是 &link rel="stylesheet" href="http://xxx.com/test/css/style.css" /& 这样的引入似乎是正确了的，各种对SEO来说也达到的满意程度，但是某宝的做法是这么做某宝式淘宝的css还有js的引入是通过他们的CDN分布式形式，而且后面都带有?t=，这跟我们的做法不太一致，后面的应该是这个时间更新的，为了方便记住版本信息，但是为什么带“？”问号。于是有Google一番，各路大神对此的解释可以解答我心中的疑惑：标注版本号。&方便查看最近修改情况。可以是日期。【这是淘宝一样】用随机数防止缓存。&如果更改css，为了避免浏览器缓存，不会及时更新导致页面没有出现相应效果，在使用时带上一个动态参数，让浏览器重新下载这个css文件。那就好理解了，带“？”只是为了让浏览器把旧版本的css给over掉，重下新的css版本号。这个也好解释了为什么微信浏览已经修改过的css文件，但是样式还没有调试过来，因为微信调用的还是老版本的css文件，因此假如各位csser们想要第一时间能预览到最新修改的样式，那么引入的路径最好是”?=xxx”类似这样的版本号，以便让浏览器重下我们已经修改过的css文件。Facebook式假如你能FQ，能上Facebook，那么不妨看看Facebook的css引入又跟我们国内的不太一样，如图：&这么一大堆的大小写英文字母是干嘛的，为什么又跟我们国内的不太一样，问了一下同事，他说是类似哈希加密文件，于是百科一了一下，大概解释如下：旧译哈希（误以为是人名而采用了音译）。它也常用作一种资讯安全的实作方法，由一串资料中经过散列算法（Hashing algorithms）计算出来的资料指纹（data fingerprint），经常用来识别档案与资料是否有被窜改，以保证档案与资料确实是由原创者所提供。最后一句话解释很好，就是经常被用来识别是否被篡改。假如说本地和网络上的这个css文件被篡改了，那么它会通知浏览器重下这个已经被修改css文件，然后清掉之前的css缓存。好了，说到缓存的问题，发现某宝的缓存还是蛮赞的。某宝的css刷新前后对比&只有这数字的css每次F5之后都会加载一次，其他的css文件都是304，何为304？简单地说就是启用本地缓存机制，假如说这个css是公用的，基本上不会经常改变，那么不妨可以用给这个文件设置长的缓存机制，这样一来该css文件不用每次都向服务器请求一次，不仅提高了访问速度，而且还可以减少渲染这些文件的流量，应该可以减少相应的一些宽带费用。对于更加详细的解释，不妨前往百度百科去充电一下→按照304代码的百科，首先先发一条指令到服务器，服务器发现其不改变那就返回304，假如改变，那就要通信一次，我在想有没有一种服务器机制，类似淘宝这种global.min.css，基本是一年更新不了几次，能不能用户只需要加载一次，后面的无论怎么刷新都不需要重新加载，不懂这个能不能用JS来实现，问了大拿同事，他说是服务器这边的问题，不需要JS来控制。后话嗦嗦，婆婆妈妈说了一大堆，不过总的还是没有改变，少用相对路径多用绝对路径；webapp最好在引入css后加版本号；可以适当增加缓存机制；那你们怎么看？更新：大公司里怎样开发和部署前端代码？好厉害！
阅读(...) 评论()jsp如何导入一个css样式 - ITeye问答
test\wap\DongMan\index.jsp //页面
test\wap\DongMan\css\style.css //css样式文件
index.jsp页面这样写：
&link type="text/css" rel="stylesheet"
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& href="./css/style.css" /&
结果发现没有成功引入，求大神帮忙看看啊
这个是你的路径搞错了& .代表当前路径，你的css文件是在css这个文件夹下不是当前路径而是在上一级的文件夹，所以应该用../css/style.css& 这样就OK了。
&link type="text/css" rel="stylesheet" href="&%=request.getContextPath()%&/css/style.css" /&
唉，，，看了这么多人回复，我也不知道说什么了；反正上面肯定有一个对的，
&link type="text/css" rel="stylesheet"& href="../css/style.css" /&
路径问题
在jsp页面&html&里面加上它：
&%String path = request.getContextPath();%&
导入的时候就可以直接用
&link type="text/css" rel="stylesheet" href="&%=path %&/css/style.css" /&
这样就ok啦
这类路径问题用ff的firebug调试最好了
直接访问jsp 页面将是正确的，但如果通过Struts 等跳转，则需使用相对于Action 的路径。
例如，Action 为
引用test/app/Index.action
则CSS应写为：
&link type="text/css" rel="stylesheet"
href="../wap/DongMan/css/style.css" /&
额& 我发现越是简单的问题回答的人越多啊&& 推荐你用一楼的& 使用jsp标签绝对路径& 如果目录层次较多是用相对路径能把人整的想撞墙& 绝对路径一目了然
${pageContext.request.contextPath}/css/style.css
应该是路径搞错了吧
&link type="text/css" rel="stylesheet"
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& href="[color=red]../css/style.css" /& 是两个点，直接脱进去也可以
最简单的，把css文件拖到jsp页面，他就会自动导入了。。MyEclipse有这个功能、。
href="./css/style.css"
---》
href="css/style.css"
如果你的项目是放在\test\wap\DongMan下的，那你可以直接写成&%=request.getContextPath()%&/css/style.css
如果你的项目是放在\test下的，那你就要写成
&%=request.getContextPath()%&/wap/DongMan/css/style.css
当然你直接写成
../css/style.css也可以。
原因：css路径不对
&link type="text/css" rel="stylesheet"& href="./css/style.css" /&
解决办法:
(1)绝对路径引入
&link type="text/css" rel="stylesheet" href="&%=request.getContextPath()%&/css/style.css" /&
(2)相对路径引入
&link type="text/css" rel="stylesheet" href="../css/style.css" /&
1、多了一个点 ../css/style.css
2、可以写成绝对路径，
&%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
&link type="text/css" rel="stylesheet" href="&%=basePath%&/css/style.css" /&
直接使用 &link type="text/css" rel="stylesheet"
href="css/style.css" /& 就行了啊，为什么还要退出去一层呢？
建议楼主用绝对路径，这样的好处是如果你的jsp文件修改路径不用去修改jsp的引入的路径，
引用css文件的时候使用&link type="text/css" rel="stylesheet"
href="&%=request.getContextPath()%&/css/style.css" /&
直接使用
&link type="text/css" rel="stylesheet" href="css/style.css" /&
因为css和index.jsp文件是同级目录。
应该是路径的问题,可以通过测试添加绝对路径来测试样式生效,${pageContext.request.contextPath}/css/style.css",最好在项目中使用绝对路径,避免出现问题,可以设置一个统一头文件件通过include添加 进来。
是路径的问题，在页面加上&%=path%&
使用 :
&link type="text/css" rel="stylesheet"
href="${pageContext.request.contextPath}/css/style.css" /&&
../ 表示 退到上一级& 这在项目中一般不用
楼主这是常见的路径问题，一般不建议在引入js,css文件的时候使用相对路径。因为相对路径中的"."代表当前页面的路径，但有时候又不一定，例如你从一个Action跳转到当前页面时这个"."就变成了你Action中namespace的路径。这种情况一般使用绝对路径。新建jsp页面的时候会有&%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%&
在引用js,css文件的时候一般使用&link type="text/css" rel="stylesheet"
href="&%=basePath%&/css/style.css" /& 的方式。这样就不会有问题了。至于这个&%=basePath%&是什么，如果项目访问地址http://localhost:8080/项目名/...这时&%=basePath%&就是：http://localhost:8080/项目名;而如果项目访问地址http://localhost:8080/...这时&%=basePath%&就是:http://localhost:8080;
已解决问题
未解决问题解决HTML外部引用CSS文件不生效问题
作为一个前端小白，鼓捣了几天前端。。今天突然发现我深信不疑的东西，竟然出现了问题。。就比如我在css目录下面写了一个css样式文档：style.css。这时里面只有一句话：
background-color: #
然后再我的html文件里面去引入这个外部css：
在一刷新。。哇，kao。竟然没反应，不起作用。。我检查了好几遍这个路径确定没有问题，打开chrome的F12调试器。确信浏览器加载了css文件，然后我打开了这个文件，看到：
竟然乱码。。应该是编码是格式出了问题，但却不得要领。。咨询了一个前端小伙伴，后检测网页当前编码：
显示的是UTF-16LE编码。。
后面我试了一下，用sublime编辑器修改本地css文件编码格式为这个utf-16LE：
重新编写了css代码。保存运行。。果然就可以了。。
但是我的html我指定的是utf-8，而css是utf-16，这让我很不爽。。所以又询问了一下解决方案。可以解决，而且很简单。。
把css重新改成utf-8，并编辑好里面的代码。只需在html引入这个css的时候，声明编码格式就好了：
即给link标签加一个属性：charset=&utf-8&就好了。。。其实就这么简单。。。你的浏览器禁用了JavaScript, 请开启后刷新浏览器获得更好的体验!
我用的基于bootstrap的adminAce框架 现在有些样式不太适合我自己的项目，于是乎自己编写了一个css文件引用顺序也在bootstrap.css 后面，但是发现加载的时候bootstap.css还是会覆盖自己写的样式。不知道是bootstrap机制的问题还是什么，最重要是怎么解决这个问题，让我自定义的外部css能覆盖bootstrap原有样式。求大神支招~
我也刚学这个鬼
重新引你自己的
你在你想改的bootstrap的类名后面加自己的类名
然后设置样式
要回复问题请先或
浏览: 4437
关注: 3 人}