QT QSS属性
使用Qss設(shè)置QT程序界面的樣式和皮膚
1???????? 使用Qss設(shè)置QT程序界面的樣式和皮膚
1.1? Qss的功能
Qt程序界面中控件的背景圖片、大小、字體顏色、字體類型、按鈕狀態(tài)變化等屬性可以通過Qss文件來(lái)設(shè)置,美化UI界面。實(shí)現(xiàn)界面和程序的分離,快速切換皮膚。
1.2? QSS基本屬性設(shè)置
Qss的強(qiáng)大在于組合功能的強(qiáng)大,這里只是簡(jiǎn)單介紹基本功能,將簡(jiǎn)單功能組合起來(lái)才能實(shí)現(xiàn)好看的效果。
Qss背景屬性(Background)
| 屬性 | 描述 | CSS |
| background | 在一個(gè)聲明中設(shè)置所有的背景屬性。 | 1 |
| background-attachment | 設(shè)置背景圖像是否固定或者隨著頁(yè)面的其余部分滾動(dòng)。 | 1 |
| background-color | 設(shè)置元素的背景顏色。 | 1 |
| background-image | 設(shè)置元素的背景圖像。 | 1 |
| background-position | 設(shè)置背景圖像的開始位置。 | 1 |
| background-repeat | 設(shè)置是否及如何重復(fù)背景圖像。 | 1 |
| background-clip | 規(guī)定背景的繪制區(qū)域。 | 3 |
| background-origin | 規(guī)定背景圖片的定位區(qū)域。 | 3 |
| background-size | 規(guī)定背景圖片的尺寸。 | 3 |
QSS邊框?qū)傩?#xff08;Border?和 Outline)
| 屬性 | 描述 | CSS |
| border | 在一個(gè)聲明中設(shè)置所有的邊框屬性。 | 1 |
| border-bottom | 在一個(gè)聲明中設(shè)置所有的下邊框屬性。 | 1 |
| border-bottom-color | 設(shè)置下邊框的顏色。 | 2 |
| border-bottom-style | 設(shè)置下邊框的樣式。 | 2 |
| border-bottom-width | 設(shè)置下邊框的寬度。 | 1 |
| border-color | 設(shè)置四條邊框的顏色。 | 1 |
| border-left | 在一個(gè)聲明中設(shè)置所有的左邊框屬性。 | 1 |
| border-left-color | 設(shè)置左邊框的顏色。 | 2 |
| border-left-style | 設(shè)置左邊框的樣式。 | 2 |
| border-left-width | 設(shè)置左邊框的寬度。 | 1 |
| border-right | 在一個(gè)聲明中設(shè)置所有的右邊框屬性。 | 1 |
| border-right-color | 設(shè)置右邊框的顏色。 | 2 |
| border-right-style | 設(shè)置右邊框的樣式。 | 2 |
| border-right-width | 設(shè)置右邊框的寬度。 | 1 |
| border-style | 設(shè)置四條邊框的樣式。 | 1 |
| border-top | 在一個(gè)聲明中設(shè)置所有的上邊框屬性。 | 1 |
| border-top-color | 設(shè)置上邊框的顏色。 | 2 |
| border-top-style | 設(shè)置上邊框的樣式。 | 2 |
| border-top-width | 設(shè)置上邊框的寬度。 | 1 |
| border-width | 設(shè)置四條邊框的寬度。 | 1 |
| outline | 在一個(gè)聲明中設(shè)置所有的輪廓屬性。 | 2 |
| outline-color | 設(shè)置輪廓的顏色。 | 2 |
| outline-style | 設(shè)置輪廓的樣式。 | 2 |
| outline-width | 設(shè)置輪廓的寬度。 | 2 |
| border-bottom-left-radius | 定義邊框左下角的形狀。 | 3 |
| border-bottom-right-radius | 定義邊框右下角的形狀。 | 3 |
| border-image | 簡(jiǎn)寫屬性,設(shè)置所有 border-image-*?屬性。 | 3 |
| border-image-outset | 規(guī)定邊框圖像區(qū)域超出邊框的量。 | 3 |
| border-image-repeat | 圖像邊框是否應(yīng)平鋪(repeated)、鋪滿(rounded)或拉伸(stretched)。 | 3 |
| border-image-slice | 規(guī)定圖像邊框的向內(nèi)偏移。 | 3 |
| border-image-source | 規(guī)定用作邊框的圖片。 | 3 |
| border-image-width | 規(guī)定圖片邊框的寬度。 | 3 |
| border-radius | 簡(jiǎn)寫屬性,設(shè)置所有四個(gè) border-*-radius?屬性。 | 3 |
| border-top-left-radius | 定義邊框左上角的形狀。 | 3 |
| border-top-right-radius | 定義邊框右下角的形狀。 | 3 |
| box-decoration-break | �0�2 | 3 |
| box-shadow | 向方框添加一個(gè)或多個(gè)陰影。 | 3 |
Box?屬性
| 屬性 | 描述 | CSS |
| overflow-x | 如果內(nèi)容溢出了元素內(nèi)容區(qū)域,是否對(duì)內(nèi)容的左/右邊緣進(jìn)行裁剪。 | 3 |
| overflow-y | 如果內(nèi)容溢出了元素內(nèi)容區(qū)域,是否對(duì)內(nèi)容的上/下邊緣進(jìn)行裁剪。 | 3 |
| overflow-style | 規(guī)定溢出元素的首選滾動(dòng)方法。 | 3 |
| rotation | 圍繞由 rotation-point?屬性定義的點(diǎn)對(duì)元素進(jìn)行旋轉(zhuǎn)。 | 3 |
| rotation-point | 定義距離上左邊框邊緣的偏移點(diǎn)。 | 3 |
QSS字體屬性(Font)
| 屬性 | 描述 | CSS |
| font | 在一個(gè)聲明中設(shè)置所有字體屬性。 | 1 |
| font-family | 規(guī)定文本的字體系列。 | 1 |
| font-size | 規(guī)定文本的字體尺寸。 | 1 |
| font-size-adjust | 為元素規(guī)定 aspect 值。 | 2 |
| font-stretch | 收縮或拉伸當(dāng)前的字體系列。 | 2 |
| font-style | 規(guī)定文本的字體樣式。 | 1 |
| font-variant | 規(guī)定是否以小型大寫字母的字體顯示文本。 | 1 |
| font-weight | 規(guī)定字體的粗細(xì)。 | 1 |
QSS外邊距屬性(Margin)
| 屬性 | 描述 | CSS |
| margin | 在一個(gè)聲明中設(shè)置所有外邊距屬性。 | 1 |
| margin-bottom | 設(shè)置元素的下外邊距。 | 1 |
| margin-left | 設(shè)置元素的左外邊距。 | 1 |
| margin-right | 設(shè)置元素的右外邊距。 | 1 |
| margin-top | 設(shè)置元素的上外邊距。 | 1 |
CSS?內(nèi)邊距屬性(Padding)
| 屬性 | 描述 | CSS |
| padding | 在一個(gè)聲明中設(shè)置所有內(nèi)邊距屬性。 | 1 |
| padding-bottom | 設(shè)置元素的下內(nèi)邊距。 | 1 |
| padding-left | 設(shè)置元素的左內(nèi)邊距。 | 1 |
| padding-right | 設(shè)置元素的右內(nèi)邊距。 | 1 |
| padding-top | 設(shè)置元素的上內(nèi)邊距。 | 1 |
CSS?定位屬性(Positioning)
| 屬性 | 描述 | CSS |
| bottom | 設(shè)置定位元素下外邊距邊界與其包含塊下邊界之間的偏移。 | 2 |
| clear | 規(guī)定元素的哪一側(cè)不允許其他浮動(dòng)元素。 | 1 |
| clip | 剪裁絕對(duì)定位元素。 | 2 |
| cursor | 規(guī)定要顯示的光標(biāo)的類型(形狀)。 | 2 |
| display | 規(guī)定元素應(yīng)該生成的框的類型。 | 1 |
| float | 規(guī)定框是否應(yīng)該浮動(dòng)。 | 1 |
| left | 設(shè)置定位元素左外邊距邊界與其包含塊左邊界之間的偏移。 | 2 |
| overflow | 規(guī)定當(dāng)內(nèi)容溢出元素框時(shí)發(fā)生的事情。 | 2 |
| position | 規(guī)定元素的定位類型。 | 2 |
| right | 設(shè)置定位元素右外邊距邊界與其包含塊右邊界之間的偏移。 | 2 |
| top | 設(shè)置定位元素的上外邊距邊界與其包含塊上邊界之間的偏移。 | 2 |
| vertical-align | 設(shè)置元素的垂直對(duì)齊方式。 | 1 |
| visibility | 規(guī)定元素是否可見。 | 2 |
| z-index | 設(shè)置元素的堆疊順序。 | 2 |
CSS?文本屬性(Text)
| 屬性 | 描述 | CSS |
| color | 設(shè)置文本的顏色。 | 1 |
| direction | 規(guī)定文本的方向 / 書寫方向。 | 2 |
| letter-spacing | 設(shè)置字符間距。 | 1 |
| line-height | 設(shè)置行高。 | 1 |
| text-align | 規(guī)定文本的水平對(duì)齊方式。 | 1 |
| text-decoration | 規(guī)定添加到文本的裝飾效果。 | 1 |
| text-indent | 規(guī)定文本塊首行的縮進(jìn)。 | 1 |
| text-shadow | 規(guī)定添加到文本的陰影效果。 | 2 |
| text-transform | 控制文本的大小寫。 | 1 |
| unicode-bidi | 設(shè)置文本方向。 | 2 |
| white-space | 規(guī)定如何處理元素中的空白。 | 1 |
| word-spacing | 設(shè)置單詞間距。 | 1 |
| hanging-punctuation | 規(guī)定標(biāo)點(diǎn)字符是否位于線框之外。 | 3 |
| punctuation-trim | 規(guī)定是否對(duì)標(biāo)點(diǎn)字符進(jìn)行修剪。 | 3 |
| text-align-last | 設(shè)置如何對(duì)齊最后一行或緊挨著強(qiáng)制換行符之前的行。 | 3 |
| text-emphasis | 向元素的文本應(yīng)用重點(diǎn)標(biāo)記以及重點(diǎn)標(biāo)記的前景色。 | 3 |
| text-justify | 規(guī)定當(dāng) text-align 設(shè)置為 "justify" 時(shí)所使用的對(duì)齊方法。 | 3 |
| text-outline | 規(guī)定文本的輪廓。 | 3 |
| text-overflow | 規(guī)定當(dāng)文本溢出包含元素時(shí)發(fā)生的事情。 | 3 |
| text-shadow | 向文本添加陰影。 | 3 |
| text-wrap | 規(guī)定文本的換行規(guī)則。 | 3 |
| word-break | 規(guī)定非中日韓文本的換行規(guī)則。 | 3 |
| word-wrap | 允許對(duì)長(zhǎng)的不可分割的單詞進(jìn)行分割并換行到下一行。 | 3 |
總結(jié)
- 上一篇: 小米电视/小米盒子没有u盘怎么安装第三方
- 下一篇: 武侠:我在六扇门当差(二)