我刚刚开始使用 JSF 2.0，遇到了一个非常受欢迎的问题。我使用了模板和模板客户端，并将 CSS（应该提到我不是 CSS 专家）样式应用于模板文件。当我运行应用程序时，一切都很好，但是当页面被提交或重新加载或导航到另一个页面时，按下页面上的任何链接或按钮，没有应用任何样式，只显示纯 HTML。我该如何克服这个问题？
模板文件：
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="resources/css/default.css" rel="stylesheet" type="text/css" />
<link href="resources/css/cssLayout.css" rel="stylesheet" type="text/css" />
<title>
<ui:insert name="title">Facelets Template</ui:insert>
</title>
</h:head>
<h:body>
<div id="top" class="top">
<ui:insert name="top">Top</ui:insert>
</div>
<div id="left">
<ui:insert name="left">left</ui:insert>
</div>
<div id="content" class="left_content">
<ui:insert name="content">Content</ui:insert>
</div>
</h:body>
</html>
客户端模板：
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html">
<body>
<ui:composition template="./../templates/TutorialsStructure.xhtml">
<ui:define name="title">
Start
</ui:define>
<ui:define name="top">
<h:graphicImage value="Image/butterfly.gif" style="alignment-adjust: central"/>
</ui:define>
<ui:define name="left">
</ui:define>
<ui:define name="content">
<h:form>
<div>
<p>
<div>
<h:outputLabel id="outputlabel_userName" for="inputText_userName" >
<h:outputText id="output_userName" value="UserName: "/>
</h:outputLabel>
</div>
<div>
<h:inputText size="35" id="inputText_userName" value="# {inputOutputBean.userName}"/>
</div>
</p>
<p>
<div>
<h:outputLabel id="outputlabel_password" for="inputsecret_password">
<h:outputText id="output_password" value="Password: "/>
</h:outputLabel>
</div>
<div>
<h:inputSecret id="inputsecret-password"
value="#{inputOutputBean.password}"
required="true"
requiredMessage="This Field is obligatory."
size="35">
</h:inputSecret>
</div>
</p>
<div id="submitBtn">
<h:commandButton value="Submit" id="submitBtn"/>
</div>
</div>
<div id="results_output" styleClass="results">
<div>
<h:outputLabel id="label_userName" styleClass="userNameResult" for="userNameResult"
value="User Name: "
style="height: 500px; padding: 2em 2em 2em 2em"/>
<h:outputText value="#{inputOutputBean.userName}" id="userNameResult" >UserName Value:</h:outputText>
</div>
<div>
<h:outputLabel id="outputlabel_password_res"
value="Password Value: " for="output_password_res"
style="height: 500px; padding: 2em 2em 2em 2em"/>
<h:outputText value="#{inputOutputBean.password}" id="output_password_res"/>
</div>
</div>
</h:form>
</ui:define>
</ui:composition>
</body>
</html>
和 CSS：
#top {
position: relative;
background-color: #036fab;
color: white;
padding: 5px;
margin: 0px 0px 10px 0px;
}
#bottom {
position: relative;
background-color: #c2dfef;
padding: 5px;
margin: 10px 0px 0px 0px;
}
#left {
float: left;
background-color: #ece3a5;
padding: 5px;
width: 150px;
border-bottom-width: 5px;
}
#right {
float: right;
background-color: #ece3a5;
padding: 5px;
width: 150px;
}
.center_content {
position: relative;
background-color: #dddddd;
padding: 5px;
float: left;
position:relative;
}
.left_content {
background-color: #dddddd;
padding: 5px;
margin-left: 170px;
float: right;
position: relative;
float: left;
left: 5px;
}
.right_content {
background-color: #dddddd;
padding: 5px;
margin: 0px 170px 0px 170px;
}
#top a:link, #top a:visited {
color: white;
font-weight : bold;
text-decoration: none;
}
#top a:link:hover, #top a:visited:hover {
color: black;
font-weight : bold;
text-decoration : underline;
}
#content{
}
#testID{
background-color: #111111;
float: right;
padding: 10em 10em 10em 10em;
}
谢谢，