关于html引入css文件后没有效果问题

关于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标签，可行且快速的解决办法是：

1. 不敲 “<”，找到link:css
   
2. 记住，link标签引入css时用rel而不是type

除此之外，没有效果有可能有以下原因：

1. 路径出错
   css文件和html文件路径不同，导致系统无法找到

2. 属性写错
   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未更新（不一定会出现，但是有概率，还是要记录一下），此时就需要清理浏览器缓存了（虽然个人不建议）

1. 按住ctrl+shift+delete（有的键盘上是del，各浏览器通用）
2. 尽可能选择时间短时间内，比如最近一小时