JSF/Facelets：使用<h:outputStylesheet>标签时，CSS文件未被识别

Question

JSF/Facelets：使用<h:outputStylesheet>标签时，CSS文件未被识别

20

我正在使用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”，我使用<link>标签将我的“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>

最后，这是我的 "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>

提前感谢您 :)

- ayoubuntu

1

请问您能否在浏览器中验证您的 CSS 是否已经加载？ - Abhi

1

在浏览器中右键单击页面，选择“查看源代码”，或者在Chrome/IE9/Firebug中按F12，在“网络”部分检查。 - BalusC

2个回答

-4

在WebContent下添加一个resources文件夹，在resources文件夹中创建css文件夹，然后像这样访问文件： h：outputStylesheet库=“css”名称=“myNewStylesFile.css”目标=“head” 在你没有添加的h:head部分下。

- Aman birjpuriya

3

我给出负面评价是因为我认为这是垃圾信息，这个回答跟BalusC的回答很相似，只是把一些词语删掉了而已，并且比BalusC晚回答了三年。 - Jean-François Savard

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- BalusC · Accepted Answer

<h:outputStylesheet>（以及<h：outputScript>）需要一个<h：head>，但是您使用的是<head>。请相应地进行修复。

<h:head>
    <h:outputStylesheet name="css/styles.css" />
</h:head>

此外，您需要确保 css/styles.css 文件已被放置在公共 Web 内容的 /resources 子文件夹中。

WebContent
 |-- resources
 |    `-- css
 |         `-- styles.css
 :

关于您试图使用 library 属性的尝试，请注意在这种情况下使用 library="css" 不完全正确。请参见：What is the JSF resource library for and how should it be used?