关于html引入css文件后没有效果问题
2023.2.10
这个问题在我写前端的时候是一直会出现的,为了避免下次再次出现,有必要记录一下。
通过外部样式表引入css文件到html中,会用到:(以下是错误示范)
<link type="stylesheet" href="../css/common.css">
这里的问题是<link>标签可以有type属性,但是type应该写成rel,也就是:(以下是正确示范)
<link rel="stylesheet" href="../css/common.css">
照成上述原因是用vscode时快捷生成代码时敲了<link,导致只会生成link标签,可行且快速的解决办法是:
- 不敲 “<”,找到link:css
- 记住,link标签引入css时用rel而不是type
除此之外,没有效果有可能有以下原因:
-
路径出错
css文件和html文件路径不同,导致系统无法找到 -
属性写错
href敲成了herf
2023.2.27
今天记起还有一种情况,在修改css文件之前已经在浏览器加载过,但是修改css文件后,浏览器中样式并没有修改,这时候可能只需要ctrl+F5
或者按住ctrl然后再鼠标点刷新
强刷一下就行。出现这种情况大多是在工程项目中。
如果依旧没有作用,使用的是IntelliJ IDEA,需要将项目部署到tomcat中,请检查out文件夹下的html是否和修改后的内容是否相同(vscode好像不会生成部署文件,还是需要基于框架判断)
如果在重新build或者重启tomcat的情况下都没有更新,根据下图解决
2023.4.23
有时候会出现一种情况,通过强刷
后html
没有更新,但是其中js
文件却已经更新。
在将原js
文件中的部分代码进行封装写到一个新js
文件中时,就有可能导致强刷后仅js更新而html未更新(不一定会出现,但是有概率,还是要记录一下),此时就需要清理浏览器缓存了(虽然个人不建议)
- 按住
ctrl+shift+delete
(有的键盘上是del,各浏览器通用) - 尽可能选择时间短时间内,比如最近一小时