jsp中使用外部CSS

最新推荐文章于 2021-05-31 14:27:26 发布

原创最新推荐文章于 2021-05-31 14:27:26 发布 · 4k 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#css #jsp

SSH学习之旅专栏收录该内容

3 篇文章

订阅专栏

本文介绍了在JSP中遇到外部CSS无法加载的问题及其解决方法。问题源于CSS文件URL无效，通过获取服务器基地址并结合CSS路径，使用绝对URL来引用CSS，从而确保在JSP中正确加载。

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

问题的描述

初次接触JSP的同学可能会遇到在JSP中使用外部CSS时无效的问题，出现这种问题的本质是因为被访问的CSS文件URL无效。

环境介绍

1. 项目结构如图：
这里写图片描述

2. result.jsp内容如下：

<%@page import="java.io.IOException"%>
<%@page import="java.util.List"%>

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset=UTF-8 />
<title>Insert title here</title>
<link rel="stylesheet" href="../css/result.css" />
</head>
<body>
    <h1> Beer Recommendations JSP</h1>
    <p>
       <% 
          List<String> styles = (List<String>)request.getAttribute("styles");
          for(String s : styles){
              out.print("<br/>try: " + s);
          }
       %>
       <%= basePath %>
    </p>
</body>
</html>

问题解答

1. 我们在result.jsp中使用了传统的方式用相对寻址的方式定位CSS文件：<link rel="stylesheet" href="../css/result.css"/>，这种寻址方式对属于动态页面的JSP来说是行不通的，可行的方式是使用完整的URL来访问CSS文件。
2. 得到服务器基地址的方式: 在result.jsp的<!DOCTYPE thml>之上输入：

<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

此时即可生成服务器的基地址，对于本机来说，basePath的值为：http://localhost:8888/html5/，由这个基地址结合服务器上CSS的存放位置即可得到目标CSS文件的完整URL：http://localhost:8888/html5/css/result.css。实际填写时应该改为如下形式：

<link rel="stylesheet" href="<%= basePath+"css/result.css" %>"/>

3. 完整的result.jsp内容如下：

<%@page import="java.io.IOException"%>
<%@page import="java.util.List"%>

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE html>
<html>
<head>
<meta charset=UTF-8 />
<title>Insert title here</title>
<link rel="stylesheet" href="<%= basePath+"css/result.css" %>" />
</head>
<body>
    <h1> Beer Recommendations JSP</h1>
    <p>
       <% 
          List<String> styles = (List<String>)request.getAttribute("styles");
          for(String s : styles){
              out.print("<br/>try: " + s);
          }
       %>
       <%= basePath %>
    </p>
</body>
</html>