2. 程式人生 > >有關於QT樣式表的一些知識（使用方法和編寫語法）

有關於QT樣式表的一些知識（使用方法和編寫語法）

阿新 • • 發佈：2019-02-01

一、QT樣式表的介紹

     QT樣式表文件.qss類似於層疊式樣式表，樣式表文件能夠減少專案中源原件的程式碼量，原始碼中不必再對每個控制元件的樣式進行設定。而且樣式表是一個獨立的檔案，其非常便於修改，對大型工程專案的統一介面風格設計和修改都很便利。

     本文僅對樣式表的基礎語法做一個簡單的介紹，由於受實際使用時的專案經驗限制，不是很全面。另，文後附一個使用例項，可供參考。

二、使用方法

  1. 先建立文字檔案，書寫樣式表，編寫完畢後重命名為.qss檔案
  2. 在專案中新增Qt資原始檔.qrc檔案。如source.qrc，把樣式表文件加入到資原始檔中，此處注意prefix最好為"/"，否則在呼叫qss檔案時會找不到檔案。例如在專案資料夾下建立一個source資料夾，把所有樣式表用到的圖片都放入這個目錄下，樣式表文件和資原始檔也都放在這個目錄下。現在在資原始檔中加入qss檔案路徑：

         <RCC>

             <qresource prefix="/">

            <file>arrow_down_normal.png</file>

               ... ...

            <file>source.qss</file>

             ... ...

          </qresource>

      </RCC>

   3.在main函式中通過傳入路徑\檔名的方式建立一個QFile物件，以readonly的方式開啟，然後readAll，最後

      qApp->setStyleSheet就可以使qss生效。

      程式碼如下：

      QApplication app(argc, argv);

      QFile qss("source.qss");
      qss.open(QFile::ReadOnly);
      app.setStyleSheet(qss.readAll());
      qss.close();

三、基礎語法

  1.   一個樣式表由一系列的樣式規則構成。每個樣式規則都如下形式：
    selector { attribute: value }

    selector部分通常是一個類名(例如QComboBox)，也就是一種部件的名稱；屬性(attribute)部分是一個樣式表屬性的名字（如背景色，邊框大小，字型等），值(value)部分是賦給該屬性的值（顏色，大小等的值）。

      也可以同時給多個部件定義，如下：

      selector1, selector2, ..., selectorM {
      attribute1: value1;
      attribute2: value2;
      ...
      attributeN: valueN;
      }

2. 另外介紹一下方箱模型

      在樣式表中，每個部件都被看作是一個由四個同心相似的矩形組成的箱體：空白(margin)、邊框(border)、填充(padding)和內容(content)。對於一個平面部件——例如一個空白、邊框和填充都是0畫素的部件——而言，這四個矩形是完全重合的。
空白區域位於邊框外，並且總是透明的。邊框為部件提供了四周的框架，其border-style屬性可以設定為一些內建的框架風格，如inset、outset、solid和ridge。填充在邊框和內容區域之間提供了空白間隔。

3. 偽狀態的設定     

      定義介面元素不同的狀態所展現的樣式稱為“偽狀態樣式”。偽狀態和部件使用：來表示。偽狀態的書寫格式為：

      Selector：狀態 { attribute: value }

      例如：  

      QPushButton:disabled {

        padding-left: 4px;

        padding-top: 4px;

        background-color: gray；

      }

     偽狀態主要有：

     :checked    button部件被選中
     :disabled    部件被禁用
     :enabled    部件被啟用
     :focus    部件獲得焦點
     :hover    滑鼠位於部件上
     :indeterminate    checkbox或radiobutton被部分選中
     :off    部件可以切換，且處於off狀態
     :on    部件可以切換，且處於on狀態
     :pressed    部件被滑鼠按下
     :unchecked    button部件未被選中

4.子部件的設定

      許多部件都有子部件，如QComboBox的下拉箭頭，子部件和主部件使用::來表示。格式為：

     Selector::子部件{ attribute: value }

     如果還要用到偽狀態則：Selector：：子部件：偽狀態{ attribute: value }

     子部件有：

     ::down-arrow    combo box或spin box的下拉箭頭
     ::down-button    spin box的向下按鈕
     ::drop-down    combo box的下拉箭頭
     ::indicator    checkbox、radio button或可選擇group box的指示器
     ::item    menu、menu bar或status bar的子專案
     ::menu-indicator    push button的選單指示器
     ::title    group box的標題
     ::up-arrow    spin box的向上箭頭
     ::up-button    spin box的向上按鈕

5.其他

     qss的註釋支援" /* */"，不支援“//"，如果使用了"//"進行註釋，可能導致該符號後面的樣式表設定內容全部失效。

四、一個樣式表例項

QDialog {
    border: 2px solid #5BBDBE;  /*邊框：2px,實線，色號*/
    /*border-radius: 6px;*/
}

/*視窗中的可滾動區域*/
QScrollArea {
    border: 2px solid #5BBDBE;
    border-radius: 4px;  /*邊框半徑用於實現圓角矩形樣式*/
}


QGroupBox {
    border: 2px solid #5BBDBE;
    border-radius: 5px;
    margin-top: 1ex; /* leave space at the top for the title */
}

QGroupBox::title {
    subcontrol-origin: margin;
    subcontrol-position: top left; /* position at the top center */
    left: 20px;
}


QTabWidget::pane { /* The tab widget frame */
    margin: 0px;
    border-left: 2px solid #5BBDBE;
    border-bottom: 2px solid #5BBDBE;
    border-top: 2px solid #5BBDBE;
    border-right: 2px solid #5BBDBE;
    border-radius: 4px;
    position: absolute;
    top: -2px;
}

QTabWidget::tab-bar {
    left: 0px; /* move to the right by 5px */
}

/* Style the tab using the tab sub-control. Note that
    it reads QTabBar _not_ QTabWidget */
QTabBar::tab {
    color: #FFFFFF;
    background: #018E88;
    border: 2px solid #5BBDBE;
    border-bottom-color: #5BBDBE; /* same as the pane color */
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    min-width: 8ex;
    padding: 2px;
}
/*滑鼠懸浮tab頁面上*/
QTabBar::tab:hover {
    color: #018E88;     /*前景色*/
    background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                                stop: 0 #DDEDED, stop: 1.0 #EEF6F6);
}   /*背景色為漸變色，從stop:0至stop:1.0漸變*/
/*被選擇的tab頁面*/
QTabBar::tab:selected {
    color: #018E88;
    background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                                stop: 0 #DDEDED, stop: 1.0 #EEF6F6);
    border-color: #5BBDBE;
    border-bottom-color: #EEF6F6; /* same as pane color */
}
/*未被選的tab頁面*/
QTabBar::tab:!selected {
    margin-top: 2px; /* make non-selected tabs look smaller */
}

/* make use of negative margins for overlapping tabs */
QTabBar::tab:selected {
    /* expand/overlap to the left and right by 4px */
    margin-left: -2px;
    margin-right: -2px;
}

QTabBar::tab:first {
    margin-left: 30;
}

QTabBar::tab:last:selected {
    margin-right: 0; /* the last selected tab has nothing to overlap with on the right */
}

QTabBar::tab:only-one {
    margin: 0; /* if there is only one tab, we don't want overlapping margins */
}


QPushButton {
    /*border: 2px solid #30A29F*/;
    border: none;
    padding: 2px 2px 2px 2px;
    border-radius: 6px;
    color: #FFFFFF;
    background-color: #30A29F;
    min-width: 70px;
    min-height: 25px;
}
QPushButton:disabled {
    padding-left: 4px;
    padding-top: 4px;

    background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                                      stop: 0 #EEF6F6, stop: 1 #000000);
}
QPushButton:pressed {
    padding-left: 4px;
    padding-top: 4px;
    color: #30A29F;
    background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                                      stop: 0 #EEF6F6, stop: 1 #FFFFFF);
}

QPushButton:hover {
    color: #30A29F;
    background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                                      stop: 0 #BEDDDE, stop: 1 #E7F2F2);
}

QPushButton:flat {
    border: none; /* no border for a flat push button */
}

QPushButton:default {
    border-color: navy; /* make the default button prominent */
}


QTreeView {
    border: 1px solid #5BBDBE;
    show-decoration-selected: 1;
    background-color:#FFFFFF;
    selection-color: #000000;
    selection-background-color:#FFFFFF;
    font-size: 12pt;
}

QTreeView::item {
    border: 1px solid #FFFFFF;
    border-top-color: transparent;
    border-bottom-color: transparent;
}

QTreeView::item:hover {
    background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #DDEDED, stop: 1 #EEF6F6);
    border: 1px solid #BEDDDE;
}

QTreeView::item:selected {
    border: 1px solid #BEDDDE;
}

QTreeView::item:selected:active{
    background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #BEDDDE, stop: 1 #E7F2F2);
}

QTreeView::item:selected:!active {
    background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #BEDDDE, stop: 1 #E7F2F2);
}

/*表格樣式*/
QTableView {
    border: 1px solid #5BBDBE;
    show-decoration-selected: 1;
    background-color:#F4F4F4;
    alternate-background-color:#EAEAEA; /*行顏色交替變化*/
    selection-color: #000000;
    selection-background-color:#BEDDDE;
    font-size: 14pt;
}


QTableView::item {
    border: 1px solid #FFFFFF;
    border-top-color: transparent;
    border-bottom-color: transparent;
}

QTableView::item:hover {
    background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #DDEDED, stop: 1 #EEF6F6);
    border: 1px solid #BEDDDE;
}

QTableView::item:selected {
    color: #018E88;
    border: 1px solid #BEDDDE;
}

QTableView::item:selected:active{
    background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #BEDDDE, stop: 1 #E7F2F2);
}

QTableView::item:selected:!active {
    background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #BEDDDE, stop: 1 #E7F2F2);
}

QTableView QTableCornerButton::section {
    border: 0px;
    background-color: #8D8D8D;
}


QHeaderView::section {
    background-color: #018E88;
    color: white;
    font-size: 14pt;
    min-width: 25px;
    min-height: 25px;

    padding-left: 0px;
    border: 0px solid #018E88;
}

QHeaderView::section:checked
{
    background-color: #018E88;
}

/* style the sort indicator */
QHeaderView::down-arrow {
    image: url(./source/arrow_down_normal.png);
}

QHeaderView::down-arrow:hover {
    image: url(./source/arrow_down_press.png);
}

QHeaderView::up-arrow {
    image: url(./source/arrow_up_normal.png);
}

QHeaderView::up-arrow:hover {
    image: url(./source/arrow_up_press.png);
}


QScrollBar:horizontal {
    border: 2px solid #018E88;
    background: #018E88;
    height: 20px;
    margin: 0 22px 0 22px;
}

QScrollBar::handle:horizontal {
    border-radius: 6px;
    background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #E5E5E5, stop: 1 #DADADA);
    min-width: 20px;
}

QScrollBar::handle:horizontal:hover {
    border-radius: 6px;
    background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #DADADA, stop: 1 #018E88);
    min-width: 20px;
}

QScrollBar::handle:horizontal:pressed {
    border-radius: 6px;
    background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #B8B8B8, stop: 1 #A3A3A3);
    min-width: 20px;
}

QScrollBar::add-line:horizontal {
    border: 2px solid #018E88;
    background: #018E88;
    width: 20px;
    subcontrol-position: right;
    subcontrol-origin: margin;
}

QScrollBar::sub-line:horizontal {
    border: 2px solid #018E88;
    background: #018E88;
    width: 20px;
    subcontrol-position: left;
    subcontrol-origin: margin;
}

QScrollBar:left-arrow:horizontal, QScrollBar::right-arrow:horizontal {
    border: 2px solid #018E88;
    border-radius: 6px;
    width: 10px;
    height: 10px;
    background: #E5E5E5;
}

QScrollBar:left-arrow:horizontal:hover, QScrollBar::right-arrow:horizontal:hover {
    border: 2px solid #018E88;
    border-radius: 6px;
    width: 10px;
    height: 10px;
    background: #FFFFFF;
}

QScrollBar::add-page:horizontal, QScrollBar::sub-page:horizontal {
    background: none;
}


QScrollBar:vertical {
    border: 2px solid #018E88;
    background: #018E88;
    width: 20px;
    margin: 22px 0 22px 0;
}
QScrollBar::handle:vertical {
    border-radius: 6px;
    background: qlineargradient(x1: 0, y1: 0, x2: 1, y2: 0, stop: 0 #E5E5E5, stop: 1 #DADADA);
    min-height: 20px;
}

QScrollBar::handle:vertical:hover {
    border-radius: 6px;
    background: qlineargradient(x1: 0, y1: 0, x2: 1, y2: 0, stop: 0 #DADADA, stop: 1 #018E88);
    min-height: 20px;
}

QScrollBar::handle:vertical:pressed {
    border-radius: 6px;
    background: qlineargradient(x1: 0, y1: 0, x2: 1, y2: 0, stop: 0 #B8B8B8, stop: 1 #A3A3A3);
    min-height: 20px;
}

QScrollBar::add-line:vertical {
    border: 2px solid #018E88;
    background: #018E88;
    height: 20px;
    subcontrol-position: bottom;
    subcontrol-origin: margin;
}

QScrollBar::sub-line:vertical {
    border: 2px solid #018E88;
    background: #018E88;
    height: 20px;
    subcontrol-position: top;
    subcontrol-origin: margin;
}

QScrollBar::up-arrow:vertical, QScrollBar::down-arrow:vertical {
    border: 2px solid #018E88;
    border-radius: 6px;
    width: 10px;
    height: 10px;
    background: #E5E5E5;
}

QScrollBar::up-arrow:vertical:hover, QScrollBar::down-arrow:vertical:hover {
    border: 2px solid #018E88;
    border-radius: 6px;
    width: 10px;
    height: 10px;
    background: #FFFFFF;
}

QScrollBar::add-page:vertical, QScrollBar::sub-page:vertical {
    background: none;
}

QComboBox:disabled {
    background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                                      stop: 0 #EEF6F6, stop: 1 #000000);
}
QComboBox {
    border: 2px solid #018E88;
    border-radius: 6px;
    padding: 1px 1px 1px 1px;
    min-height: 25px;
    color: #FFFFFF;
    background-color: #018E88;
}

QComboBox:hover {
    background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                                stop: 0 #01BFB6, stop: 1.0 #02E3D7);
}

QComboBox:on { /* shift the text when the popup opens */
    background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                                stop: 0 #01BFB6, stop: 1.0 #02E3D7);
    padding-top: 3px;
    padding-left: 3px;
}

QComboBox::drop-down {
    subcontrol-origin: padding;
    subcontrol-position: top right;
    width: 20px;

    border-left-width: 1px;
    border-left-color: darkgray;
    border-left-style: solid; /* just a single line */
    border-top-right-radius: 3px; /* same radius as the QComboBox */
    border-bottom-right-radius: 3px;
}


QComboBox::down-arrow {
    image: url(./source/arrow_down_normal.png);
}

QComboBox::down-arrow:on { /* shift the arrow when popup is open */
    image: url(./source/arrow_down_press.png);
    top: 1px;
    left: 1px;
}

QComboBox QAbstractItemView {
    show-decoration-selected: 1;
    background-color:#BEDDDE;
    alternate-background-color:#BEDDDE;
    selection-color: #000000;
    selection-background-color:#BEDDDE;
    outline: none;
    font-size: 12px;
    border: 2px solid #018E88;
}
QDateEdit:disabled {
    background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                                      stop: 0 #EEF6F6, stop: 1 #000000);
}
QDateEdit {
    border: 2px solid #018E88;
    border-radius: 6px;
    padding: 1px 1px 1px 1px;
    min-height: 25px;
    color: #FFFFFF;
    background-color: #018E88;
}

QDateEdit:hover {
    background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                                stop: 0 #01BFB6, stop: 1.0 #02E3D7);
}

QDateEdit:on { /* shift the text when the popup opens */
    background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                                stop: 0 #01BFB6, stop: 1.0 #02E3D7);
    padding-top: 3px;
    padding-left: 3px;
}

QDateEdit::drop-down {
    subcontrol-origin: padding;
    subcontrol-position: top right;
    width: 20px;

    border-left-width: 1px;
    border-left-color: darkgray;
    border-left-style: solid; /* just a single line */
    border-top-right-radius: 3px; /* same radius as the QComboBox */
    border-bottom-right-radius: 3px;
}


QDateEdit::down-arrow {
    image: url(./source/arrow_down_normal.png);
}

QDateEdit::down-arrow:on { /* shift the arrow when popup is open */
    image: url(./source/arrow_down_press.png);
    top: 1px;
    left: 1px;
}

QDateEdit QAbstractItemView {
    show-decoration-selected: 1;
    background-color:#BEDDDE;
    alternate-background-color:#BEDDDE;
    selection-color: #000000;
    selection-background-color:#BEDDDE;
    outline: none;
    font-size: 12px;
    border: 2px solid #018E88;
}

QLineEdit {
    border: 2px solid #018E88;
    border-radius: 10px;
    padding: 1px 1px 1px 1px;
    color: #000000;
    background: #EAEAEA;
    selection-color: #000000;
    selection-background-color: #018E88;
    min-height: 25px;
}

QTextEdit {
    border: 2px solid #018E88;
    border-radius: 10px;
    padding: 1px 1px 1px 1px;
    color: #000000;
    background: #EAEAEA;
    selection-color: #000000;
    selection-background-color: #018E88;
    min-height: 25px;
}

QCheckBox {
    spacing: 5px;
}

QCheckBox::indicator {
    width: 24px;
    height: 24px;
}

QCheckBox::indicator:unchecked {
    image: url(./source/checkbox_unchecked.png);/*使用自定義的影象*/
}

QCheckBox::indicator:unchecked:hover {
    image: url(./source/checkbox_unchecked_hover.png);
}

QCheckBox::indicator:unchecked:pressed {
    image: url(./source/checkbox_unchecked_pressed.png);
}

QCheckBox::indicator:checked {
    image: url(./source/checkbox_checked.png);
}

QCheckBox::indicator:checked:hover {
    image: url(./source/checkbox_checked_hover.png);
}

QCheckBox::indicator:checked:pressed {
    image: url(./source/checkbox_checked_pressed.png);
}

/*
QCheckBox::indicator:indeterminate:hover {
    image: url(./source/checkbox_indeterminate_hover.png);
}

QCheckBox::indicator:indeterminate:pressed {
    image: url(./source/checkbox_indeterminate_pressed.png);
}
*/

QRadioButton {
    spacing: 5px;
}

QRadioButton::indicator {
    width: 24px;
    height: 24px;
}

QRadioButton::indicator::unchecked {
    image: url(./source/radiobutton_unchecked.png);
}

QRadioButton::indicator:unchecked:hover {
    image: url(./source/radiobutton_unchecked_hover.png);
}

QRadioButton::indicator:unchecked:pressed {
    image: url(./source/radiobutton_unchecked_pressed.png);
}

QRadioButton::indicator::checked {
    image: url(./source/radiobutton_checked.png);
}

QRadioButton::indicator:checked:hover {
    image: url(./source/radiobutton_checked_hover.png);
}

QRadioButton::indicator:checked:pressed {
    image: url(./source/radiobutton_checked_pressed.png);
}

相關推薦

有關於QT樣式表的一些知識（使用方法和編寫語法）

一、QT樣式表的介紹      QT樣式表文件.qss類似於層疊式樣式表，樣式表文件能夠減少專案中源原件的程式碼量，原始碼中不必再對每個控制元件的樣式進行設定。而且樣式表是一個獨立的檔案，其非常便於修改，對大型工程專案的統一介面風格設計和修改都很便利。      本文僅對

關於git中自己的分支和主分支有沖突的解決方案（git和烏龜git）

eset 更新 關於 pan 我們 沒有 log 關於我 解決沖突 闡述一個案例，最近在開發中遇到一個問題。自己在代碼的主分支拉了一個分支，開始快樂的開發修改了。同事小明也在主分支拉了一個分支，也在快樂的修改。小明的開發速度很快，一個問題很快就解決了，並且把自己的代碼，提交

pig的一些例項（我常用的語法）

在pig中， dump和store會分別完成兩個MR，不會一起進行 1：載入名用正則表示式： LOAD'/user/wizad/data/wizad/raw/2014-0{6,7-0,7-1,7-2,7-3,8}*/3_1/adwords*' 或者定義引用：%defaul

QT樣式表styleSheet（qss）幫助文件的使用，及相關術語、概念

學習樣式表，最好的參考資料莫過於QT自帶的幫助文件，隨便開啟一個QT工程，點選->幫助->索引->styleSheet，即可開啟QT所有關於樣式表的幫助資訊，如下圖所示： 比如，我們想查查下拉列表控制元件QComboBox支援哪些樣式屬性，可以點選上圖

QT樣式表

listview 空間 vertica pop 顏色 dock des imu stat QT樣式表 一、QT樣式表簡介 1、QT樣式表簡介 QSS的主要功能是使界面的表現與界面的元素分離，使得設計皮膚與界面控件分離的軟件成為可能。 QT樣式表是允許用戶定制wi

ajax傳值改變對應樣式（方法：定義屬性）

改變 屬性 .com 圖片 ajax http inf 方法 傳值 ajax傳值改變對應樣式（方法：定義屬性）

table--邊框樣式設定 Table的一些設定（自適應以及溢位）

Table的一些設定（自適應以及溢位）   table的兩個屬性 單行溢位點點顯示 表格的寬度設定 雙欄自適應連續連續英文符換行 1、table重置的兩個屬性： ①border-collapse: collapse;&nbs

HTML與CSS的一些知識（一）

　　一般寫程式碼的時候，總會有些小錯誤。為了便於修改以及查詢，所以程式碼格式要寫規範，而且一定一定要寫註釋。因為有時候程式碼寫得多了，真的連自己都找不到自己要找的東西在哪裡。還有命名也要見名知意。 　　再說一些HTML相關： 　　1、標籤分類：　 　　　　　　a、塊級標籤：<div><

HTML與CSS的一些知識（二）

　　續； 　　5、表單標籤<form></form> 　　　　用於收集使用者資訊，統一提交到伺服器 　　　　一般用input標籤收集，再用提交按鈕提交；input標籤根據type屬性值不同有不同的型別；而且表單裡面要把name屬性寫上，因為提交都要有； 　　　　選項的單選和多選

HTML與CSS的一些知識（三）

CSS： 　　1、三大樣式：行內（內嵌）、內部（內聯）、外部（外聯）；基本都知道。 　　2、三大特性： 　　　　a、繼承性：父級樣式會被子級繼承（！important不會被繼承，<a></a>標籤寫了href屬性不會繼承父級的color屬性） 　　　　b、層疊性：樣式發生衝突時

HTML與CSS的一些知識（四）

　　續： 　　　　line-height　　用於設定一行文字行高，一般用於文字的垂直居中； 　　　　display　　用於設定元素的顯示方式 　　　　float　　浮動，讓元素漂浮起來排列 　　　　　　浮動的影響： 　　　　　　　　a.浮動後，行內元素可以支援寬高 　　　　　　　　b.文字會讓位，

關於C#的一些知識（一）

      前幾個月圖一時爽快辭了職，自認為做了2年.net開發，對C#可算是輕車熟路，然而出去面試卻坑的要死~被別人問的一臉懵逼。突然意識到自己這倆年就是一個程式碼搬運工，只知道日復一日的寫程式碼，卻從來沒問過為什麼這樣寫？為什麼這樣寫就能實現這樣的問題。之後準備開一個系列

## CSS基礎知識 > CSS層疊樣式表，主要是給頁面編寫樣式的 ### 1.CSS的匯入方式

原 ## CSS基礎知識 > CSS層疊樣式表，主要是給頁面編寫樣式的 ### 1.CSS的匯入方式 - 行內樣式 ``` /* * 行內樣式：通過元素的style屬性設定CSS樣式 * 1

網頁新增CSS樣式表的四種方法

一、使用STYLE屬性： 將STYLE屬性直接加在個別的元件標籤裡。 <元件(標籤) STYLE="性質(屬性)1: 設定值1; 性質(屬性)2: 設定值2; ...} 例如： <TD STYLE="COLOR:BLUE; font-size:9pt; fo

網易面試題之 牛牛的作業薄上有一個長度為 n 的排列 A，這個排列包含了從1到n的n個數，但是因為一些原因， * 其中有一些位置（不超過 10 個）看不清了，但是牛牛記得這個數列順序對的數量是 k，

package wangyi; /** * Created by Administrator on 2016/12/7. * 牛牛的作業薄上有一個長度為 n 的排列 A，這個排列包含了從1到n的n個數，但是因為一些原因， * 其中有一些位置（不超過 10 個）看不清

Qt樣式表(QSS)Demo：黑色扁平加漸變

（2019-1-3改進） 把上次的純色背景加了點漸變，感覺好看了點。 關於顏色顯示：有些電腦顯示器設定偏亮/暗，可以調節下。 關於控制元件大小：標題高度30畫素，控制元件高度28px。 關於字型大小：一般設定為15px的宋體，沒有考慮解析度問題。 關於圖示：阿里圖示https

Qt樣式表(QSS)Demo：黑色扁平風格

從昨天下午到現在整理了一天，有點遺憾是表頭高亮時字型加粗沒找到怎麼修改，還有子選單的小三角。 時間問題，Demo裡只添加了我常用的控制元件，像QListView，QCalendarWidget等都沒做。 其中，圖示基本是在阿里巴巴向量圖示庫找的，整體效果圖如下： 關於顏色

Qt樣式表qss的兩種用法

Qt的qss（樣式表）使我們能夠自定義控制元件的顯示效果，令介面看起來不再單調，更具個人風格，而在VS+Qt的開發環境下，實現樣式表主要有兩種方式，下面以QPushButton為例介紹這兩種實現方式： 1.通過Qt Designer修改樣式表   在VS下新建Qt工程，會自

PyQt5圖形和特效之Qt樣式表設定

前言 由於Qt樣式表的引入，定製Qt部件的外觀樣式變得非常簡單。無論你是想僅僅修改一個現有部件的外觀，還是想從零開始設計一套全新的介面風格，現在都有了一種新的方法而不必再去繼承並實現一個QStyle的子類。 1. 何為Qt樣式表

QT樣式表設定背景色 background-color無效的原因

例如我們給一個按鈕設定背景色為紅色：QPushButton {        background-color: red; }結果發現，按鈕的背景色並沒有被設定為紅色！問題的原因，QT的幫助文件裡講了，比較難找，開啟幫助文件，依次展開->style sheet->