Question

我创建了一个新的css文件，并在其中添加了以下样式：

.op-label {
    color: orange;
}

我已将此文件'hms.css'放在

中

“/ web应用/资源”

文件夹中。

我已将其包含在我的JSF模板文件BasicTemplate.xhtml中，如下所示：

<h:head>
    <title><ui:insert name="title">Basic Template</ui:insert></title>
    <h:outputStylesheet name="hms.css"/>
</h:head>

以下是我在面部页面中使用此样式与输出组件的方式：

<p:outputLabel value="First Name" styleClass=".op-label"></p:outputLabel>

问题：该样式未应用于呈现的html。渲染的html代码剪断了它：

<head>

    <link href="/HMSWeb/javax.faces.resource/theme.css.xhtml?ln=primefaces-sunny" rel="stylesheet" type="text/css"></link>
    <link href="/HMSWeb/javax.faces.resource/hms.css.xhtml" rel="stylesheet" type="text/css"></link>
    <link href="/HMSWeb/javax.faces.resource/primefaces.css.xhtml?ln=primefaces&v=4.0" rel="stylesheet" type="text/css"></link>
    <script src="/HMSWeb/javax.faces.resource/jquery/jquery.js.xhtml?ln=primefaces&v=4.0" type="text/javascript"></script>
    <script src="/HMSWeb/javax.faces.resource/jquery/jquery-plugins.js.xhtml?ln=primefaces&v=4.0" type="text/javascript"></script>
    <script src="/HMSWeb/javax.faces.resource/primefaces.js.xhtml?ln=primefaces&v=4.0" type="text/javascript"></script>
    <title> … </title>

</head>

问题：这是什么原因？任何帮助将不胜感激。

谢谢！

Answer 1

尝试使用styleClass="op-label"

 <p:outputLabel value="First Name" styleClass="op-label"></p:outputLabel>

而不是

 <p:outputLabel value="First Name" styleClass=".op-label"></p:outputLabel>

Answer 2

正如user876345建议的那样，删除句点应该是技巧。所以，它应该是：

styleClass="op-label"

而不是

styleClass=".op-label"

Answer 3

尝试将完整的网址放入源代码中。例如： -

http://www.knowtheworld.in/ ..path到你的css /HMSWeb/javax.faces.resource/hms.css.xhtml

Answer 4

尝试将完整的网址放入源代码中。例如： - http://www.theclickus.com/

CSS样式未在JSF页面上应用

4 个答案: