如何处理JSP片段的css



我正在用JSP编写我的第一个动态网页。现在我有一个正在工作的index.JSP,没有标题。我写了一个header.jspf,看起来像这样:

<header>
<div id="head">
<img src="images/header/logo.png" alt="logo">
<h1>Rewards</h1>
</div>
</header>

我把标题包括在索引中。JSP中有这样一行:<%@ include file="header.jspf" %>,就在正文后面。但现在我想知道。我应该把那个页眉的css放在哪里。我可以把它放在header.JSPF中,但如果我这样做,当服务器"构建"页面时,它就会被插入正文中。我可以将它放在index.JSP页面内的<head>标记中,但每次使用该片段时都应该包含css。

是否有将css"链接"到header.jspf,并且每次我包含标头时,服务器都会自动知道它应该包含标头的css,而无需我每次在jsp中键入,我需要该css文件作为标头?

=================================================

编辑:@San Krish

我想,如果我包括我的css:,我的header.jspf会是这样的

<link rel="stylesheet" type="text/css" href="cssFiles/header.css">
<header>
<div id="head">
<img src="images/header/logo.png" alt="logo">
<h1>Rewards</h1>
</div>
</header>

然而,问题是,当我这样做时,<link rel="stylesheet" type="text/css" href="cssFiles/header.css">被插入到我的index.jspbody中,这不是有效的HTML。

=================================================

第2版:我已经删除了jspf并创建了一个header.jsp文件,它看起来像这样(我复制了所有内容,我不知道它是否完整)

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<head>
<link rel="stylesheet" type="text/css" href="cssFiles/header.css">
</head>
<body>
<div id="head">
<img id="logo" src="images/header/logo.png" alt="logo">
<h1>Reward</h1>
</div>
</body>

然后,我没有在索引页中包含jspf:<%@ include file="header.jsp" %>但是css仍然包含在正文中:(.

有没有将css"链接"到header.jspf,每次我都包含头,服务器自动知道它应该包括用于标题

jspf文件不是自己编译的,因此它需要与其他jsp文件一起执行。

您可以在common.jsp中包括常见的cssjs文件,这样所有使用header.jspf的其他文件都将失去链接常见cssjs文件的负担。

更新:

我已经删除了jspf并创建了一个header.jsp文件,然后包括我所做的索引页中的jspf:<%@包括file="header.jsp"%>但是css仍然包含在机身

您已经在index.jsp中包含了带有css的header.jsp,这就像将html页面重新排列到另一个html页面中,如下所示,

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <!-- when the app server interprets the jsp you have included it simply interprets like below -->
    <html>
<head>
<link rel="stylesheet" type="text/css" href="cssFiles/header.css">
</head>
<body>
    <div id="head">
        <img id="logo" src="images/header/logo.png" alt="logo">
            <h1>Reward</h1>
    </div>
</body>
<html>
<h1>Content of the index page</h1>
</body>
</html>

jsp包含预编译的java代码,而不是类似于html的代码,所以您不必担心它将把css文件放在哪里(浏览器的工作是将外部css渲染到head标记中,这将正常发生)

文档摘录,

jsp:include操作插入额外的静态或动态资源当页面被显示时,在请求时间将其插入页面。指定具有相对URL的资源(页面相对或应用程序相关)。

了解更多信息:

  • javaee的启动教程
  • 了解Web应用程序、Servlet和JSP
  • jsp:include

最新更新