在html中引入css文件时不起作用问题的解决

最新推荐文章于 2025-07-11 21:10:47 发布
原创 最新推荐文章于 2025-07-11 21:10:47 发布 · 2.1w 阅读 · 11 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了一个HTML页面中引入CSS文件时常见的错误——忘记添加rel属性，导致样式无法正常应用的问题。通过加入rel=stylesheet，可以正确关联样式表文档，使页面样式按预期显示。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

编写了一个HTML页面，在页面中引入了一个css文件如下
在这里插入图片描述
但是用浏览器打开后页面却并没有使用css的显示格式
在这里插入图片描述
经查找资料发现，需要加入rel=stylesheet就可以解决了。rel是关联的意思，关联的是一个样式表(stylesheet)文档，它表示这个link在文档初始化时将被使用，一般不需要改动的。

<link rel="stylesheet" href="lili.css"/>

加入之后的显示
在这里插入图片描述

如何在django中引用html文件路径,django项目如何引入css文件
weixin_39654751的博客
06-19 1185
大多数初学者都会疑惑这样一个问题：Django中如何引入css，html文件呢？问什么总是报错呢？下面我们来探讨一下这个问题。这个问题出在以Djiango做后台的前端界面上。按以往的习惯，css，js，image等静态文件直接在前端html中写好链接，直接丢上去就可以，但当把含外部css的html在丢到Django后发现，css并没有载入，自然，其他静态文件也是如此。原因分析出现这个问题其实是因为...
html调用css不起作用,新手如何解决css外部导入不起作用思路
weixin_39641236的博客
06-07 4637
HTML使用CSS样式一共有如下三种方式：1.内联样式- 在HTML元素中使用"style"属性；2.内部样式表 -在HTML文档头部 区域使用；3.外部引用 - 使用外部 CSS文件。一般而言，使用前两种方式都很少有问题，但在实际开发过程中，为了方便维护，HTML一般都是外部导入CSS样式的。因此，新手使用CSS样式遇到的问题一般是外部导入的CSS不起作用。新手先检查内部样式是否覆盖外部链的样...
解决HTML外部引用CSS文件不生效问题
热门推荐
果冻虾仁
03-20 6万+
作为一个前端小白，鼓捣了几天前端。。今天突然发现我深信不疑的东西，竟然出现了问题。。就比如我在css目录下面写了一个css样式文档：style.css。然后再我的html文件里面去引入这个外部css：在浏览器一刷新。。哇，kao。竟然没反应，不起作用。。我检查了好几遍这个路径确定没有问题，打开chrome的F12
HTML引入外部css失效解决
qq_43211318的博客
03-27 5387
这个问题，困惑我好久，但是偶然间想起是不是路径不对，然后我发现了只要在href中加入../即可，例： 解决一： <link rel="stylesheet" href="css/first.css"> 这个是我写的，但是他是失效的，解决方法如下： <link rel="stylesheet" href="../css/first.css"> 就是这样。具体原理大概就是文件夹有点多，他找不到，然后给他开个门出去找， 解决2：既然HTML找不到css文件，那么我把HTML文件
小白入门前端之HTML基础知识点（详细）
最新发布
2503_92718442的博客
07-11 695
HTML基础入门指南 HTML（超文本标记语言）是构建网页的基础技术，通过标签定义网页结构和内容。本文介绍了HTML的基础知识：1）基本框架结构，包括DOCTYPE、html、head、body等核心标签；2）常用文本标签（h1-h6、p、br等）和多媒体标签（img）；3）超链接（a）与列表（ol/ul）的用法；4）表格（table）创建与单元格合并技巧；5）表单（form）元素和输入控件（input）；6）块元素与内联元素的区别；7）div容器与HTML5新增语义化标签。文章包含代码示例和运行效果说明。
关于html引入css文件后没有效果问题
/
02-10 1万+
这个问题在我写前端的时候是一直会出现的，为了避免下次再次出现，有必要记录一下。通过外部样式表引入css文件到html中，会用到：（以下是这里的问题是标签可以有type属性，但是应该写成,也就是：（以下是照成上述原因是用vscode时快捷生成代码时敲了
html 空格不起作用,css不起作用是什么原因？
weixin_35810012的博客
06-07 1197
在写页面时，有时会发现自己写的css样式不起作用，这是怎么回事？css样式不起作用的原因是什么？下面本篇文章就来给大家介绍一些css样式不起作用的常见原因，希望对大家有所帮助。一、html标签没写完整，漏了“”或者“/”等这是版面设计失效的最常见原因之一。当我们了解到这是多少精致的版块设计失效的罪魁祸首时，总会大吃一惊。二、样式表保存的编码错误如果怀疑CSS表的编码错误，可以直接将css文件以ut...
html引用css文件无效,关于html引用文件无效。
weixin_42570484的博客
06-03 1278
因为项目做的是一个需要在不同的分辨率和电脑屏幕大小下执行的功能，所以我开始是在每个html里添加了如下图所示然后开始调兼容，刚开始是没发现，后来因为需要每个浏览器都看一下，后来发现了个纳闷的事情，如图：这个就是没有引入css文件的结果，麻烦请注意下，当前浏览器的比例视觉是100%的。当我试着把比例调为小一号的时候，样式就出现了，如图：同时，也能看到样式区，是可以看到选择的css样式文件是哪个：后来...
HTML外部引用CSS文件不生效原因分析及解决办法
01-19
作为一个前端小白，鼓捣了几...然后再我的html文件里面去引入这个外部css： XML/HTML Code复制内容到剪贴板 <link rel=stylesheet type=text/css href=css/style.css>  在浏览器一刷新。。哇，kao。竟然没
vue在index.html中引入静态文件不生效问题及解决方法
10-17
在遇到Vue在`index.html`中引入静态文件不生效的问题时，首先要检查静态文件是否位于`static`目录下，如果不是，需要将其移入或调整配置。其次，确认静态资源目录是否与配置文件中的设置一致，如果不一致，应相应地...
jsp 网站引入外部css或者js失效问题解决
10-21
首先，路径问题是指在引用外部CSS或JavaScript文件时，路径指定不正确，导致浏览器无法正确找到这些资源文件。在JSP中，通常使用标签来引入CSS文件，使用标签来引入JavaScript文件。例如，若要引入一个名为"login....
html css外接修改无效,HTML外部引用CSS文件为什么会不生效
weixin_29164081的博客
06-09 1760
HTML外部引用CSS文件为什么会不生效发布时间：2021-01-14 09:41:22来源：亿速云阅读：112作者：小新这篇文章将为大家详细讲解有关HTML外部引用CSS文件为什么会不生效，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。HTML外部引用CSS文件不生效的原因：1、没有关联外部CSS样式表文件或关联路径出错；2、样式表保存的编码错误，可以将css文...
html引用外部样式表无效果,HTML外部引用CSS文件不生效的原因,web项目引用css无效...
weixin_39771351的博客
06-03 4157
HTML外部引用CSS文件不生效的原因html外部引用CSS文件无效的原因，HTML外部引用CSS文件无效的原因：1。没有关联外部CSS样式表文件或关联路径错误；2.样式表的编码错误被保存。您可以将css文件保存为utf-8编码。教程： windows 7系统操作环境，html 5 css3版本，戴尔G3电脑。推荐：css视频教程HTML外部引用CSS文件不生效的原因1.外部CSS样式表文件没...
解决引入外部CSS无法生效。或者更改外部CSS样式不更新。
bigbugjusteasy的博客
11-13 775
如果发现CSS引入都没问题的话，CSS文件还是没有生效。进入浏览器jsp页面。在<head></head>标签里写入下面的代码引入外部CSS。将禁用缓存勾选，刷新几下。
HTML无法使用CSS文件
weixin_44401388的博客
09-02 276
<link rel="stylesheet" href="../ing/a.css"> 在文件路径前面加 ../
外部css样式不生效的原因
TOUCH963的博客
08-25 2307
这时候不会报错，对于基础知识不扎实的小白来说可能很难找到原因。可能是引用格式写错了。有的地方写成 “./”或者“../”2.css文件和html文件没有放在同一个文件夹中。(非科班小白自学记录第一帖，大佬轻喷)...
关于导入css样式 却不起作用解决方案
Islandww的博客
03-28 6712
rel="stylesheet"  在引入css样式的标签中 添加如上代码即可
html无法链接外部css文件路径,外部css不起作用是什么原因？
weixin_42512723的博客
06-19 4344
HTML使用CSS样式一共有如下三种方式：1.内联样式- 在HTML元素中使用"style"属性；2.内部样式表 -在HTML文档头部 区域使用；3.外部引用 - 使用外部 CSS文件。在实际开发过程中，为了方便维护，HTML一般都是外部导入CSS样式的。因此，新手使用CSS样式遇到的问题一般是外部导入的CSS不起作用。下面我们来看一下外部css不起作用的原因：一、外部css文件样式全部不起作用a...
css 不生效，这是什么情况？
weixin_42603332的博客
12-21 3182
有几种可能的原因导致 CSS 不生效： CSS 文件没有正确加载。检查你的 HTML 代码是否正确引用了 CSS 文件，并确保 CSS 文件的路径是正确的。 CSS 规则没有应用到相应的元素上。检查你的 CSS 代码是否正确地选择了相应的元素，并确保你的 CSS 规则的优先级足够高。 浏览器不支持你使用的 CSS 特性。确保你使用的 CSS 特性在目标浏览器中是受支持的。 CSS 被其他样...
如何在springboot项目中的HTML文件引入css文件
06-23
<think>我们正在处理用户在SpringBoot项目中引入CSS文件到HTML页面的问题。根据引用资料，我们需要区分HTML文件存放的位置（static目录还是templates目录）以及如何正确引用。关键点总结：1.静态资源（如CSS、JS、图片）应放在`src/main/resources/static`目录下。例如，CSS文件可以放在`static/css`文件夹中。2.HTML文件有两种存放位置：-如果放在`static`目录下（比如`static`下的某个子目录），那么可以直接像传统web项目一样使用相对路径引用。-如果放在`templates`目录下（通常用于模板文件，如Thymeleaf、Freemarker等），则需要使用模板引擎的语法来引用，不能使用普通的相对路径。根据引用[2]和[4]：当HTML文件在templates目录下时，直接引入CSS会失效。需要两个步骤：a.确保静态资源在static目录下。b.在HTML中使用模板引擎的语法（如Thymeleaf）来引用。引用[5]给出了一个使用Thymeleaf的示例：-在HTML头部添加命名空间：`xmlns:th="http://www.thymeleaf.org"`-使用`th:href`来引用CSS：`<linkth:href="@{~/static/css/empower.css}"rel="stylesheet">`注意：在Thymeleaf中，`@{}`用于处理URL，`~`表示上下文路径（可以省略，因为SpringBoot默认上下文是根路径）。所以也可以写成：`th:href="@{/css/empower.css}"`（假设CSS文件放在static/css目录下）。另外，引用[3]也指出：静态资源放在static下，HTML放在templates下，这是SpringBoot的默认扫描路径。引用[5]还特别提醒：不要使用`@RestController`来返回HTML页面，因为`@RestController`会将返回结果作为字符串直接输出，而不是渲染视图。应该使用`@Controller`。因此，解决方案如下：1.将CSS文件放在`src/main/resources/static/css`目录下（假设CSS文件名为styles.css）。2.将HTML文件放在`src/main/resources/templates`目录下。3.在HTML文件中使用Thymeleaf模板引擎来引入CSS（需要添加Thymeleaf命名空间并使用`th:href`）。4.使用`@Controller`注解的控制器来返回该HTML视图。示例：HTML文件（位于templates目录，例如index.html）：```html<!DOCTYPEhtml><htmllang="en"xmlns:th="http://www.thymeleaf.org"><head><metacharset="UTF-8"><title>Title</title><linkth:href="@{/css/styles.css}"rel="stylesheet"></head><body><h1>Hello,SpringBoot!</h1></body></html>```控制器示例：```java@ControllerpublicclassMyController{@GetMapping("/")publicStringindex(){return"index";//返回templates/index.html}}```如果用户没有使用模板引擎，而是将HTML放在static目录下，那么可以直接使用相对路径引入，但这样就不能使用动态模板功能了。所以，根据用户需求，我们推荐使用模板引擎（如Thymeleaf）的方式，因为这样更灵活，且符合SpringBoot对模板文件的管理。相关问题：1.在SpringBoot中，如何配置静态资源的访问路径？2.除了Thymeleaf，SpringBoot还支持哪些模板引擎？如何配置？3.如何解决SpringBoot中静态资源访问不到的问题？</think>### Spring Boot中HTML引入CSS文件的正确方法 在Spring Boot项目中，正确引入CSS文件取决于HTML文件的存放位置和是否使用模板引擎。以下是详细解决方案： #### 1. **HTML文件位于`static`目录（纯静态资源）** 当HTML文件放在`src/main/resources/static`目录时，直接使用传统方式引入： ```html <!DOCTYPE html> <html> <head> <!-- 直接使用相对路径 --> <link rel="stylesheet" href="css/styles.css"> </head> <body>...</body> </html> ``` - ✅ 文件结构： ``` src/main/resources/ └── static/ ├── css/styles.css └── index.html ``` #### 2. **HTML文件位于`templates`目录（需模板引擎）** 当使用Thymeleaf等模板引擎时（文件在`src/main/resources/templates`），必须通过模板语法引入[^3][^5]： ```html <!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <!-- 添加命名空间 --> <head> <!-- 使用Thymeleaf的URL语法 --> <link th:href="@{/css/styles.css}" rel="stylesheet"> </head> <body>...</body> </html> ``` - ✅ 文件结构： ``` src/main/resources/ ├── static/ │ └── css/styles.css └── templates/ └── index.html ``` #### 3. **关键注意事项** - **控制器注解**：返回HTML视图的控制器必须使用`@Controller`而非`@RestController`[^5]： ```java @Controller // 正确 public class MyController { @GetMapping("/") public String home() { return "index"; // 返回templates/index.html } } ``` - **路径原则**： - `@{/css/...}`中的`/`指向`static`目录根路径 - 无需包含`static`字眼（Spring Boot自动映射） - **缓存问题**：开发阶段建议关闭缓存（`application.properties`）： ```properties spring.thymeleaf.cache=false ``` #### 4. **常见问题解决** - **404错误**： 1. 确认CSS文件在`static/css`目录下 2. 检查是否误用`@RestController` 3. 清除浏览器缓存（强制刷新Ctrl+F5） - **路径错误示例**： ```html <!-- 错误：多写了static目录名 --> <link th:href="@{/static/css/styles.css}" ...> ❌ ``` > **总结选择方案**： > - 纯静态页面 → 放`static`目录 + 传统`<link>`引入 > - 动态模板页面 → 放`templates`目录 + Thymeleaf语法`th:href="@{/css/...}"`
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值