Primefaces 中全局更改的默认样式答案

【问题标题】：Globally changing default style in PrimefacesPrimefaces 中全局更改的默认样式
【发布时间】：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>

【问题讨论】：

您在项目中使用模板吗？或者您是否有标题页或任何其他页面，它们是您所有页面的一部分或包含它们？
不，我没有使用模板，我可以有一个标题页来包含它，这是执行此操作的最佳方式吗？
这就是我在我的项目中所做的，添加了类似的内容：在所有页面中出现的页眉页中...

标签： css jsf jsf-2 primefaces

【解决方案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;
}

【讨论】：