如何在jsf中正确使用css？答案

【问题标题】：how to properly use css in jsf?如何在jsf中正确使用css？
【发布时间】：2014-07-27 07:13:41
【问题描述】：

我有这个 JSF 页面，其中包含一个可以正常工作的 css 文件，但是，当我添加表单标签时，css 不适用于 jsf。有人可以帮我吗？

<f:view contentType="text/html">
    <h:head>
        <h:outputStylesheet library="css" name="LoginCss.css" />
    </h:head>

    <h:body>
         <h:form id="loginForm"> 
              <p:outputLabel id="usernameLabel" value="User name: " />
              <p:inputText id="usernameInput" value=""/> <br/> <br/>

              <p:outputLabel id="passwordLabel" value="Password: " />
              <p:inputText id="passwordInput" value=""/> <br/> <br/>
         </h:form>
    </h:body>

</f:view>

【问题讨论】：

很抱歉，缺少一个
。它是：“当我添加
标签 css 不...”
如果您在浏览器中打开源代码，请尝试单击生成的指向 css 文件的链接。如果它没有输出有问题的 CSS 文件，则您的链接已损坏。
对不起，我没抓到你，什么链接？我在浏览器中查看源代码，有css的url。所以我不确定它是否坏了。
我的问题是，当我添加
标签时，css 不起作用。我该怎么办？
在那种情况下，我认为您在 css 中做了非常具体的声明。尝试更改这些，至少出于测试目的。例如添加#usernameInput { border: 10px solid red; }

标签： css jsf jsf-2 primefaces

【解决方案1】：

只是为了详细说明 BalusC 的评论：添加表单后，JSF 会将表单的 id 添加到其子 id 的前面，因此第一个 inputText 现在将具有id="loginForm:usernameInput"（如您所见，“显示源”或在浏览器中类似）。

由于这破坏了样式，我希望您当前使用 id 进行样式设置。更好的做法是改用styleClass 属性。此外，您可能希望将 inputText 绑定到 value 属性中的 bean 属性。进一步的建议是使用p:panelGrid 和p:password 作为密码：

.usernameInput {
    ...
}
.passwordInput {
    ...
}

和

<p:panelGrid columns="2">
    <p:outputLabel id="usernameLabel" for="usernameInput" value="User name: " />
    <p:inputText id="usernameInput" styleClass="usernameInput" value="#{bean.username}"/>
    <p:outputLabel id="passwordLabel" for="passwordInput" value="Password: " />
    <p:password id="passwordInput" styleClass="passwordInput" value="#{bean.password}"/>
</p:panelGrid>

【讨论】：

谢谢，它有帮助。我还可以将表单的 prependId 的值更改为 false。
是的，您完全正确，但我认为将课程用作最佳实践仍然会更好。顺便说一句，您还可以使用此处的对话框创建登录页面，然后它将自动居中：stackoverflow.com/questions/24314745/…
在 JSF2 中避免使用 prependId="false"。它破坏了ajax的东西。他们应该在 JSF2 中弃用这个 JSF1+JSP 特定功能。