我正在使用JSF / Facelets开发一个项目。我想在我的View XHTML上做一些CSS更改,但是当我在Tomcat服务器中部署我的Web应用程序时,没有任何事情发生。我尝试了很多技巧,但我得到了相同的结果。
无论如何,这里是我的“styles.css”:
- body { width: 750px; }
- #header
- {
- width: 100%;
- font-size: 36px;
- font-weight: bold;
- line-height: 48px;
- background-color: navy;
- color: white;
- }
- #footer
- {
- width: 100%;
- font-weight: bold;
- background-color: navy;
- color: white;
- }
这是“Template.html”的主要模板,包括“Header.html”和“Footer.html”,其中我使用标签将“styles.css”
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
- "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml"
- xmlns:f="http://java.sun.com/jsf/core"
- xmlns:h="http://java.sun.com/jsf/html"
- xmlns:ui="http://java.sun.com/jsf/facelets">
- <head>
- <h:outputStylesheet name="css/styles.css" />
- <!-- i've also tried this one,using the "library" attribute -->
- <!--
- <h:outputStylesheet library="css" name="styles.css" />
- -->
- </head>
- <h:body>
- <h:panelGroup id="page" layout="block">
- <h:panelGroup id="header" layout="block">
- <ui:insert name="header">
- <ui:include src="Header.html" />
- </ui:insert>
- </h:panelGroup>
- <h:panelGroup id="container" layout="block">
- <h:panelGroup id="content" layout="block">
- <ui:insert name="content">CONTENT</ui:insert>
- </h:panelGroup>
- </h:panelGroup>
- <h:panelGroup id="footer" layout="block">
- <ui:insert name="footer">
- <ui:include src="Footer.html" />
- </ui:insert>
- </h:panelGroup>
- </h:panelGroup>
- </h:body>
- </html>
Anf终于在这里是我的“Main.xhtml”,其中包含模板“Template.html”:
- <?xml version="1.0" encoding="UTF-8"?>
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <ui:composition xmlns="http://www.w3.org/1999/xhtml"
- xmlns:f="http://java.sun.com/jsf/core"
- xmlns:h="http://java.sun.com/jsf/html"
- xmlns:ui="http://java.sun.com/jsf/facelets"
- xmlns:a4j="http://richfaces.org/a4j"
- xmlns:rich="http://richfaces.org/rich" template="Template.html">
- <h:body>
- <ui:define name="content">
- <h:form>
- <h:inputText title="inputText"></h:inputText>
- <h:commandButton value="OK"></h:commandButton>
- </h:form>
- </ui:define>
- </h:body>
- </ui:composition>
提前致谢 :)
解决方法
< h:outputStylesheet> (和< h:outputScript>)需要< h:head>,但是你有< head>。相应地修复它。
- <h:head>
- <h:outputStylesheet name="css/styles.css" />
- </h:head>
此外,您需要确保将css / styles.css文件放在public webcontent的/ resources子文件夹中。
- WebContent
- |-- resources
- | `-- css
- | `-- styles.css
- :
至于您尝试使用库属性,请小心,在此上下文中使用library =“css”并不完全正确。参见:What is the JSF resource library for and how should it be used?