Oh *_*oon 11 css jsf primefaces jsf-2
我应该如何更改默认的primefaces样式并将其应用于全局且只应用一次？
.ui-widget,.ui-widget .ui-widget {
font-size: 90% !important;
}
目前,我将这个CSS片段嵌入到每个XHTML页面的头部.
<head>
<style type="text/css">
.ui-widget,.ui-widget .ui-widget {
font-size: 90% !important;
}
</style>
</head>
Bal*_*usC 35
创建样式表文件:
/resources/css/default.css
.ui-widget, .ui-widget .ui-widget {
font-size: 90%;
}
(请注意我删除了!important"hack",另请参阅如何使用自定义样式覆盖默认的PrimeFaces CSS？有关如何重新定义PF样式的深入说明)
<h:body>使用<h:outputStylesheet>它将其包含在您的模板中(在所有PrimeFaces自己的样式表之后,它将自动重定位到HTML头的末尾):
<h:body>
<h:outputStylesheet name="css/default.css" />
...
</h:body>
如果您没有使用主模板,因此需要在每个页面中包含此模板,我建议您重新考虑页面设计并使用JSF2 Facelets模板功能.这样,您只有一个主模板文件,其中定义了头部和主体的所有默认值.另请参阅此答案以获取具体示例:如何使用JSF 2.0 Facelets在XHTML中包含另一个XHTML？
Jam*_*ett 17
我建议使用:
.ui-widget {
font-size: 90%;
}
.ui-widget .ui-widget {
font-size: 100%;
}
而不是BalusC的方法,除非你喜欢在将JSF组件嵌套在一起时字体大小减小.
我同意BalusC你应该创建一个样式表并考虑模板,但我不同意建议的CSS(尽管我还没决定使用!important!).
Primefaces 3.1用户指南的 8.4节建议使用
.ui-widget, .ui-widget .ui-widget {
font-size: 90% !important;
}
这与BalusC的建议类似但使用!important.
这将做两件事:
ui-widget类的组件的字体大小设置为90%(父类)ui-widget
类的组件的字体大小,并且是具有该类的另一个组件的子ui-widget
级(父级的90%)你真的想把嵌套的字体大小设置ui-widget为90%吗？如果你有2或3级嵌套ui-widgets,字体大小将继续下降.尝试以下(Primefaces)JSF标记,你会看到我的观点.
<h:form>
<p:button value="Normal"></p:button>
<p:panel>
<p:button value="A bit smaller"></p:button>
<p:panel>
<p:button value="Even smaller again"></p:button>
<p:panel>
<p:button value="Tiny"></p:button>
</p:panel>
</p:panel>
</p:panel>
</h:form>
我相信.ui-widget .ui-widget标准jQuery CSS中需要的原因是为了防止反向问题:嵌套ui-widgets中的字体大小增加.
默认样式通常如下:
.ui-widget { font-family: Verdana,Arial,sans-serif; font-size: 1.1em; }
.ui-widget .ui-widget { font-size: 1em; }
如果没有为其定义的样式.ui-widget .ui-widget,则font-size: 1.1em应用的默认样式.ui-widget会导致嵌套ui-widgets中的字体大小增加.
通过添加.ui-widget .ui-widget字体大小设置为100%(或1em)的更具体的选择器,无论您的组件嵌套多深,都可以确保获得一致的字体大小.
| 归档时间： |
|
| 查看次数： |
42462 次 |
| 最近记录： |