如何覆蓋Primefaces默認CSS？

我試圖重寫Primefaces主題我CSS這個樣子的在file1.xhtml如何覆蓋Primefaces默認CSS？

.ui-menubar { 
    font-family: Verdana, Arial, Helvetica, sans-serif; 
    font-size: 11px!important; 
    background: #D4C5F7!important; 

}

在File2.xhtml我已經使用這個CSS

.ui-menubar { 
    font-family: Verdana, Arial, Helvetica, sans-serif; 
    font-size: 14px; 
    background: #557FFF!important; 
}

但是，當我在瀏覽器中檢查了它的顯示file1 css在這兩個地方，我在這裏做錯了什麼？ File1.xhtml和File2.xhtml兩者都是包含在File3.xhtml文件

瞭解如何在HTML文檔作爲整體應用代碼看起來象

<p:layoutUnit position="north" size="100" id="north" 
       resizable="false" closable="false" style="border:none"> 
       <ui:insert name="north"> 

        <ui:include src="/template/top_header.xhtml" /> 

        <ui:include src="/template/header_menu.xhtml" /> 
       </ui:insert> 
     </p:layoutUnit>

來源

2013-08-18 Programmer

你能提供一個基本的例子，你的xhtml文件不工作嗎？ –

我在佈局中使用兩個xhtml – Programmer

增加了編碼 – Programmer

CSS。您不會像每個包含文件一樣應用CSS，或者您似乎認爲CSS不適用。 CSS不能在web服務器上運行。在webbrowser分析了從JSF檢索到的HTML輸出並將其直觀地呈現給最終用戶之後，CSS將在webbrowser中運行。

如果您想給特定組件一個與默認不同的樣式，那麼您應該給它一個類名稱。

<x:someComponent styleClass="someClass">

然後你就可以對微調的CSS選擇器：

.ui-menubar.someClass { 
    ... 
}

（命名爲更理智，雖然，如leftMenu，topMenu等）

無關到具體的問題，!important在這裏被使用d作爲解決方法，而不是解決方案。擺脫它，並仔細閱讀以下答案，包括其所有的鏈接，以瞭解如何正確覆蓋PrimeFaces默認CSS：How do I override default PrimeFaces CSS with custom styles?

來源

2013-08-19 02:07:11 BalusC

不惜一切代價避免'！important'。 – Mindwin

@Mindwin：另請參閱答案底部的鏈接以獲取指導。 – BalusC

爲什麼要避免！重要的是它會影響性能？ – Programmer

如何覆蓋Primefaces默認CSS？

回答

相關問題