logo标签列表

如何将CSS文件加载到JSP中

javajsp-tags
34

我创建了一个 JSP 页面，内容如下：

<%@ page contentType="text/css" %>
<html>
<head>
<title>Login page</title>
<link href="/css/loginstyle.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1> India welfare</h1>
<p> welcome </p>
</body>
</html>

我创建了一个名为login.jsp的文件。

同时，我还创建了一个名为 loginstyle.css 的 CSS 文件，其中代码如下：

body
{
background-color:#d0e4fe;
}
h1
{
color:orange;
text-align:center;
}
p
{
font-family:"Times New Roman";
font-size:20px;
}

css文件和jsp文件的目录结构如下： webcontent/welfare_web/css 用于 .css 文件， webcontent/welfare_web/login 用于 jsp 文件。

我使用的编程编辑器是 eclipse，服务器是 tomcat 7.0。 当我尝试使用 tomcat 服务器运行 login.jsp 文件时，css 文件没有任何效果。我的意思是输出为普通文本，并不按照 css 文件的样式输出。

请教如何使 .css 文件影响 jsp 文件。

7个回答
35

css href链接不正确。请使用相对路径：

<link href="../css/loginstyle.css" rel="stylesheet" type="text/css">
32

我使用这个版本

<style><%@include file="/WEB-INF/css/style.css"%></style>
32

你可以这样写。这是为了每当你更改上下文路径时，你不需要修改你的jsp文件。

<link rel="stylesheet" href="${pageContext.request.contextPath}/css/styles.css" />
10

我之前也遇到了同样的问题。后来发现在MainPageServlet中，@WebServlet注解的urlPatterns参数包含"/"，因为我想要在用户访问网站主页www.site.com/时转发到主页面。当我尝试从浏览器打开css文件时，URL是www.site.com/css/desktop.css，但页面内容却是主页MainPage.jsp。所以，我移除了"/" URL模式，现在可以使用最常见的方法之一(${pageContext.request.contextPath}/css/desktop.css)在jsp文件中使用CSS文件。 确保你的servlet不包含"/" urlPattern。 希望这对你也有用， - Axel Montini

2
如果一切看起来都正确，但仍然无法正常工作，我建议您像这样在web.xml中加载静态文件。
<servlet-mapping>
    <servlet-name>default</servlet-name>
    <url-pattern>/includes/*</url-pattern>
</servlet-mapping>

之后

<!-- bootstrap css -->
<link rel="stylesheet" type="text/css" href="/includes/asserts/css/bootstrap.min.css"/>
0

使用这个，我用过了

   <style><%@include file="/WEB-INF/view/style/style.css"%></style>
0

关于 CSS：

<link href="css/bootstrap.css" rel="stylesheet" type="text/css">

对于JS：

<script type="text/javascript" src="js/bootstrap.js"></script>

文件位置：

└───src
    └───main
        ├───java
        └───webapp
            ├───css/bootstrap.css
            ├───js/bootstrap.js
            ├───META-INF
            └───WEB-INF/index.jsp
                └───lib

css-js file location JSP

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接