css文件的引用问题
今天又犯了css引用路径出错的问题，现在把它揪出来。
新建一个项目test
在WebContent文件下新建一个css文件夹
css文件家中新建system.css文件
-WebContent
-css
-system.css
system.css
A{
text-decoration: none;
font-family: Helvetica;
font-size: 1.2em;
color: #34fe64;
}
在WebContent新建test.jsp
test.jsp
<%@ page language="java" contentType="text/html; charset=Utf-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>test</title>
</head>
<body>
<a href="login.do">hello the world</a>
</body>
</html>
刚开始我直接
<link rel="stylesheet" href="../css/system.css" type="text/css" />
分析后发现["../css/system.css]中【..】
代表的意思是根目录
引用的文件应该和system.css是同样的深度。
-WebContent
-css
-system.css
-jsp
-test2.jsp
test2.jsp引用时需要使用
<link rel="stylesheet" href="../css/system.css" type="text/css" />
或者
<link rel="stylesheet" href="/test/css/system.css" type="text/css" />
假如文件是和css文件夹是同层
比如
-WebContent
-css
-system.css
-index.jsp
则引用system.css时应为
<link rel="stylesheet" href="./css/system.css" type="text/css" />
或者为
<link rel="stylesheet" href="css/system.css" type="text/css" />
假如文件是和system.css是同层并且是同个文件夹
比如
-WebContent
-system2.css
-index.jsp
则引用system2.css时 应为：
<link rel="stylesheet" href="./system.css" type="text/css" />
或者
<link rel="stylesheet" href="system.css" type="text/css" />
建议加上前缀[./]
代表相对路径
分享到：
相关推荐
解决：build->utils.js里，修改：增加 publicPath:'../../', if (options.extract) { ...以上这篇解决vuejs项目里css引用背景图片不能显示的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也
在Unigui中，正确配置CSS引用路径对于实现美观且响应式的用户界面至关重要。 1. **基本概念** - CSS：是一种用于描述HTML或XML（包括如SVG、MathML等各种XML方言）文档样式的样式表语言。 - Unigui：一个基于...
link 和 @import 引用 CSS 文件方法的区别 在 HTML 中，-link 和 @import 是两种常用的引用 CSS 文件的方法，但它们之间存在着一些区别。在本文中，我们将详细介绍这两种方法的异同。 一、link 元素 link 元素是 ...
以下是一些关键的邮件内CSS引用规则及其背后的逻辑： 首先，避免引用外部CSS文件。这是因为许多邮件客户端，如Outlook，会忽略或剥离外部样式表链接，导致邮件样式失效。例如，下面的代码是错误的引用方式： ```...
css小图标
1. CSS 的引入和基本选择器应用； 2. 利用CSS 对网页进行控制； 3. 利用W3school 网站进行CSS 的练习。 4. 用CSS 完成常见的几种网页布局形式的练习； 5. 使用Div+CSS，完成“实习二”中“index.htm”页面的布局； 6...
综上所述，“Ajax代码引用页面_样式表CSS”不仅是关于如何在动态网页中引用CSS的基本技术，更涉及了确保网页在异步操作后保持一致性和美观度的关键实践。掌握这一技能，不仅有助于提升网站的用户体验，也是现代Web...
今天突然发现我深信不疑的东西，竟然出现了问题。。就比如我在css目录下面写了一个css样式文档：style.css。这时里面只有一句话： XML/HTML Code复制内容到剪贴板 body { background-color: #ddd; } ...
"非常好看的CSS加载中特效，引用css文件既可用"这个标题暗示了一个简单的解决方案，即通过引入一个CSS文件，就可以在网页中实现吸引人的加载动画。这通常涉及到CSS3的新特性，如关键帧动画（@keyframes）、过渡...
VS开发时候有大小写匹配、全字匹配、正则表达式，但你想知道他是怎么实现吗？这里有是否采用正则表达式选项。查找最后，把查找到的结果一...用处：查找html引用的js和css是否有重复引用，并在列表里用红色颜色标识出来
导致设计师在没有定义某个CSS属性时，不同的浏览器会按照自己的默认值来为没有定义的样式赋值，所以我们要先定义好一些CSS样式，来让所有浏览器都按照同样的规则解释CSS，这样就能避免发生这种问题。 目前有很多...
jsp 文件中引用外部.css 或.js 文件的路径问题 在 Web 开发中，引用外部的.css 或.js 文件是非常常见的操作。然而，在 jsp 文件中引用外部.css 或.js 文件的路径问题却是很多开发者容易忽视的细节。本文将详细讲解...
在SpringBoot应用中，开发人员经常遇到一个常见问题，即在尝试访问页面时，CSS、JavaScript等静态资源引用失效。这通常是因为SpringBoot的默认资源配置导致的。在本篇文章中，我们将深入探讨这个问题的原因以及解决...
该插件确保了向后兼容性，使得开发者可以放心地使用CSS Variables，而不必担心在不支持这一特性的浏览器中的兼容问题。 **使用方法**： 要在项目中使用Postcss-css-variables，首先需要安装PostCSS及其插件，通常会...
动态引用外部JS和CSS文件是提升网页加载效率和灵活性的一种常见技术。下面将详细介绍这个知识点。 首先，我们理解静态引用和动态引用的区别。静态引用通常在HTML文档中通过`<script>`和`<link>`标签完成，例如： `...
Element-ui css非网络引用 <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css1"> <link rel="stylesheet" href="/js/vue/index.css"> ...
只需通过CSS类名引用，即可在页面中显示对应的图标。 在实际开发中，layui的引用方式通常是将layui.js和layui.css链接添加到HTML头部，确保在页面加载时能正确解析和应用样式及脚本。同时，需要确保font图标所在的...
8. **浏览器兼容性**：虽然CSS是标准，但不同浏览器对某些特性的支持程度不一，因此需要了解各浏览器的兼容性问题，以及如何使用前缀或者工具来解决这些问题。 总的来说，这个资源包提供了学习和实践CSS布局的好...
html页面动态加载，删除，替换 js/css引用