樣式表的作用:
批量設定控制項的外觀
注意:樣式表不可設定控制項的大小形狀
樣式表的原理:
樣式表的工作分為兩個部分:1、找到控制項;2、設定屬性值。找到控制項使用的是選擇器,設定屬性值使用的css原理。接下來依次分析。
其他選擇器:
作用:找到指定的控制項或者控制項狀態、行為。
選擇控制項:
控制項選擇層次:選擇控制項時要按照由廣到窄的範圍來確定:
通用選擇器:載入此樣式表的介面中的所有控制項都被選中,都會執行此屬性值。
格式:*
型別選擇器:匹配此型別的所有控制項,包括他的派生類物件。
格式:類名。例如:qpushbutton
類選擇器:相對於型別選擇器,他的範圍更小,不包括派生類物件
格式:.類名。例如:.qpushbutton(類名前有小點 . )
id選擇器:根據物件名來選擇控制項。
格式:#id 。例如button_1
後代選擇器:某個部件需要特殊的風格,那麼可以使用後代選擇器。先用乙個選擇器選中部件1,然後再加乙個選擇器選中部件1中的某一類部件將其設定成一種風格。後代選擇器可以選擇所有的後代
格式:選擇器1 選擇器2 選擇器3 …… 選擇器n
子元素選擇器:是後代選擇器中的一種,它僅在子代中選擇,不會選中孫代及其以後。
格式:選擇器1>選擇器2 。例如:qgroupbox>qpushbutton
子控制項選擇器:子控制項選擇器是針對qt中有些複雜的控制項是由多個控制項組合而成的,此時如果需要對qt官方控制項的子控制項進行樣式設定便需要使用子控制項選擇器。qt控制項所包含的子控制項說明在qt文件中有說明。
格式:選擇器::子控制項。例如:qcombobox::drop-down
並集選擇器:多個選擇器選中的控制項都執行統一的樣式。
格式:選擇器1,選擇器2,選擇器3
其他選擇控制項狀態:
屬性選擇器:當控制項的屬性符合選擇器的狀態時,使用特定的屬性值
格式:[attribute = value]
偽類選擇器:在選定型別的基礎上增加狀態選擇,可以多個狀態疊加。狀態的型別根據控制項的型別變化。
格式:型別選擇器:狀態
其他選擇控制項的優先順序:
精確優先,後寫的優先
其他屬性:
型別:位置:
css屬性應用在控制項上的位置:
說明:邊距(margin)、邊框(border)寬度和填充(padding)屬性都預設為零。在這種情況下,所有四個矩形(邊距、邊框、填充和內容)完全重合。
可以使用background-image(背景)屬性指定widget的背景。預設情況下,僅為邊框內的區域繪製背景影象,但是可以通過background-clip(背景剪裁)屬性進行更改。可以使用background-repeat(背景重複)和background-origin(背景原點)來控制背景影象的重複和原點。
背景影象不隨widget的大小縮放。要實現隨 widget 大小縮放的「**」或背景,必須使用border-image(邊框影象)。由於 border-image 屬性提供了備用背景,因此在指定border-image 時不需要指定 background-image。當兩者都被設定時,border-image 繪製在 background-image 上。
此外,影象屬性可用於在 border-image 上繪製影象。當指定的影象大小與 widget 的大小不匹配時,影象不會平鋪(tile)或拉伸(stretch),需要使用image-position屬性指定其對齊方式。與background-image和border-image不同,您可以在 image 屬性中指定svg,在這種情況下,影象會根據 widget 的大小自動縮放。
qt 的繪製的步驟如下:
為整個渲染操作設定剪輯(border-radius)。
繪製背景(background-image)。
繪製邊框(border-image,border)。
繪製疊加影象(image)。
選擇器選定到子控制項之後,可以直接對子控制項使用上述模型的屬性。
其他其他
使用方式:
載入樣式
qfile file(":/qss/abc.qss"); //工程控制項樣式表需要在qss/abc.qss裡面
file.open(qfile::readonly);
stylesheet = qlatin1string(file.readall());
file.close();
其他
ExtJS控制項樣式的修改
這裡說的修改不是去改extjs本身的ext all.css,也不建議這樣去做,這樣會影響所有頁面 而應該是用自定義的css去覆蓋某些控制項的預設樣式。大部分控制項都有類似cls style的屬性供開發者去定製樣式 但具體要設定樣式的哪些屬性才能達到特定效果,api文件就沒說了。比如要構建乙個不帶邊框...
如何獲取qt控制項的子控制項
我們知道,所有的qt控制項都繼承自qobject,而qobject有乙個屬性叫做objectname。我們可以利用這個屬性。查詢物件的方法,可以利用findchild 和fildchildren 函式原型如下 t qobject findchild const qstring name qstrin...
修改DataGrid控制項的預設的分頁樣式
其實也不是很難,先看看datagrid顯示的是什麼東東,這樣可能會有點眉目。在datagrid中,分頁導航欄是用一行 tablerow 來表現出來,在這個行 tablerow 中,只有乙個列 tablecell 我們所看到的所有的數字超連結按鈕 linkburron 都是這個列 tablecell ...