Qt Style Sheets bis: QSS common grammar and style

A brief

Qt Style Sheets (hereinafter referred to as QSS) terminology and grammar rules and CSS nearly identical. If you are familiar with CSS, you can quickly browse the contents. Not familiar with, then you can go to W3School - CSS or own CSS blog essay a brief look.

Before explaining the style sheet syntax, we look at an example:

/*按钮普通态*/
QPushButton
{
    /*字体为微软雅黑*/
    font-family:Microsoft Yahei;
    /*字体大小为20点*/
    font-size:20pt;
    /*字体颜色为白色*/    
    color:white;
    /*背景颜色*/  
    background-color:rgb(14 , 150 , 254);
    /*边框圆角半径为8像素*/ 
    border-radius:8px;
}

/*按钮停留态*/
QPushButton:hover
{
    /*背景颜色*/  
    background-color:rgb(44 , 137 , 255);
}

/*按钮按下态*/
QPushButton:pressed
{
    /*背景颜色*/  
    background-color:rgb(14 , 135 , 228);
    /*左内边距为3像素，让按下时字向右移动3像素*/  
    padding-left:3px;
    /*上内边距为3像素，让按下时字向下移动3像素*/  
    padding-top:3px;
}

The above example is achieved the effect of three-state button style sheet.

Note: a higher priority than the style sheet settings ui file settings.

Second, the style sheet syntax

2.1 style rules

QSS contains a style rule, a rule consists of a pattern and declarations of the selector, which selector member designated by the influence rule declaration specifies what properties should be provided on the member. E.g:

QPushButton { color: red }

In the above example QPushButton selector is, {color: red} is declared, and the rule specifies QPushButton subclass (e.g.: MyPushButton) should be used as a red foreground color.

Several selector can specify the same statement with a comma (,) to separate selector. E.g:

QPushButton, QLineEdit, QComboBox { color: red }

Sequence is equivalent to three rules:

QPushButton { color: red }
QLineEdit { color: red }
QComboBox { color: red }

Regulation statements is a part of attribute-value pairs (property: value) lists, contained in braces, separated by semicolons. E.g:

QPushButton { color: red; background-color: white }

Reference Assistant: Qt Style Sheets Referencein List of Propertiespart.

Note: QSS usually not case sensitive (ie: color, Color, COLOR, cOloR refer to the same property), the only exception is the class name (class names), object names (object names?), Attribute names (property names?) Are case sensitive write.

2.2 Selector Type

The following table summarizes the most useful selectors, all examples use the selector simplest type, the type selector QSS support all the selectors defined in CSS2 ?.

Selector	Examples	Explanation
Universal selector	*	Match all components
Type Selector	QPushButton	Examples of matching its subclasses QPushButton
Attribute selectors	QPushButton[flat=”false”]	QPushButton matching flat in an instance attribute to false.
Class selector	.QPushButton	Examples QPushButton matching, but it does not contain the subclass. Equivalent * [class ~ = "QPushButton"].
ID selector	QPushButton#okButton	ObjectName is QPushButton match all instances of okButton.
Descendant selectors	QDialog QPushButton	Matching QPushButton belong QDialog descendants (children, grandchildren, etc.) of all instances.
Child selector	QDialog > QPushButton	Matching a direct subclass belonging QPushButton QDialog all instances.

2.3 child controls

For style complex components, you need to access child controls, for example: QComboBox QSpinBox the down button of up and down arrows. The selector may include a child control, making it possible to limit the application of the rules specific to child control member. E.g:

QComboBox::drop-down { image: url(dropdown.png) }

The above rules specify QComboBoxe drop-down button style, although the double colon (: :) syntax reminiscent of CSS3 pseudo-element, but Qt child controls have different semantics cascade conceptually.

Child control is always positioned relative to the other reference element, the reference element may be a small child or other control member. For example: the QComboBox :: drop-down placement, the default is placed in the upper right area QComboBox. The :: drop-down placement, the default center of the :: drop-down child controls.

width and height attributes can be used to control the size of the child control Note: setting a picture provided implicitly control the size of the child. Relative positioning (position: relative): the sub-control may be changed relative to the initial position shift amount. For example: When QComboBox drop-down button is pressed, we may prefer internal offset arrow is pressed to produce an effect. To do this, we can specify:

QComboBox::down-arrow {
    image: url(down_arrow.png);
}
QComboBox::down-arrow:pressed {
    position: relative;
    top: 1px; left: 1px;
}

Absolute positioning (position: absolute): allows child controls to change the position and the size of the reference element is not restricted.

Reference Assistant: Qt Style Sheets Referencein List of Sub-Controlspart, and Qt Style Sheets Examplesin Customizing the QPushButton's Menu Indicator Sub-Controlpart.

2.4 the pseudo selector

The selector may comprise a pseudo-state, meant to limit the application rule-based component state. Dummy state occurs after the selector, with a colon (:) association. For example, the mouse over the button:

QPushButton:hover { color: white }

Pseudo-state may be an exclamation mark (!) Operator to indicate negation. For example, when the mouse is not across the QRadioButton:

QRadioButton:!hover { color: red }

Can make use of pseudo-state, in this case, the equivalent of a logical and implicit. For example, when the mouse over selected QCheckBox:

QCheckBox:hover:checked { color: white }

No pseudo-state may be connected, for example, when the mouse button is pressed across a non-:

QPushButton:hover:!pressed { color: blue; }

If desired, the comma operator may be used to represent a logical or:

QCheckBox:hover, QCheckBox:checked { color: white }

It may be combined with the pseudo-state child control, for example:

QComboBox::drop-down:hover { image: url(dropdown_bright.png) }

See Assistant: Qt Style Sheets Referencein List of Pseudo-Statespart.

2.5 to resolve conflicts

Examples of a

When the specified pattern having different properties of the same value, there will be conflict. E.g:

QPushButton#okButton { color: blue }
QPushButton { color: red }

To resolve this conflict, we must take into account the special nature of the selector. The above example, the QPushButton the okButton # is considered more specific than the QPushButton, since it generally refers to a single object, rather than all instances of a class. So okButton the button text color is set to blue, and the other button text is still set to red.

Example Two

Similarly, using the pseudo-state are more specific than those not specified pseudo-state selector. Therefore, the following style should specify a QPushButton hover text color to white, otherwise the text color to red.

QPushButton:hover { color: white }
QPushButton { color: red }

Example Three

QPushButton:hover { color: white }
QPushButton:enabled { color: red }

Here, two selectors have the same specificity, but a rule of priority, that is QPushButton:enabled { color: red }a higher priority, so when the button is enabled by default, regardless of whether the mouse is hovering over the button, text color is always white.

QPushButton:enabled { color: red }
QPushButton:hover { color: white }

If you want to hover over the button text color is white, according to the principle of higher priority rules later, the white color is that the rules can be in the back, as shown above.

Alternatively, you can make the text color to white rule more specific :

QPushButton:hover:enabled { color: white }
QPushButton:enabled { color: red }

Example Four

Similar problems arise with the use of the type selector. Consider the following example:

QPushButton { color: red }
QAbstractButton { color: blue }

Two rules apply to QPushButton instance (because QPushButton inherited from QAbstractButton) and conflicting color attributes. Because QPushButton inheritance QAbstractButton, so QPushButton more specific than QAbstractButton, this should be the button text color is red. However, for the calculation of QSS, all have the same type selection particularity, the last occurrence of priority rules, so in fact the button text color is blue. If you need to set QPushButtons red text, you need to reorder rules.

to sum up

To determine the specificity of a rule, following the QSS CSS2 specification , a calculation method selector particularity as follows:

Number (= a) Calculation of ID attribute selector
Calculating the number of dummy state classes, and other property selector (= b)
Number (= c) calculating selector element names
Ignore pseudo-elements (ie child controls).

ABC particularity three numbers (in a digital system having a large base) given in series. Some examples are as follows:

*                 {}  /* a=0 b=0 c=0 -> specificity =   0 */
LI                {}  /* a=0 b=0 c=1 -> specificity =   1 */
UL LI             {}  /* a=0 b=0 c=2 -> specificity =   2 */
UL OL+LI          {}  /* a=0 b=0 c=3 -> specificity =   3 */
H1 + *[REL=up]    {}  /* a=0 b=1 c=1 -> specificity =  11 */
UL OL LI.color    {}  /* a=0 b=1 c=3 -> specificity =  13 */
LI.color.width    {}  /* a=0 b=2 c=1 -> specificity =  21 */
#okButton         {}  /* a=1 b=0 c=0 -> specificity = 100 */

2.6 cascading effect

QSS may be provided in the QApplication, the parent member, sub-components. When a conflict occurs, regardless of the rules of the special nature of the conflict, its own style sheet total component takes precedence over any inherited style sheets. Consider the following example. First, we set the style sheet QApplication:

qApp->setStyleSheet("QPushButton { color: white }");

Then, we set QPushButton stylesheet:

myPushButton->setStyleSheet("color: blue");

QPushButton stylesheet forced QPushButton (and any subcomponents) blue text, although the style sheet rules within the application range provides more specific.

2.7 inheritance

In classic CSS, when font and color is not explicitly set, it will automatically inherited from the parent. When using QSS, member is not automatically inherited from the parent font and color. For example, a QGroupBox contains QPushButton:

qApp->setStyleSheet("QGroupBox { color: red; } ");

QPushButton not inherit his father QGroupBox color, but color display system.

Three, CSS style common

3.1 CSS text properties

CSS text attributes and examples	Explanation
color:#999999;	Text color
font-family: Microsoft Yahei, sans-serif;	Font family
font-size:16pt;	font size
font-style:itelic;（normal、oblique）	Font style
letter-spacing:1pt;	The distance between the word
line-height:200%;	Set Row Height
font-weight:bold;（lighter、normal、数值900）	Font weight
text-decoration:underline;（line-through、overline、none）	Font modification
text-align:left;（right、center、justify）	Left-aligned text
vertical-align:top;（bottom、middle、text-top、text-bottom）	Vertical alignment
text-transform:uppercase;（lowercase、capitalize）	English uppercase
font-variant: small-caps;（normal）	Small caps

3.2 CSS background styles:

CSS background styles and examples	Explanation
background:black;	The background color is black
background-color:#F5E2EC;	background color
background-image:url(/image/bg.gif);	Background picture
background:transparent;	Perspective background
background-repeat : repeat;	Repeat arrangement - default page
background-position : center;	BACKGROUND specified position - centered

3.3 CSS border blank

CSS border blank and sample	Explanation
padding:5px 10px 5px 10px;	All borders to remain blank
padding-top:10px;	Top border left blank
padding-right:10px;	Right border left blank
padding-bottom:10px;	Bottom border left blank
padding-left:10px;	Left border left blank

3.4 CSS border

CSS border recommend ways to write	Explanation
border:1px solid red;	All Border Line
border-top:1px solid #6699cc;	On the border
border-bottom:1px solid #6699cc;	Bottom border
border-left:1px solid #6699cc;	Left border
border-right:1px solid #6699cc;	Right border
border-radius:8px;	Border radius

These are the recommended way of writing, the writing may be used a conventional manner, as shown below:

CSS border conventional way of writing	Explanation
border-top-color:#369;	Setting the border color
border-top-width:1px;	Border width is provided on the
border-top-style:solid	Set the border style

Other border style as follows:

solid - solid line
dotted - dashed
double - double
inset - the bezel
outset - the rim
groove - dimensional convex block
ridge - dimensional relief housing

3.5 CSS border style

CSS border style and example	Explanation
margin-top:10px;	The boundary value
margin-right:10px;	Right boundary value
margin-bottom:10px;	下边界值
margin-left:10px;	左边界值

注：px:相对长度单位，像素（Pixel）。pt:绝对长度单位，点（Point）。

参考：

Qt css样式大全(整理版）