CSS 在 Primefaces 中全局更改默认样式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9147333/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Globally changing default style in Primefaces
提问by Oh Chin Boon
How should I change and apply changes to the default style of primefaces globally and only once?
我应该如何在全局范围内更改和应用对primefaces 的默认样式的更改，并且只应用一次？
.ui-widget,.ui-widget .ui-widget {
font-size: 90% !important;
}
Currently, I am embedding this CSS snippet in the head of every XHTML page.
目前，我将此 CSS 片段嵌入到每个 XHTML 页面的头部。
<head>
<style type="text/css">
.ui-widget,.ui-widget .ui-widget {
font-size: 90% !important;
}
</style>
</head>
回答by BalusC
Create a style sheet file:
创建样式表文件：
/resources/css/default.css
/resources/css/default.css
.ui-widget, .ui-widget .ui-widget {
font-size: 90%;
}
(please note that I removed the !important"hack", see also How do I override default PrimeFaces CSS with custom styles?for an in-depth explanation of how to redefine PF styles)
（请注意，我删除了!important“hack”，另请参阅如何使用自定义样式覆盖默认的 PrimeFaces CSS？有关如何重新定义 PF 样式的深入说明）
Include it in the <h:body>of your template using <h:outputStylesheet>(it will be auto-relocated to the endof the HTML head, after all PrimeFaces own stylesheets):
将它包含在<h:body>您的模板中使用<h:outputStylesheet>（在所有 PrimeFaces 自己的样式表之后，它将自动重定位到HTML 头的末尾）：
<h:body>
<h:outputStylesheet name="css/default.css" />
...
</h:body>
If you aren't using a master template and thus need to include this in every single page, I recommend to reconsider your page design and to utilize JSF2 Facelets templating capabilities. This way you've only one master template file where all defaults of both the head and the body are definied. See also this answer for a concrete example: How to include another XHTML in XHTML using JSF 2.0 Facelets?
如果您没有使用主模板，因此需要将其包含在每个页面中，我建议您重新考虑您的页面设计并利用 JSF2 Facelets 模板功能。这样您就只有一个主模板文件，其中定义了头部和身体的所有默认值。有关具体示例，另请参阅此答案：How to include another XHTML in XHTML using JSF 2.0 Facelets？
回答by James Bassett
I would recommend using:
我建议使用：
.ui-widget {
font-size: 90%;
}
.ui-widget .ui-widget {
font-size: 100%;
}
instead of BalusC's approach, unless you likethe font size decreasing as you nest your JSF components together.
而不是 BalusC 的方法，除非您喜欢在将 JSF 组件嵌套在一起时减小字体大小。
I'd agree with BalusC that you should create a stylesheet and consider templating, but I disagree with the suggested CSS (though I'm still not decided on the use of !important!).
我同意 BalusC 的观点，即您应该创建一个样式表并考虑模板化，但我不同意建议的 CSS（尽管我仍然没有决定使用!important！）。
Section 8.4 of the Primefaces 3.1 user guidesuggests using
Primefaces 3.1 用户指南的第 8.4 节建议使用
.ui-widget, .ui-widget .ui-widget {
font-size: 90% !important;
}
which is similar to BalusC's suggestion but uses !important.
这类似于 BalusC 的建议，但使用!important.
This will do two things:
这将做两件事：
- set the font size of components with the
ui-widgetclass to 90% (of the parent) - set the font size of components with the
ui-widgetclass andare children of another component with theui-widgetclass to 90% (of the parent)
- 将
ui-widget类组件的字体大小设置为（父级的）90% - 设置与各组分的字体大小
ui-widget类和是与所述另一组件的子ui-widget类，以90％（父）
Do you really want to set the font size of a nested ui-widgetto 90%? If you have 2 or 3 levels of nested ui-widgets the font size is going to keep decreasing. Try the following (Primefaces) JSF markup and you'll see my point.
您真的要将嵌套的字体大小设置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>
I believe the reason .ui-widget .ui-widgetwas required in the standard jQuery CSS was to prevent the reverse problem: font size increasing in nested ui-widgets.
我相信.ui-widget .ui-widget标准 jQuery CSS 中需要的原因是为了防止相反的问题：嵌套ui-widgets 中的字体大小增加。
The default styles are typically the following:
默认样式通常如下：
.ui-widget { font-family: Verdana,Arial,sans-serif; font-size: 1.1em; }
.ui-widget .ui-widget { font-size: 1em; }
Without the style defined for .ui-widget .ui-widget, the default font-size: 1.1emstyle applied to .ui-widgetcauses the font size to increase in nested ui-widgets.
如果没有为 定义样式，则应用.ui-widget .ui-widget的默认font-size: 1.1em样式.ui-widget会导致嵌套ui-widgets 中的字体大小增加。
By adding the more specific .ui-widget .ui-widgetselector with font size set to 100% (or 1em) you will ensure that you get a consistent font size, no matter how deep you nest your components.
通过添加.ui-widget .ui-widget字体大小设置为 100%（或 1em）的更具体的选择器，您将确保获得一致的字体大小，无论您的组件嵌套多深。
回答by myset
It works fine with following css
它适用于以下 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;
}
回答by Gustavo Mahecha
This works fine.
这工作正常。
.ui-g {
font-size: 13px;
}
