Primefaces 中全局更改的默认样式
Posted
技术标签:
【中文标题】Primefaces 中全局更改的默认样式【英文标题】：Globally changing default style in Primefaces 【发布时间】：2012-02-27 04:10:06 【问题描述】：我应该如何在全局范围内更改并应用更改到 primefaces 的默认样式并且仅一次？
.ui-widget,.ui-widget .ui-widget
font-size: 90% !important;
目前，我将这个 CSS sn-p 嵌入到每个 Xhtml 页面的头部。
<head>
<style type="text/css">
.ui-widget,.ui-widget .ui-widget
font-size: 90% !important;
</style>
</head>
【问题讨论】：
您在项目中使用模板吗？或者您是否有标题页或任何其他页面，它们是您所有页面的一部分或包含它们？ 不，我没有使用模板，我可以有一个标题页来包含它，这是执行此操作的最佳方式吗？ 这就是我在我的项目中所做的，添加了类似的内容： 在所有页面中出现的页眉页中... 【参考方案1】：创建样式表文件：
/resources/css/default.css
.ui-widget, .ui-widget .ui-widget
font-size: 90%;
（请注意，我删除了 !important“hack”，另请参阅 How do I override default PrimeFaces CSS with custom styles?，了解如何重新定义 PF 样式的详细说明）
使用<h:outputStylesheet> 将其包含在模板的<h:body> 中（在所有PrimeFaces 自己的样式表之后，它将自动重新定位到HTML 头部的end）：
<h:body>
<h:outputStylesheet name="css/default.css" />
...
</h:body>
如果您没有使用主模板，因此需要在每个页面中包含它，我建议重新考虑您的页面设计并利用 JSF2 Facelets 模板功能。这样，您只有一个主模板文件，其中定义了头部和身体的所有默认值。另请参阅此答案以获取具体示例：How to include another XHTML in XHTML using JSF 2.0 Facelets?
【讨论】：
上面的 css 导致 selectOneMenu 在下拉菜单中显示水平滚动条，因为菜单本身的大小减小了，但每个菜单项仍然具有较大的字体。但是，当我删除逗号后的双 .ui-widget .ui-widget 时，下拉菜单似乎还可以。也许我需要复习一下我的 CSS，但我不明白重复的 .ui-widget .ui-widget 是什么意思。【参考方案2】：我建议使用：
.ui-widget
font-size: 90%;
.ui-widget .ui-widget
font-size: 100%;
而不是 BalusC 的方法，除非您喜欢当您将 JSF 组件嵌套在一起时字体大小会减小。
我同意 BalusC 的观点，即您应该创建一个样式表并考虑模板化，但我不同意所建议的 CSS（尽管我还没有决定使用 !important！）。
Primefaces 3.1 user guide 的第 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>
我相信标准 jQuery CSS 中需要.ui-widget .ui-widget 的原因是为了防止出现相反的问题：嵌套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 定义的样式，则应用于.ui-widget 的默认font-size: 1.1em 样式会导致嵌套ui-widgets 中的字体大小增加。
通过添加更具体的 .ui-widget .ui-widget 选择器并将字体大小设置为 100%（或 1em），您将确保获得一致的字体大小，无论您将组件嵌套多深。
【讨论】：
我有一点疑问，如果我输入<p:dataTable>，而不是<p:button value="Normal"></p:button>，组件大小似乎没有调整大小。可能是什么原因？此外，如何将字体类型更改为 ariel 或 sans 等？还是我需要明确提及.ui-datatable？
感谢猎犬。我很少不同意 BalusC 的答案，但你的答案很准确，并且准确地解决了我自从开始使用 PF 以来一直遇到的问题（很好地解释了为什么它也是一个问题）。
@wobblycogs 谢谢 - 我认为这是我唯一一次质疑 BalusC 的答案（这让我怀疑自己！） - 他的 JSF 知识令人难以置信，而且 Omnifaces 很简洁。
@HoundDog 你知道我该怎么做才能减少所有primefaces组件的大小，而不仅仅是字体。谢谢
@BalusC，你怎么看？我遇到了猎犬用你的方法描述的问题。【参考方案3】：
它适用于以下 css
body
font-size: 75% !important;
.ui-widget,.ui-widget-header,.ui-widget-content,.ui-widget-header .ui-widget-header,.ui-widget-content .ui-widget-content,.ui-widget input,.ui-widget select,.ui-widget textarea,.ui-widget button
font-size: 100% !important;
【讨论】：
【参考方案4】：这很好用。
.ui-g
font-size: 13px;
【讨论】：
以上是关于Primefaces 中全局更改的默认样式的主要内容，如果未能解决你的问题，请参考以下文章