Qt Style Sheets (QSS)

https://doc.qt.io/qtforpython/overviews/stylesheet-examples.html

Qt Style Sheets Examples - Qt for Python

https://github.com/topics/stylesheet?l=python 

GitHub: Let’s build from here

 

https://github.com/Advik-B/QtTheme

지금까지 QPalette를 사용하여 PyQt6 앱에 사용자 지정 색상을 적용하는 방법을 살펴 보았습니다. 그러나 Qt5에서 위젯 모양을 만들 수있는 다른 많은 사용자 정의가 있습니다. 이 사용자 정의를 허용하기 위해 제공되는 시스템을 Qt 스타일 시트 (QSS)라고합니다.

QSS는 개념적으로 웹 스타일을 지정하는 데 사용되는 CSS(CSS 스타일시트)와 매우 유사하며 유사한 구문과 접근 방식을 공유합니다. 이 섹션에서는 QSS의 몇 가지 예와 QSS를 사용하여 위젯 모양을 수정하는 방법을 살펴보겠습니다.

 

GitHub - Advik-B/QtTheme: Theme manager for Qt Apps

GitHub - Advik-B/QtTheme: Theme manager for Qt Apps

 

Style editor

themes/qss_tester.py

import sys

from PyQt6.QtCore import Qt
from PyQt6.QtGui import QColor, QPalette
from PyQt6.QtWidgets import (
    QApplication,
    QCheckBox,
    QComboBox,
    QLabel,
    QLineEdit,
    QMainWindow,
    QPlainTextEdit,
    QPushButton,
    QSpinBox,
    QVBoxLayout,
    QWidget,
)


class MainWindow(QMainWindow):
    def __init__(self):
        super().__init__()

        self.setWindowTitle("QSS Tester")

        self.editor = QPlainTextEdit()
        self.editor.textChanged.connect(self.update_styles)

        layout = QVBoxLayout()
        layout.addWidget(self.editor)

        # Define a set of simple widgets.
        cb = QCheckBox("Checkbox")
        layout.addWidget(cb)

        combo = QComboBox()
        combo.setObjectName("thecombo")
        combo.addItems(["First", "Second", "Third", "Fourth"])
        layout.addWidget(combo)

        sb = QSpinBox()
        sb.setRange(0, 99999)
        layout.addWidget(sb)

        l = QLabel("This is a label")
        layout.addWidget(l)

        le = QLineEdit()
        le.setObjectName("mylineedit")
        layout.addWidget(le)

        pb = QPushButton("Push me!")
        layout.addWidget(pb)

        self.container = QWidget()
        self.container.setLayout(layout)

        self.setCentralWidget(self.container)

    def update_styles(self):
        qss = self.editor.toPlainText()
        self.setStyleSheet(qss)


app = QApplication(sys.argv)
app.setStyle("Fusion")

w = MainWindow()
w.show()

app.exec()

Try entering the following style rules in the box at the top, and comparing the result with the screenshots to make sure it’s working.

 

QLabel { background-color: yellow }

 

 

QLineEdit { background-color: rgb( 255 , 0 , 0 ) }

 

QLineEdit {

border-width: 7px ;

border-style: dashed;

border-color: red ;

}

 

[ 참조 ]

https://doc.qt.io/qt-5/stylesheet-reference.html

 

 

Styling properties

Next we’ll go through the properties available to style widgets with QSS. These have been broken down into logical sections, containing properties that are related to one another to make it easier to digest. You can use the QSS rule tester app we just created to test these styles out on the various widgets.

The types used in the following tables are listed below. Some of these are compound types, made up of other entries.

 

Property	Type	Description
Alignment	top | bottom | left | right | center	Horizontal and/or vertical alignment.
Attachment	scroll | fixed	Scroll or fixed attachment.
Background	Brush | Url | Repeat | Alignment	Compound type of Brush, Url,Repeat, andAlignment.
Boolean	0 | 1	True (1) or False (0).
Border	Border Style | Length | Brush	Shorthand border property.
Border Image	none | Url Number (stretch | repeat)	An image composed of nine parts (top left, top center, top right, center left, center, center right, bottom left, bottom center, and bottom right).
Border Style	dashed | dot-dash | dot-dot-dash | dotted | double | groove | inset | outset | ridge | solid | none	The pattern used to draw a border.
Box Colors	Brush	Up to four values of Brush, specifying the top, right, bottom, and left edges of a box, respectively. If the left color is omitted will use right, if bottom is omitted will use top.
Box Lengths	Length	Up to four values of Length, specifying the top, right, bottom, and left edges of a box, respectively. If the left color is omitted will use right, if bottom is omitted will use top.
Brush	Color | Gradient | PaletteRole	A Color, Gradient or an entry in the Palette.
Color	rgb(r,g,b) | rgba(r,g,b,a) | hsv(h,s,v) | hsva(h,s,v,a) | hsl(h,s,l) | hsla(h,s,l,a) | #rrggbb | Color Name	Specifies a color as RGB (red, green, blue), RGBA (red, green, blue, alpha), HSV (hue, saturation, value), HSVA (hue, saturation, value, alpha), HSL (hue, saturation, lightness), HSLA (hue, saturation, lightness, alpha) or a named color. The rgb() or rgba() syntax can be used with integer values between 0 and 255, or with percentages.
Font	(Font Style | Font Weight) Font Size	Shorthand font property.
Font Size	Length	The size of a font.
Font Style	normal | italic | oblique	The style of a font.
Font Weight	normal | bold | 100 | 200… | 900	The weight of a font.
Gradient	qlineargradient | qradialgradient | qconicalgradient	Lineargradients between start and end points. Radialgradients between a focal point and end points on a circle surrounding it. Conical gradients around a center point. See the QLinearGradient documentation for syntax.
Icon	Url(disabled | active | normal | selected) (on | off )	A list of url,QIcon.ModeandQIcon.State. e.g. file-icon:  url(file.png), url(file_selected.png)  selected;
Length	Number(px | pt | em | ex)	A number followed by a measurement unit. If no unit is given, uses pixels in most contexts. One of px: pixels, pt: the size of one point (i.e., 1/72 of an inch), em: the em `width of the font (i.e., the width of 'M'), ex: the ex width of the font (i.e., the height of 'x')
Number	A decimal integer or a real number	e.g. 123, or 12.2312
Origin	margin | border | padding | content	See box model for more details.
PaletteRole	alternate-base | base | bright-text | button | button-text | dark | highlight | highlighted- text | light | link | link-visited | mid | midlight | shadow | text | window | window-text	These values correspond the Color roles in the widget’s QPalette, e.g. color: palette(dark);
Radius	Length	One or two occurrences of Length.
Repeat	repeat-x | repeat-y | repeat | no-repeat	repeat-x: Repeat horizontally. repeat-y: Repeat vertically. repeat: Repeat horizontally  and  vertically.  no-repeat: Don’t repeat.
Url	url(filename)	filename is the name of a file on disk or stored using the Qt Resource System.

 

The full details of these properties and types are also available in the QSS reference documentation.

https://doc.qt.io/Qt-5/stylesheet-reference.html#list-of-properties

 

Text styles

 

텍스트의 글꼴, 색상 및 스타일 (굵게, 기울임 꼴, 밑줄)을 수정하는 데 사용할 수있는 텍스트 속성부터 시작하겠습니다. 모든 위젯 또는 컨트롤에 적용할 수 있습니다.

 

Property	Type (Default)	Description
color	Brush  (QPalette Foreground)	The color used to render text.
font	Font	Shorthand notation for setting the text’s font. Equivalent to specifying font-family, font-size, font-style, and/or font- weight
font-family	String	The font family.
font-size	Font Size	The font size. In this version of Qt, only pt and px metrics are supported.
font-style	normal | italic | oblique	The font style.
font-weight	Font Weight	The weight of the font.
selection-background- color	Brush (QPalette Highlight)	The background of selected text or items.
selection-color	Brush (Palette HighlightedText)	The foreground of selected text or items.
text-align	Alignment	The alignment of text and icon within the contents of the widget.
text-decoration	none | underline | overline | line-through	Additional text effects

 

아래 예제 코드 조각은 QLineEdit의 색을 빨간색으로, 선택한 텍스트의 배경색을 노란색으로, 선택한 텍스트의 색을 파란색으로 설정합니다.

QLineEdit {
color: red;
selection-color: blue;
selection-background-color: yellow;
}

The target separated by a comma.

QSpinBox, QLineEdit {
color: red;
selection-color: blue;
selection-background-color: yellow;
}

QSpinBox,  QLineEdit  and QPushButton, setting the font bold & italic and the text-align to right.

QSpinBox, QLineEdit, QPushButton {
color: red;
selection-color: blue;
selection-background-color: yellow;
font-style: italic;
font-weight: bold;
text-align: right;
}

그러면 아래와 같은 결과가 생성됩니다. 텍스트 정렬 속성은 QSpinBox 또는 QLineEdit의 정렬에 영향을 미치지 않았습니다. 이 두 위젯 모두에 대해 스타일이 아닌 .setAlignment() 메서드를 사용하여 정렬을 설정해야 합니다.

 

Backgrounds

텍스트 스타일을 지정하는 것 외에도 단색과 이미지로 위젯 배경의 스타일을 지정할 수도 있습니다. 이미지의 경우 위젯 영역 내에서 이미지가 반복되고 배치되는 방법을 정의하는 여러 가지 추가 속성이 있습니다.

Property		Type (Default)	Description
background		Background	Shorthand notation for setting the background. Equivalent to specifying background-color, background-image, background-repeat, and/or background- position. See also background-origin, selection-background- color, background-clip, background-attachment and alternate- background-color.
background-color		Brush	The background color used for the widget.
background-image		Url	The background image used for the widget. Semi- transparent parts of the image let the background- color shine through.
background-repeat		Repeat (both)	Whether and how the background image is repeated to fill the background-origin rectangle.
background-position		Alignment (top-left)	The alignment of the background image within the background-origin rectangle.
background-clip		Origin (border)	The widget’s rectangle, in which the background is drawn.
background-origin		Origin (padding)	The widget’s background rectangle, to use in conjunction with background-position and background-image.

 

QPlainTextEdit {

color: white ;

background-image: url(../basic/otje.jpg);

}

 

To position the background in the widget you can use the background-position property. 

 

QPlainTextEdit {

color: white ;

background-image: url(../basic/otje.jpg);

background-position: center center;

}

 

QPlainTextEdit {

color: white ;

background-image: url(../basic/otje.jpg);

background-position: bottom right;

}

The origin rectangle can be modified using the background-origin property. This accepts one of the values margin, border, padding or content which defines that specific box as the reference of background position alignment.

To understand what this means we’ll need to take a look at the widget box model.

 

 

The widget Box Model

 

 

The properties available to modify the various boxes are given below.

Property	Type (Default)	Description
border	Border	Shorthand notation for setting the widget’s border. Equivalent to specifying border-color, border-style, and/or border-width. Also border-top, border-right, border-bottom and border- left.
border-color	Box Colors (QPalette Foreground)	The color of all the border’s edges. Also border-top-color,  border-right-color, border-bottom-color,  border-left-color for specific edges.
border-image	Border Image	The image used to fill the border. The image is cut into nine parts and stretched appropriately if necessary.
border-radius	Radius	The radius (curve) of the border’s corners. Also border-top-left-radius, border-top-right-radius,  border- bottom-right-radius and border-bottom- left-radius for specific corners.
border-style	Border Style (none)	The style of all the border’s edges. Also border-top-style,   border-right-style, border-bottom-style and border-left- style for specific edges.
border-width	Box Lengths	The width of the border. Also border- top-width, border-right-width, border- bottom-width and border-left-width.
margin	Box Lengths	The widget’s margins. Also margin-top, margin-right, margin-bottom and margin- left.
outline		The outline drawn around the object’s border.
outline-color	Color	The color of the outline. See also border-color.
outline-offset	Length	The outline’s offset from the border of the widget.
outline-style		Specifies the pattern used to draw the outline. See also border-style.
outline-radius		Adds rounded corners to the outline. Also outline-bottom-left-radius, outline-bottom-right-radius, outline- top-left-radius  and  outline-top-right- radius`". `padding,Box Lengths,"The widget’s padding. Also padding-top, padding-right, padding-bottom and padding-left.

The following example modifies the margin, border and padding of the QPlainTextEdit widget.

QPlainTextEdit {

margin: 10 ;

padding: 10px ;

border: 5px solid red ;

}

units

• px pixels
• pt the size of one point (i.e. 1/72 of an inch)
• em the em width of the font (i.e. the width of 'M')
• ex the ex width of the font (i.e. the height of 'x')

 

QPlainTextEdit {

margin: 10;

padding: 10px;

border: 5px solid red;

border-radius: 15px;

}

 

Sizing widgets

 

Property	Type (Default)	Description
max-height	Length	The widget’s or a subcontrol’s maximum height.
max-width	Length	The widget’s or a subcontrol’s maximum width.
min-height	Length	The widget’s or a subcontrol’s minimum height.
min-width	Length	The widget’s or a subcontrol’s minimum  width.

 

QLineEdit {

min-height: 50 ;

}

 

To specify an exact size for a widget, you can specify both a min- and max- value for the dimension.

QLineEdit {

min-height: 50 ;

max-height: 50 ;

}

이렇게 하면 위젯이 이 높이로 잠겨 콘텐츠 변경에 따라 크기가 조정되지 않습니다.

 

Widget specific styles

 

Property	Type (Default)	Description
alternate-background- color	Brush (QPalette AlternateBase)	The alternate background color used in QAbstractItemView subclasses.
background-attachment	Attachment (scroll)	Determines whether the background-image in a QAbstractScrollArea is scrolled or fixed with respect to the viewport.
button-layout	Number (SH_DialogButtonLayout)	The layout of buttons in a QDialogButtonBox or a QMessageBox. The possible values are 0 (Win), 1 (Mac), 2 (KDE), 3 (Gnome) and 5 (Android).
dialogbuttonbox-buttons- have-icons	Boolean	Whether the buttons in a QDialogButtonBox show icons. If this property is set to 1, the buttons of a QDialogButtonBox show icons; if it is set to 0, the icons are not shown.
gridline-color	Color (SH_Table_GridLineColor)	The color of the grid line in a QTableView.
icon	Url+	The widget icon. The only widget currently supporting this property is QPushButton.
icon-size	Length	The width and height of the icon in a widget.
lineedit-password- character	Number (SH_LineEdit_PasswordChar acter)	The QLineEdit password character as a Unicode number.
lineedit-password-mask- delay	Number (SH_LineEdit_PasswordMask Delay)	The QLineEdit password mask delay in milliseconds before lineedit-password- character is applied.
messagebox-text- interaction-flags	Number (SH_MessageBox_TextIntera ctionFlags)	The interaction behavior for text in a message box (from Qt.TextInteractionFlags).
opacity	Number (SH_ToolTipLabel_Opacity)	The opacity for a widget (tooltips only) 0-255.
paint-alternating-row- colors-for-empty-area	bool	Whether a QTreeView paints  alternating  rows past the end of the data.
show-decoration-selected	Boolean (SH_ItemView_ShowDecorati onSelected)	Controls  whether selections in a QListView cover the entire row or just the extent of the text.
titlebar-show-tooltips- on-buttons	bool	Whether tool tips are shown on window title bar buttons.
widget-animation- duration	Number	How long an animation should last (milliseconds).

 

Targeting

다양한 QSS 속성을 살펴보고 유형에 따라 위젯에 적용했습니다. 그러나 개별 위젯을 어떻게 타겟팅 할 수 있으며 Qt는 어떤 위젯에 언제 어떤 규칙을 적용할지 어떻게 결정합니까? 다음으로 QSS 규칙과 상속의 효과를 대상으로 하는 다른 옵션을 살펴보겠습니다.

Type	Example	Description
Universal	*	Matches all widgets.
Type	QPushButton	Instances of QPushButton or its subclasses.
Property	QPushButton[flat="false"]	Instances of QPushButton that are not flat. Can compare with any property that supports .toString(). Can also use class="classname"
Property contains	QPushButton[property~= "something"]	Instances of QPushButton where property (a list of QString) does not contain the given value.
Class	`.QPushButton	Instances of QPushButton but not subclasses.
ID	QPushButton#okButton	A QPushButton instance whose object name is okButton.
Descendant	QDialog QPushButton	Instances of QPushButton that are descendants (children, grandchildren, etc.) of a QDialog.
Child	QDialog > QPushButton	Instances of QPushButton that are immediate children of a QDialog.

 

Type

이미 QSS 테스터에서 type targeting이 작동하는 것을 보았습니다.

여기서는 개별 위젯의 유형 이름에 대한 규칙을 대상으로 했습니다(예: QComboBox 또는 QLineEdit).

그러나 이러한 방식으로 형식을 타겟팅하면 해당 형식의 모든 하위 클래스도 대상으로 지정합니다.

예를 들어 QAbstractButton을 대상으로 하여 파생된 모든 유형을 대상으로 지정할 수 있습니다.

QAbstractButton {

background: orange ;

}

이 동작은 모든 위젯이 QWidget을 사용하여 타겟팅 될 수 있음을 의미합니다.

예를 들어 다음은 모든 위젯의 배경을 빨간색으로 설정합니다.

QWidget {

background: red ;

}

 

Class - .

그러나 때로는 위젯의 특정 클래스 만 대상으로하고 하위 클래스는 타겟팅하지 않으려 고합니다.

이렇게 하려면 클래스 타겟팅을 사용할 수 있습니다 — 앞에 . 을 형식 이름으로 바꿉니다.

 

다음은 QWidget의 인스턴스를 대상으로하지만 QWidget에서 파생 된 클래스는 대상으로하지 않습니다.

QSS 테스터에서 우리가 가지고있는 유일한 QWidget은 레이아웃을 유지하는 데 사용되는 중앙 위젯입니다. 따라서 다음은 해당 컨테이너 위젯 주황색의 배경을 변경합니다.

.QWidget {

background: orange ;

}

 

ID targeting - #

모든 Qt 위젯에는 고유하게 식별하는 객체 이름이 있습니다. Qt Designer에서 위젯을 만들 때 객체 이름을 사용하여 상위 창에서 객체를 사용할 수있는 이름을 지정합니다. 그러나 이 관계는 편의를 위한 것일 뿐이며 사용자 고유의 코드에서 위젯에 대해 원하는 개체 이름을 설정할 수 있습니다. 그런 다음 이러한 이름을 사용하여 QSS 규칙을 특정 위젯에 직접 타겟팅할 수 있습니다.

QSS 테스터 앱에서는 테스트를 위해 QComboBox 및 QLineEdit에 ID를 설정했습니다.

combo.setObjectName('thecombo')

le.setObjectName('mylineedit')

 

Property -  [property="<value>"]

You can target widgets by any widget property which is available as a string (or who’s value has a .toString() method). This can be used to define some quite complex states on widgets.

 

The following is a simple example targeting a QPushButton by the text label.

QPushButton[text="Push me!"] {

background: red;

}

규칙은 스타일시트가 처음 설정될 때 위젯에 적용되며 속성의 변경에 응답하지 않습니다. QSS 규칙의 대상이 되는 특성이 수정되는 경우, 이를 적용하려면 스타일시트 재계산을 트리거해야 합니다(예: 스타일시트를 다시 재설정).

 

Descendant

지정된 위젯 유형의 하위 항목을 대상으로 지정하려면 위젯을 함께 연결할 수 있습니다. 다음 예제는 QMainWindow 의 자식 인 모든 QComboBox (직계 자식이든 다른 위젯 또는 레이아웃 내에 중첩 된 것이든)를 대상으로합니다.

QMainWindow QComboBox {

background: yellow ;

}

모든 하위 항목을 타겟팅하려면 전역 선택기를 타겟팅의 최종 요소로 사용할 수 있습니다. 또한 여러 형식을 함께 연결하여 앱에서 해당 계층이 있는 위치만 대상으로 지정할 수 있습니다.

QMainWindow QWidget * {

background: yellow ;

}

 

Child -  >

>를 사용하여 다른 위젯의 직계 자식인 위젯을 대상으로 지정할 수도 있습니다. 이것은 정확한 계층 구조가있는 곳과 일치합니다.

예를 들어, 다음은 QMainWindow의 직계 자식인 QWidget 컨테이너만 대상으로합니다.

QMainWindow > QWidget {

background: green ;

}

But the following will not match anything, since in our QSS app the QComboBox widget is not a direct child of the QMainWindow.

QMainWindow > QComboBox { /* matches nothing */

background: yellow ;

}

 

Inheritance

스타일 시트는 QApplication 및 위젯에 적용 할 수 있으며 스타일이 지정된 위젯 및 모든 자식에 적용됩니다.

위젯의 효과적인 스타일 시트는 QApplication 자체의 스타일 시트에 더해 모든 조상 (부모, 조부모, ... 창까지)을 통합한다 . 규칙은 지정 순으로 적용됩니다. 즉, ID로 특정 위젯을 타겟팅하는 규칙은 해당 유형의 모든 위젯을 대상으로 하는 규칙을 override합니다.

 

예를 들어 다음은 QSS 테스터 앱에서 QLineEdit의 배경을 파란색으로 설정합니다 — 지정 ID가 일반 위젯 규칙을 override합니다.

QLineEdit#mylineedit {

background: blue ;

}

QLineEdit {

background: red ;

}

두 개의 상충되는 규칙이 있는 경우 위젯의 자체 스타일시트가 상속된 스타일보다 선호되고,  더 먼 거리보다 가까운 조상이 선호됩니다(예: 조부모보다 부모가 선호됨).

 

No inherited properties

위젯은 특별히 대상을 지정하는 규칙의 영향만 받습니다. 

부모에 규칙을 설정할 수 있지만, 영향을 미치려면 여전히 대상 위젯을 참조해야 합니다.

QLineEdit {

background: red ;

}

If set on a QMainWindow all QLineEdit objects in that window will have a red background (assuming no other rules). However, if the following is set...

QMainWindow {

background: red ;

}

...only the QMainWindow itself will be set with a red background.

The background color itself does not propogate to child widgets.

 

 

일치 규칙의 대상이 아닌 경우 위젯은 각 속성에 대해 기본 시스템 스타일 값을 사용합니다. 위젯은 복합 위젯 내부에서도 부모 위젯에서 스타일 속성을 상속하지 않으며, 위젯은 영향을 받는 규칙에 의해 직접 대상이 되어야 합니다.

 

이는 요소가 부모로부터 값을 상속받을 수 있는 CSS와 대조됩니다.

 

Pseudo-selectors (의사선택기)

지금까지 속성을 사용하여 위젯의 기본 모양을 변경하는 정적 스타일을 살펴보았습니다.

그러나 QSS를 사용하면 동적 위젯 상태에 대한 응답으로 스타일을 지정할 수도 있습니다.

예를 들어 버튼을 마우스로 가져갈 때 표시되는 강조 표시가 있습니다 — 강조 표시는 위젯에 포커스가 있고 클릭하면 응답한다는 것을 나타내는 데 도움이 됩니다.

유용성(데이터 줄 또는 특정 탭 강조 표시)에서 데이터 계층 시각화에 이르기까지 활성 스타일링에는 다른 많은 용도가 있습니다. 이는 모두 QSS의 의사 선택기를 사용하여 달성할 수 있습니다.

의사 선택기는 QSS 규칙이 특정 상황에서만 적용되도록 합니다. 위젯에 적용 할 수있는 다양한 의사 선택기가 있습니다. :hover와 같은 일부는 일반적이며 모든 위젯과 함께 사용할 수 있고 다른 일부는 위젯에 따라 다릅니다. 전체 목록은 다음과 같습니다.

 

Pseudo-State	Description
:first	Item is the first in a list, e.g. the first tab in a QtabBar.
:active	Widget is part of an active window.
:adjoins-item	The ::branch of a QTreeView is adjacent to an item.
:alternate	Set for every alternate row when painting the row of a QabstractItemView (QabstractItemView.alternatingRowColors() is True)
:bottom	Positioned at the bottom, e.g. a QTabBar that has its tabs at the bottom.
:checked	Item is checked, e.g. the checked state of QAbstractButton.
:closable	Items can be closed, e.g. a QDockWidget has QDockWidget.DockWidgetClosable  enabled.
:closed	Item is in the closed state, e.g. an non-expanded item in a QtreeView.
:default	Item is the default action, e.g. a default QPushButton or a default action in a QMenu.
:disabled	Item is disabled.
:editable	QcomboBox is editable.
:enabled	Item is enabled.
:exclusive	Item is part of an exclusive item group, e.g. a menu item in a exclusive QActionGroup.
:flat	Item is flat, e.g. a flat QpushButton.
:floatable	Items can be floated, e.g. the QDockWidget has QDockWidget.DockWidgetFloatable   enabled.
:focus	Item has input focus.
:has-children	Item has children, e.g. an item in a QTreeView with child items.
:has-siblings	Item has siblings, e.g. an item in a QTreeView with siblings.
:horizontal	Item has horizontal orientation
:hover	Mouse is hovering over the item.
:indeterminate	Item has indeterminate state, e.g. a QCheckBox or QRadioButton is partially checked.
:last	Item is the last (in a list), e.g. the last tab in a QTabBar.
:left	Item is positioned at the left, e.g. a QTabBar that has its tabs positioned at the left.
:maximized	Item is maximized, e.g. a maximized QMdiSubWindow.
:middle	Item is in the middle (in a list), e.g. a tab that is not in the beginning or the end in a QTabBar.
:minimized	Item is minimized, e.g. a minimized QMdiSubWindow.
:movable	Item can be moved around, e.g. the QDockWidget has QDockWidget.DockWidgetMovable enabled.
:no-frame	Item has no frame, e.g. a frameless QSpinBox or QLineEdit.
:non-exclusive	Item is part of a non-exclusive item group, e.g. a menu item in a non-exclusive QActionGroup.
:off	Items that can be toggled, this applies to items in the "off" state.
:on	Items that can be toggled, this applies to widgets in the "on" state.
:only-one	Item is the only one (in a list), e.g. a lone tab in a QTabBar.
:open	Item is in the open state, e.g. an expanded item in a QTreeView, or a QComboBox or` QPushButton` with an open  menu.
:next-selected	Next item is selected, e.g. the selected tab of a QTabBar is next to this item.
:pressed	Item is being pressed using the mouse.
:previous-selected	Previous item is selected, e.g. a tab in a QTabBar that is next to the selected tab.
:read-only	Item is marked read only or non-editable, e.g. a read only QLineEdit or a non-editable QComboBox.
:right	Item is positioned at the right, e.g. a QTabBar that has its tabs positioned at the right.
:selected	Item is selected, e.g. the selected tab in a QTabBar or the selected item in a QMenu.
:top	Item is positioned at the top, e.g. a QTabBar that has its tabs positioned at the top.
:unchecked	Item is unchecked.
:vertical	Item has vertical orientation.
:window	Widget is a window (i.e a top level widget).

 

QSS 테스터를 사용하여 의사 선택기가 작동하는 것을 볼 수 있습니다. 예를 들어 다음은 마우스를 위젯 위로 가져갈 때 QPushButton 빨간색의 배경을 변경합니다.

QPushButton:hover {

background: red ;

}

The following will change the background of all widgets when they are hovered.

*:hover {

background: red ;

}

 

!를 사용하여 의사 선택기를 부정할 수도 있습니다. 즉, 해당 선택기가 비활성 상태일 때 규칙이 활성화됩니다. 예를 들면 다음과 같습니다.

 

QPushButton:!hover {

background: yellow ;

}

QPushButton이 마우스를 가져가지 않으면 노란색으로 바뀝니다. 여러 의사 선택기를 함께 연결할 수도 있습니다. 예를 들어, 다음은 QCheckBox의 배경을 선택하고 가리키지 않을 때 녹색으로 설정하고 선택하고 가리키면 노란색으로 설정합니다.

QCheckBox:checked:!hover {

background: green;

}

QCheckBox:checked:hover {

background: yellow;

}

다른 모든 규칙의 경우 ","구분 기호를 사용하여 연결하여 정의 된 규칙을 두 경우 모두에 적용 할 수도 있습니다. 예를 들어, 다음은 체크하거나 마우스를 가져갈 때 확인란 배경을 녹색으로 설정합니다.

QCheckBox:checked, QCheckBox:hover {

background: yellow;

}

 

Styling Widget Sub controls

많은 위젯은 다른 하위 위젯 또는 컨트롤의 조합으로 구성됩니다.

QSS는 이러한 하위 컨트롤의 주소를 직접 지정하는 구문을 제공하므로 하위 컨트롤의 스타일을 개별적으로 변경할 수 있습니다. 이러한 하위 컨트롤은 :: (이중 콜론) 선택기를 사용하여 주소를 지정하고 그 뒤에 지정된 하위 컨트롤의 식별자를 사용하여 주소를 지정할 수 있습니다. 이러한 위젯의 좋은 예는 QComboBox입니다.

다음 스타일 캡처는 사용자 지정 스타일을 콤보 상자의 오른쪽에 있는 아래쪽 화살표에 직접 적용합니다.

QComboBox::drop-down {

background: yellow;

image: url('puzzle.png')

}

Figure 123. Setting background and icon for a QComboBox dropdown with QSS.

There are quite a few sub-control selectors available in QSS, which are listed below. You’ll notice that many of them apply only to specific widgets (or types of widgets).

Sub-Control	Description
::down-arrow	Down arrow of a QComboBox, QHeaderView, QScrollBar or QSpinBox.
::add-line	Button to move to next line on a QScrollBar.
::add-page	Space between the handle and the add-line of a QScrollBar.
::branch	Branch indicator of a QTreeView.
::chunk	Progress chunk of a QProgressBar.
::close-button	Close button of a QDockWidget or tabs of QTabBar.
::corner	Corner between two scrollbars in a QAbstractScrollArea.
::down-button	Down button of a QScrollBar or a QSpinBox.
::drop-down	Drop-down button of a QComboBox.
::float-button	Float button of a QDockWidget.
::groove	Groove of a QSlider.
::indicator	Indicator of a QAbstractItemView, a QCheckBox, a QRadioButton, a checkable QMenu item or a checkable QGroupBox.
::handle	Handle of a QScrollBar, a QSplitter, or a QSlider.
::icon	Icon of a QAbstractItemView or a QMenu.
::item	Item of a QAbstractItemView, a QMenuBar, a QMenu, or a QStatusBar.
::left-arrow	Left arrow of a QScrollBar.
::left-corner	Left corner of a QTabWidget, e.g. control the left corner widget in a QTabWidget.
::menu-arrow	Arrow of a QToolButton with a menu.
::menu-button	Menu button of a QToolButton.
::menu-indicator	Menu indicator of a QPushButton.
::right-arrow	Right arrow of a QMenu or a QScrollBar.
::pane	The pane (frame) of a QTabWidget.
::right-corner	The right corner of a QTabWidget. For example, this control can be used to control the position the right corner widget in a QTabWidget.
::scroller	The scroller of a QMenu or QTabBar.
::section	The section of a QHeaderView.
::separator	The separator of a QMenu or in a QMainWindow.
::sub-line	The button to subtract a line of a QScrollBar.
::sub-page	The region between the handle (slider) and the sub-line of a QScrollBar.
::tab	The tab of a QTabBar or QToolBox.
::tab-bar	The tab bar of a QTabWidget. This subcontrol exists only to control the position of the QTabBar inside the QTabWidget. To style the tabs use the ::tab subcontrol.
::tear	The tear indicator of a QTabBar.
::tearoff	The tear-off indicator of a QMenu.
::text	The text of a QAbstractItemView.
::title	The title of a QGroupBox or a QDockWidget.
::up-arrow	The up arrow of a QHeaderView (sort indicator), QScrollBar or a QSpinBox.
::up-button	The up button of a QSpinBox.

 

The following targets the up and down buttons of a QSpinBox turning the background red and green respectively.

QSpinBox::up-button {

background: green;

}

QSpinBox::down-button {

background: red;

}

 

The arrows inside the up or down buttons are also separately targetable. Below we’re setting them with custom plus and minus icons — note we also need to resize the buttons to fit.

QSpinBox {

min-height: 50;

}

QSpinBox::up-button {

width: 50;

}

QSpinBox::up-arrow {

image: url('plus.png');

}

QSpinBox::down-button {

width: 50;

}

QSpinBox::down-arrow {

image: url('minus.png')

}

 

Subcontrol pseudostates

You can use pseudostates to target subcontrols, just as for other widgets. To do this, simply chain the pseudostate after the control. For example —

QSpinBox::up-button:hover {

background: green;

}

QSpinBox::down-button:hover {

background: red;

}

 

Positioning Sub-controls

Using QSS you also get precise control over the position of subcontrols inside widgets. These allow adjustment in position either relative to their normal position, or in absolute reference to their parent widget. We’ll look at these positioning methods below.

Property	Type (Default)	Description
bottom	Length	If position is relative (the default), moves a subcontrol by a certain offset up; specifying bottom: y is then equivalent to specifying top: -y. If position is absolute, the bottom property specifies the subcontrol’s bottom edge in relation to the parent’s bottom edge (see also subcontrol-origin).
position	relative | absolute (relative)	Whether offsets specified using left, right, top, and bottom are relative or absolute coordinates.
left	Length	If position=relative move a subcontrol right by the given offset (i.e. specifies additional space on the left). If position is absolute, specifies the distance from the left edge of the parent.
right	Length	If position=relative move a subcontrol left by the given offset (i.e. specifies additional space on the right). If position is absolute, specifies the distance from the right edge of the parent.
top	Length	If position=relative move a subcontrol down the given offset (i.e. specifies additional space on the top). If position is absolute, specifies the distance from the top edge of the parent.

QSpinBox {
min-height: 100;
}

QSpinBox::up-button { width: 50;
}

QSpinBox::down-button { width: 50;
left: 5;
}

위치가 절대값으로 설정되면 왼쪽, 오른쪽, 위쪽 및 아래쪽 속성은 위젯과 부모의 동일한 가장자리 사이의 간격을 정의합니다. 예를 들어 top: 5, left: 5는 위젯을 배치하여 위쪽과 왼쪽 가장자리가 부모의 위쪽 및 왼쪽 가장자리에서 5픽셀 떨어져 있도록 합니다.

QSpinBox {
min-height: 100;
}

QSpinBox::up-button { width: 50;
}

QSpinBox::down-button { position: absolute; width: 50;
right: 25;
}

아래에서 절대값을 사용하여 아래쪽 버튼을 오른쪽에서 25픽셀 떨어진 위치에 배치한 효과를 볼 수 있습니다.

이것은 가장 실용적인 예제는 아니지만 이러한 방식으로 하위 컨트롤을 배치하는 한 가지 제약 조건을 보여 줍니다. 즉, 하위 컨트롤을 부모의 경계 상자 외부에 배치할 수 없습니다.

 

Subcontrol styles

마지막으로, 스타일 지정을 위해 하위 컨트롤을 구체적으로 대상으로 하는 QSS 속성이 많이 있습니다. 이것들은 아래에 나와 있습니다 — 영향을 받는 특정 위젯과 컨트롤에 대한 설명을 참조하십시오.

Property	Type (Default)	Description
image-position	alignment	The alignment of the image. Image’s position can be specified using relative or absolute position. See relative and absolute for explanation.
image	Url+	The image that is drawn in the contents rectangle of a subcontrol. Setting the image property on subcontrols implicitly sets the width and height of the sub-control (unless the image is a SVG).
height	Length	The height of a subcontrol. If you want a widget with a fixed height, set the min-height and max-height to the same value.
spacing	Length	Internal spacing in the widget.
subcontrol-origin	Origin (padding)	The origin rectangle of the subcontrol within the parent element.
subcontrol-position	Alignment	The alignment of the subcontrol within the origin rectangle specified by subcontrol-origin.
width	Length	The width of a subcontrol. If you want a widget with a fixed width, set the min-width and max-width to the same value.

 

Editing Stylesheets in Qt Designer

지금까지 살펴본 예제는 코드를 사용하여 위젯에 QSS를 적용했습니다.

그러나 Qt 디자이너 내에서 위젯에 스타일 시트를 설정할 수도 있습니다. Qt Designer의 위젯에 QSS 스타일 시트를 설정하려면 위젯을 마우스 오른쪽 버튼으로 클릭하고 "스타일 시트 변경 ..."을 선택하십시오. (context menu)

그러면 QSS 규칙을 텍스트로 입력할 수 있는 다음 창이 열리며, 이 창이 위젯(및 규칙과 일치하는 모든 자식)에 적용됩니다.

규칙을 텍스트로 입력하는 것 외에도 Qt Designer의 QSS 편집기를 사용하면 리소스 조회 도구, 색상 선택 위젯 및 그라디언트 디자이너에 액세스 할 수 있습니다. 이 도구(아래 참조)는 규칙에 추가할 수 있는 여러 기본 제공 그라디언트를 제공하지만 원하는 경우 사용자 지정 그라디언트를 정의할 수도 있습니다.

 

그라디언트는 QSS 규칙을 사용하여 정의되므로 원하는 경우 코드를 포함하여 다른 곳에 복사하여 붙여넣어 다시 사용할 수 있습니다.

QWidget {
background: qlineargradient(spread:pad, x1:0, y1:0, x2:0, y2:1, stop:0
rgba(255, 0, 0, 255), stop:0.339795 rgba(255, 0, 0, 255), stop
:0.339799 rgba(255, 255, 255, 255), stop:0.662444 rgba(255, 255, 255,
255), stop:0.662469 rgba(0, 0, 255, 255), stop:1 rgba(0, 0, 255, 255))
}