meego中css主題檔案的使用方法

2021-09-30 05:50:53 字數 2275 閱讀 8195

作者****:馮牮 [email protected]

1. qtwidget裡面有stylesheet(css)的概念,而原始的qtgraphicsview裡面,並沒有stylesheet概念,到了mtf 裡面,又引入了stylesheet,但是文件不是很多,我只能參照qtwidget裡面關於stylesheet的介紹,在猜測驗證的基礎 上,做出一些總結。肯定會有不準確的地方,以後會隨時修改。因此,建議先看一下qtwidget中的stylesheet的相關介紹文件。

有乙份mtf中stylesheet的介紹文件,見

後面的描述有不準確的地方,待修改完善。

2. qt中stylesheet使用的css標記語言,靈感是來自於html中的css,但是,僅僅是靈感,細節上還是有一些差別,建議學習一下html中css的概念和基本用法。後面所有的介紹,將不會討論這些基礎知識。

3. 基本語法(可以參考示例程式/code-example/layout/layout_inside_layout ,建議修改目錄裡面的css檔案,看看效果,挺有意思的)

選擇器

3.1 選擇器語法。

中括號內的屬性-屬性值,很好理解(需要介紹的是mtf中,都有哪些屬性,這個在後面部分詳細描述),重點在於 選擇器 的一般語法(qt中選擇器的語法,和html中選擇器的語法是不一樣的),下面給出一些例子:

<1>

mlabelstyle

選擇器匹配的是所有 mlabel和其子類 的物件例項。

<2>

mlabelstyle

#item

選擇器匹配的是所有 mlabel 的物件例項,並且該物件的object name是item(不確定是否包括mlabel的子類的物件例項,待補充)。

<3>

.mlabelstyle

選擇器匹配的是所有 mlabel 的物件例項(不包括它的子類物件例項)。

<4>

#item

選擇器匹配的是所有 object name 為item的物件例項。

<5>qtwidget裡面,還有其他幾種選擇器語法,目前還沒有驗證,可以先只使用上面幾種。

3.2 屬性-屬性值 介紹。

在mtf裡面,屬性-屬性值 也是有繼承關係的。一mlabel為例,它的style的繼承關係是 mstyle-->mwidgetstyle-->mlabelstyle。

<1>mstyle只是定義了共同的一些介面,沒有實際的style,所以,從mwidgetstyle開始。

<2>mwidgetstyle是所有mwidget共有的style,包括:

int marginleft

int margintop

int marginright

int marginbottom

int paddingleft

int paddingtop

int paddingright

int paddingbottom

int reactivemarginleft

int reactivemargintop

int reactivemarginright

int reactivemarginbottom

int backgroundboxedpercent

mbackgroundtiles backgroundtiles

qcolor backgroundcolor

qreal backgroundopacity

qsize preferredsize

qsize minimumsize

qsize maximumsize

mfeedback pressfeedback

mfeedback releasefeedback

mfeedback cancelfeedback

<3>注意,前面列出了mwdiget中style的定義,但是,在css檔案中,對應到 屬性-屬性值 中的時候,屬性名字的寫法,有小的差別,比如:

上面<2>中的 backgroundcolor,對應到css中,就應該寫成background-color。(詳細的對照,還沒有找到,先照貓畫虎吧)

<4>mlabelstyle,包括:

qcolor color

qfont font

qcolor highlightcolor

qcolor activehighlightcolor

<5>還是看上面給出的乙個例子:

mlabelstyle

<8>mtf中的mvc模式,看似複雜,但是有它的靈活性和優勢,尤其是style,也可以控制實際的顯示效果

css中margin和padding的使用

1 設定屬性方法 margin和padding都是用來隔開元素,margin用於布局元素使元素與元素互不相干,padding是用於元素與內容之間的間隔。元素四邊可以設定的屬性 margin top,margin right,margin bottom,margin left,padding top,...

舉例詳解CSS中position屬性的使用

position 這個屬性決定了元素將如何定位。它的值大概有以下五種 每個網頁都可以看成是由一層一層頁面堆疊起來的,如下圖所示。position 設定為 relative 的時候,元素依然在普通流中,位置是正常位置,你可以通過 left right 等移動元素。會影響其他元素的位置。而當乙個元素的 ...

詳解CSS中的Box Model盒屬性的使用

頁面上顯示的每個元素 包括內聯元素 都可以看作乙個盒子,即盒模型 box model 請看 chrome devtools 裡的截圖 可以顯而易見的看出盒模型由 4 部分組成。從內到外分別是 content padding border margin 按理來說乙個元素的寬度 高度以此類推 應該這樣計...