Jsp页面不接受Spring Mvc项目下的css规则（在Tomcat 7上运行）答案

【问题标题】：Jsp page is not accepting css rules under Spring Mvc project (running on Tomcat 7)Jsp页面不接受Spring Mvc项目下的css规则（在Tomcat 7上运行）
【发布时间】：2013-08-02 16:35:19
【问题描述】：

我正在尝试在 spring mvc 环境下运行的 jsp 页面中应用 css 规则。 webapp/css/mystyles.css：

.center{
    margin: auto; text-align: center;
}

h1{
    color: red;
}

webapp/WEB-INF/jsp/Layout.jsp：

<%@ taglib prefix="tiles" uri="http://tiles.apache.org/tags-tiles" %>

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title><tiles:insertAttribute name="title" ignore="true"/></title>
    <link rel="stylesheet" type="text/css" href="../../css/mystyles.css" media="screen" />
</head>
<body>
    <table border="1" cellspacing="2" align="center">
        <tr>
            <td height="30" colspan="2">
                <tiles:insertAttribute name="header"/>
            </td>
        </tr>
        <tr>
            <td height="250" width="150">
                <tiles:insertAttribute name="menu"/>
            </td>
            <td width="400">
                <tiles:insertAttribute name="body"/>
            </td>
        </tr>
        <tr>
            <td height="30" colspan="2">
                <tiles:insertAttribute name="footer"/>
            </td>
        </tr>
    </table>
</body>
</html>

这是我使用 firebug 获得的网页代码的一部分：

<head>
<title>Being Java Guys | Tiles Integration</title>
<link media="screen" href="../../css/mystyles.css" type="text/css" rel="stylesheet">
<html><head><title>Apache Tomcat/7.0.35 - Error report</title><style><!--H1 {font-family:Tahoma,Arial,sans-serif;color:white;background-color:#525D76;font-size:22px;} H2 {font-family:Tahoma,Arial,sans-serif;color:white;background-color:#525D76;font-size:16px;} H3 {font-family:Tahoma,Arial,sans-serif;color:white;background-color:#525D76;font-size:14px;} BODY {font-family:Tahoma,Arial,sans-serif;color:black;background-color:white;} B {font-family:Tahoma,Arial,sans-serif;color:white;background-color:#525D76;} P {font-family:Tahoma,Arial,sans-serif;background:white;color:black;font-size:12px;}A {color : black;}A.name {color : black;}HR {color : #525D76;}--></style> </head><body><h1>HTTP Status 404 - </h1><HR size="1" noshade="noshade"><p><b>type</b> Status report</p><p><b>message</b> <u></u></p><p><b>description</b> <u>The requested resource is not available.</u></p><HR size="1" noshade="noshade"><h3>Apache Tomcat/7.0.35</h3></body></html>
</link>
</head>

<div class="center">
<h1>Header</h1>
</div>

很遗憾，我没有收到红色标题。

【问题讨论】：

浏览器是否读取css文件？
如何检查？
在浏览器的调试器下调用页面。 FireFox、Chrome 和 IE（当前版本）都有。它们在调试器中有一个标签，可以向您显示实际加载了哪些文件以及哪些文件加载失败。
是的。 Firebug 运行良好。我认为有一个“网络”选项卡。标签在右边，可能在最后一个。
我启用了网络标签，但它什么也没显示。

标签： spring spring-mvc tomcat7 tiles

【解决方案1】：

您必须更改某些内容才能加载 css 文件。

Tomcat 在“../../css/mystyles.css”（在 firebug 的 net 选项卡中显示为 http://localhost/css/mystyles.css）中找不到它，因此标签中的 URL 要么错误，要么 Tomcat设置错误。

提示：您可以在浏览器地址栏中输入 css 文件的 URL，以便在更改 Tomcat 配置或加载文件时更轻松地尝试各种操作。

【讨论】：

【解决方案2】：

您正在弄乱服务器端文件位置和 URL。

在服务器端 /WEB-INF/pages/../../css/mycss.css 将是您的 css，但不是当它是由浏览器呈现的页面时。因为在浏览器上，您的 JSP URL 是另一回事。

你应该在你的<head> 中有一个<base> 标记来指定相对 URL 目标，然后指定相对于该目标的 URL。

【讨论】：

请检查我的原始帖子及其 cmets。我只想提供静态内容，但我还没有设法做到。

【解决方案3】：

请在css文件路径前添加应用的上下文路径。

<%@ taglib prefix="tiles" uri="http://tiles.apache.org/tags-tiles" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<c:set var="contextPath" scope="request" value="${pageContext.request.contextPath}" />

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title><tiles:insertAttribute name="title" ignore="true"/></title>
    <link rel="stylesheet" type="text/css" href="${contextPath}/css/mystyles.css" media="screen" />
</head>
<body>
    <table border="1" cellspacing="2" align="center">
    <tr>
        <td height="30" colspan="2">
        <tiles:insertAttribute name="header"/>
        </td>
    </tr>
    <tr>
        <td height="250" width="150">
        <tiles:insertAttribute name="menu"/>
        </td>
        <td width="400">
        <tiles:insertAttribute name="body"/>
        </td>
    </tr>
    <tr>
        <td height="30" colspan="2">
        <tiles:insertAttribute name="footer"/>
        </td>
    </tr>
    </table>
</body>
</html>

【讨论】：