html – JSF/Facelets:使用标签不能识别CSS文件

前端之家收集整理的这篇文章主要介绍了html – JSF/Facelets:使用标签不能识别CSS文件前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在使用JSF / Facelets开发一个项目。我想在我的View XHTML上做一些CSS更改,但是当我在Tomcat服务器中部署我的Web应用程序时,没有任何事情发生。我尝试了很多技巧,但我得到了相同的结果。

无论如何,这里是我的“styles.css”:

  1. body { width: 750px; }
  2.  
  3. #header
  4. {
  5. width: 100%;
  6. font-size: 36px;
  7. font-weight: bold;
  8. line-height: 48px;
  9. background-color: navy;
  10. color: white;
  11. }
  12.  
  13. #footer
  14. {
  15. width: 100%;
  16. font-weight: bold;
  17. background-color: navy;
  18. color: white;
  19. }

这是“Template.html”的主要模板,包括“Header.html”和“Footer.html”,其中我使用标签将“styles.css”

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml"
  4. xmlns:f="http://java.sun.com/jsf/core"
  5. xmlns:h="http://java.sun.com/jsf/html"
  6. xmlns:ui="http://java.sun.com/jsf/facelets">
  7. <head>
  8. <h:outputStylesheet name="css/styles.css" />
  9. <!-- i've also tried this one,using the "library" attribute -->
  10. <!--
  11. <h:outputStylesheet library="css" name="styles.css" />
  12. -->
  13. </head>
  14. <h:body>
  15. <h:panelGroup id="page" layout="block">
  16.  
  17. <h:panelGroup id="header" layout="block">
  18. <ui:insert name="header">
  19. <ui:include src="Header.html" />
  20. </ui:insert>
  21. </h:panelGroup>
  22.  
  23. <h:panelGroup id="container" layout="block">
  24. <h:panelGroup id="content" layout="block">
  25. <ui:insert name="content">CONTENT</ui:insert>
  26. </h:panelGroup>
  27. </h:panelGroup>
  28.  
  29. <h:panelGroup id="footer" layout="block">
  30. <ui:insert name="footer">
  31. <ui:include src="Footer.html" />
  32. </ui:insert>
  33. </h:panelGroup>
  34.  
  35. </h:panelGroup>
  36.  
  37. </h:body>
  38. </html>

Anf终于在这里是我的“Main.xhtml”,其中包含模板“Template.html”:

  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <ui:composition xmlns="http://www.w3.org/1999/xhtml"
  4. xmlns:f="http://java.sun.com/jsf/core"
  5. xmlns:h="http://java.sun.com/jsf/html"
  6. xmlns:ui="http://java.sun.com/jsf/facelets"
  7. xmlns:a4j="http://richfaces.org/a4j"
  8. xmlns:rich="http://richfaces.org/rich" template="Template.html">
  9. <h:body>
  10. <ui:define name="content">
  11. <h:form>
  12. <h:inputText title="inputText"></h:inputText>
  13. <h:commandButton value="OK"></h:commandButton>
  14. </h:form>
  15. </ui:define>
  16. </h:body>
  17. </ui:composition>

提前致谢 :)

解决方法

< h:outputStylesheet> (和< h:outputScript>)需要< h:head>,但是你有< head>。相应地修复它。
  1. <h:head>
  2. <h:outputStylesheet name="css/styles.css" />
  3. </h:head>

此外,您需要确保将css / styles.css文件放在public webcontent的/ resources子文件夹中。

  1. WebContent
  2. |-- resources
  3. | `-- css
  4. | `-- styles.css
  5. :

至于您尝试使用库属性,请小心,在此上下文中使用library =“css”并不完全正确。参见:What is the JSF resource library for and how should it be used?

猜你在找的HTML相关文章