<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<!-- /home/gvatteka/dev/qt-4.3/doc/src/stylesheet.qdoc -->
<head>
<title>Qt Style Sheets</title>
<link href="classic.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1 align="center">Qt Style Sheets<br /><small></small></h1>
<a name="style-sheet"></a><a name="stylesheet"></a><p>Qt Style Sheets are a powerful mechanism that allows you to customize the appearance of widgets, in addition to what is already possible by subclassing <a href="gui/QStyle.html"><tt>QStyle</tt></a>. The concepts, terminology, and syntax of Qt Style Sheets are heavily inspired by HTML <a href="http://www.w3.org/Style/CSS/">Cascading Style Sheets (CSS)</tt></a> but adapted to the world of widgets.</p>
<p>Topics:</p>
<ul>
<li><a href="stylesheet.html#overview">Overview</tt></a> <ul><li><a href="#overview">Overview</a></li>
</ul>
</li>
<li><a href="stylesheet-syntax.html">The Style Sheet Syntax</tt></a> <ul><li><a href="stylesheet-syntax.html#style-rules">Style Rules</a></li>
<li><a href="stylesheet-syntax.html#selector-types">Selector Types</a></li>
<li><a href="stylesheet-syntax.html#sub-controls">Sub-Controls</a></li>
<li><a href="stylesheet-syntax.html#pseudo-states">Pseudo-States</a></li>
<li><a href="stylesheet-syntax.html#conflict-resolution">Conflict Resolution</a></li>
<li><a href="stylesheet-syntax.html#cascading">Cascading</a></li>
<li><a href="stylesheet-syntax.html#inheritance">Inheritance</a></li>
<li><a href="stylesheet-syntax.html#widgets-inside-c-namespaces">Widgets inside C++ namespaces</a></li>
<li><a href="stylesheet-syntax.html#setting-qobject-properties">Setting QObject properties</a></li>
</ul>
</li>
<li><a href="stylesheet-designer.html">Qt Designer Integration</tt></a> </li>
<li><a href="stylesheet-customizing.html">Customizing Qt Widgets Using Style Sheets</tt></a> <ul><li><a href="stylesheet-customizing.html#the-box-model">The Box Model</a></li>
<li><a href="stylesheet-customizing.html#sub-controls">Sub-controls</a></li>
</ul>
</li>
<li><a href="stylesheet-reference.html">Qt Style Sheets Reference</tt></a> <ul><li><a href="stylesheet-reference.html#list-of-stylable-widgets">List of Stylable Widgets</a></li>
<li><a href="stylesheet-reference.html#list-of-properties">List of Properties</a></li>
<li><a href="stylesheet-reference.html#list-of-property-types">List of Property Types</a></li>
<li><a href="stylesheet-reference.html#list-of-pseudo-states">List of Pseudo-States</a></li>
<li><a href="stylesheet-reference.html#list-of-sub-controls">List of Sub-Controls</a></li>
</ul>
</li>
<li><a href="stylesheet-examples.html">Qt Style Sheets Examples</tt></a> <ul><li><a href="stylesheet-examples.html#style-sheet-usage">Style Sheet Usage</a></li>
<ul><li><a href="stylesheet-examples.html#customizing-the-foreground-and-background-colors">Customizing the Foreground and Background Colors</a></li>
<li><a href="stylesheet-examples.html#customizing-a-qpushbutton-using-the-box-model">Customizing a QPushButton Using the Box Model</a></li>
<li><a href="stylesheet-examples.html#customizing-the-qpushbutton-s-menu-indicator-sub-control">Customizing the QPushButton's Menu Indicator Sub-Control</a></li>
<li><a href="stylesheet-examples.html#complex-selector-example">Complex Selector Example</a></li>
</ul>
<li><a href="stylesheet-examples.html#customizing-specific-widgets">Customizing specific widgets</a></li>
<ul><li><a href="stylesheet-examples.html#customizing-qabstractscrollarea">Customizing QAbstractScrollArea</a></li>
<li><a href="stylesheet-examples.html#customizing-qcheckbox">Customizing QCheckBox</a></li>
<li><a href="stylesheet-examples.html#customizing-qcombobox">Customizing QComboBox</a></li>
<li><a href="stylesheet-examples.html#customizing-qspinbox">Customizing QSpinBox</a></li>
<li><a href="stylesheet-examples.html#customizing-qframe">Customizing QFrame</a></li>
<li><a href="stylesheet-examples.html#customizing-qgroupbox">Customizing QGroupBox</a></li>
<li><a href="stylesheet-examples.html#customizing-qheaderview">Customizing QHeaderView</a></li>
<li><a href="stylesheet-examples.html#customizing-qlineedit">Customizing QLineEdit</a></li>
<li><a href="stylesheet-examples.html#customizing-qmenu">Customizing QMenu</a></li>
<li><a href="stylesheet-examples.html#customizing-qmenubar">Customizing QMenuBar</a></li>
<li><a href="stylesheet-examples.html#customizing-qprogressbar">Customizing QProgressBar</a></li>
<li><a href="stylesheet-examples.html#customizing-qpushbutton">Customizing QPushButton</a></li>
<li><a href="stylesheet-examples.html#customizing-qradiobutton">Customizing QRadioButton</a></li>
<li><a href="stylesheet-examples.html#customizing-qscrollbar">Customizing QScrollBar</a></li>
<li><a href="stylesheet-examples.html#customizing-qsizegrip">Customizing QSizeGrip</a></li>
<li><a href="stylesheet-examples.html#customizing-qslider">Customizing QSlider</a></li>
<li><a href="stylesheet-examples.html#customizing-qsplitter">Customizing QSplitter</a></li>
<li><a href="stylesheet-examples.html#customizing-qstatusbar">Customizing QStatusBar</a></li>
<li><a href="stylesheet-examples.html#customizing-qtabwidget-and-qtabbar">Customizing QTabWidget and QTabBar</a></li>
<li><a href="stylesheet-examples.html#customizing-qtablewidget">Customizing QTableWidget</a></li>
<li><a href="stylesheet-examples.html#customizing-qtoolbar">Customizing QToolBar</a></li>
<li><a href="stylesheet-examples.html#customizing-qtoolbutton">Customizing QToolButton</a></li>
<li><a href="stylesheet-examples.html#customizing-qtreeview">Customizing QTreeView</a></li>
</ul>
</ul>
</li>
</ul>
<a name="overview"></a><a name="overview"></a>
<h3>Overview</h3>
<p>Styles sheets are textual specifications that can be set on the whole application using QApplication::setStyleSheet() or on a specific widget (and its children) using QWidget::setStyleSheet(). If several style sheets are set at different levels, Qt derives the effective style sheet from all of those that are set. This is called cascading.</p>
<p>For example, the following style sheet specifies that all <a href="gui/QLineEdit.html"><tt>QLineEdit</tt></a>s should use yellow as their background color, and all <a href="gui/QCheckBox.html"><tt>QCheckBox</tt></a>es should use red as the text color:</p>
<pre> QLineEdit { background: yellow }
QCheckBox { color: red }</pre>
<p>For this kind of customization, style sheets are much more powerful than <a href="gui/QPalette.html"><tt>QPalette</tt></a>. For example, it might be tempting to set the QPalette::Button role to red for a <a href="gui/QPushButton.html"><tt>QPushButton</tt></a> to obtain a red push button. However, this wasn't guaranteed to work for all styles, because style authors are restricted by the different platforms' guidelines and (on Windows XP and Mac OS X) by the native theme engine.</p>
<p>Style sheets let you perform all kinds of customizations that are difficult or impossible to perform using <a href="gui/QPalette.html"><tt>QPalette</tt></a> alone. If you want yellow backgrounds for mandatory fields, red text for potentially destructive push buttons, or fancy check boxes, style sheets are the answer.</p>
<p>Style sheets are applied on top of the current <a href="gui/QStyle.html">widget style</tt></a>, meaning that your applications will still look native, but any style sheet constraints will be taken into consideration. Unlike palette fiddling, style sheets offer guarantees: If you set the background color of a <a href="gui/QPushButton.html"><tt>QPushButton</tt></a> to be red, you can be assured that the button will have a red background in all styles, on all platforms. <a href="qtjambi-designer.html">Qt Designer</tt></a> provides style sheet integration, making it easy to view the effects of a style sheet in different <a href="gui/QStyle.html">widget styles</tt></a>.</p>
<p>In addition, style sheets can be used to provide a distinctive look and feel for your application, without having to subclass <a href="gui/QStyle.html"><tt>QStyle</tt></a>. For example, you can specify arbitrary images for radio buttons and check boxes to make them stand out. Using this technique, you can also achieve minor customizations that would normally require subclassing several style classes, such as specifying a style hint</tt>. The Style Sheet</tt> example depicted below defines two distinctive style sheets that you can try out and modify at will.</p>
<p><table align="center" cellpadding="2" cellspacing="1" border="0">
<tr valign="top" class="odd"><td><img src="images/stylesheet-coffee-xp.png" /></td><td><img src="images/stylesheet-pagefold.png" /></td></tr>
</table></p>
<p>When a style sheet is active, the <a href="gui/QStyle.html"><tt>QStyle</tt></a> returned by QWidget::style() is a wrapper "style sheet" style, <i>not</i> the platform-specific style. The wrapper style ensures that any active style sheet is respected and otherwise forwards the drawing operations to the underlying, platform-specific style (e.g., QWindowsXPStyle on Windows XP).</p>
<p><b>Warning:</b> Qt style sheets are currently not supported for QMacStyle (the default style on Mac OS X) and custom <a href="gui/QStyle.html"><tt>QStyle</tt></a> subclasses. We plan to address this in some future release.</p>
<p /><address><hr /><div align="center">
<table width="100%" cellspacing="0" border="0"><tr class="address">
<td width="30%">Copyright © 2007 <a href="trolltech.html">Trolltech</a></td>
<td width="40%" align="center"><a href="trademarks.html">Trademarks</a></td>
<td width="30%" align="right"><div align="right">Qt Jambi </div></td>
</tr></table></div></address></body>
</html>
