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

发布时间：2020-12-14 21:29:51 所属栏目：资源来源：网络整理

导读：我正在使用JSF / Facelets开发一个项目。我想在我的View XHTML上做一些CSS更改，但是当我在Tomcat服务器中部署我的Web应用程序时，没有任何事情发生。我尝试了很多技巧，但我得到了相同的结果。无论如何，这里是我的“styles.css”： body { width: 750px;

我正在使用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?

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!