GTK+3 中CSS的语法规则
Style sheetsThe basic structure of the style sheetsunderstood by this provider is a series of statements, which are eitherrule sets or '@-rules', separated by whitespace.
A rule setconsists of a selector and a declaration block, which is a series ofdeclarations enclosed in curly braces ({ and }). The declarations areseparated by semicolons (;). Multiple selectors can share the samedeclaration block, by putting all the separators in front of the block,separated by commas.
Example 23. A rule set with two selectors
1234GtkButton, GtkEntry {color: #ff00ea;font: Comic Sans 12}
Selectors
Selectorswork very similar to the way they do in CSS, with widget class namestaking the role of element names, and widget names taking the role ofIDs. When used in a selector, widget names must be prefixed with a '#'character. The '*' character represents the so-called universalselector, which matches any widget.
To express more complicated situations, selectors can be combined in various ways:
To require that a widget satisfies several conditions, combine several selectors into one by concatenating them. E.g. GtkButton#button1 matches a GtkButton widget with the name button1.
Toonly match a widget when it occurs inside some other widget, write thetwo selectors after each other, separated by whitespace. E.g. GtkToolBar GtkButton matches GtkButton widgets that occur inside a GtkToolBar.
Inthe previous example, the GtkButton is matched even if it occurs deeplynested inside the toolbar. To restrict the match to direct children ofthe parent widget, insert a '>' character between the two selectors.E.g. GtkNotebook > GtkLabel matches GtkLabel widgets that are direct children of a GtkNotebook.
Example 24. Widget classes and names in selectors1234567891011121314151617181920212223242526272829303132/* Theme labels that are descendants of a window */GtkWindow GtkLabel {background-color: #898989}/* Theme notebooks, and anything that's within these */GtkNotebook {background-color: #a939f0}/* Theme combo boxes, and entries thatare direct children of a notebook */GtkComboBox,GtkNotebook > GtkEntry {color: @fg_color;background-color: #1209a2}/* Theme any widget within a GtkBin */GtkBin * {font-name: Sans 20}/* Theme a label named title-label */GtkLabel#title-label {font-name: Sans 15}/* Theme any widget named main-entry */#main-entry {background-color: #f0a810}
Widgetsmay also define style classes, which can be used for matching. Whenused in a selector, style classes must be prefixed with a '.' character.
Refer to the documentation of individual widgets to learn which style classes they define and see the section called “Style classes and regions” for a list of all style classes used by GTK+ widgets.
Notethat there is some ambiguity in the selector syntax when it comes todifferentiation widget class names from regions. GTK+ currently treats astring as a widget class name if it contains any uppercase characters(which should work for more widgets with names like GtkLabel).
Example 25. Style classes in selectors123456789/* Theme all widgets defining the class entry */.entry {color: #39f1f9;}/* Theme spinbuttons' entry */GtkSpinButton.entry {color: #900185}
Incomplicated widgets like e.g. a GtkNotebook, it may be desirable tostyle different parts of the widget differently. To make this possible,container widgets may define regions, whose names may be used formatching in selectors.
Some containers allow to furtherdifferentiate between regions by applying so-called pseudo-classes tothe region. For example, the tab region in GtkNotebook allows to singleout the first or last tab by using the :first-child or :last-childpseudo-class. When used in selectors, pseudo-classes must be prefixedwith a ':' character.
Refer to the documentation of individual widgets to learn which regions and pseudo-classes they define and see the section called “Style classes and regions” for a list of all regions used by GTK+ widgets.
Example 26. Regions in selectors12345678910111213141516/* Theme any label within a notebook */GtkNotebook GtkLabel {color: #f90192;}/* Theme labels within notebook tabs */GtkNotebook tab GtkLabel {color: #703910;}/* Theme labels in the any first notebooktab, both selectors are equivalent */GtkNotebook tab:nth-child(first) GtkLabel,GtkNotebook tab:first-child GtkLabel {color: #89d012;}
Anotheruse of pseudo-classes is to match widgets depending on their state.This is conceptually similar to the :hover, :active or :focuspseudo-classes in CSS. The available pseudo-classes for widget statesare :active, :prelight (or :hover), :insensitive, :selected, :focusedand :inconsistent.
Example 27. Styling specific widget states1234567891011121314151617181920212223242526272829303132/* Theme active (pressed) buttons */GtkButton:active {background-color: #0274d9;}/* Theme buttons with the mouse pointer on it,both are equivalent */GtkButton:hover,GtkButton:prelight {background-color: #3085a9;}/* Theme insensitive widgets, both are equivalent */:insensitive,*:insensitive {background-color: #320a91;}/* Theme selection colors in entries */GtkEntry:selected {background-color: #56f9a0;}/* Theme focused labels */GtkLabel:focused {background-color: #b4940f;}/* Theme inconsistent checkbuttons */GtkCheckButton:inconsistent {background-color: #20395a;}
Widget state pseudoclasses may only apply to the last element in a selector.
Todetermine the effective style for a widget, all the matching rule setsare merged. As in CSS, rules apply by specificity, so the rules whoseselectors more closely match a widget path will take precedence over theothers.
@ Rules
GTK+'s CSS supports the @import rule, in order to load another CSS style sheet in addition to the currently parsed one.
Example 28. Using the @import rule1@import url ("path/to/common.css");
In order to extend key bindings affecting different widgets, GTK+supports the @binding-set rule to parse a set of bind/unbind directives,see GtkBindingSetfor the supported syntax. Note that the binding sets defined in thisway must be associated with rule sets by setting the gtk-key-bindingsstyle property.
Customized key bindings are typically defined in a separate gtk-keys.css CSS file and GTK+ loads this file according to the current key theme, which is defined by the "gtk-key-theme-name" setting.
Example 29. Using the @binding rule1234567891011121314@binding-set binding-set1 {bind "<alt>Left" { "move-cursor" (visual-positions, -3, 0) };unbind "End";};@binding-set binding-set2 {bind "<alt>Right" { "move-cursor" (visual-positions, 3, 0) };bind "<alt>KP_space" { "delete-from-cursor" (whitespace, 1)"insert-at-cursor" (" ") };};GtkEntry {gtk-key-bindings: binding-set1, binding-set2;}
GTK+also supports an additional @define-color rule, in order to define acolor name which may be used instead of color numeric representations.Also see the "gtk-color-scheme" setting for a way to override the values of these named colors.
Example 30. Defining colors12345@define-color bg_color #f9a039;* {background-color: @bg_color;}
Symbolic colors
Besidesbeing able to define color names, the CSS parser is also able to readdifferent color expressions, which can also be nested, providing a richlanguage to define colors which are derived from a set of base colors.
Example 31. Using symbolic colors1234567891011@define-color entry-color shade (@bg_color, 0.7);GtkEntry {background-color: @entry-color;}GtkEntry:focused {background-color: mix (@entry-color,shade (#fff, 0.5),0.8);}
The various ways to express colors in GTK+ CSS are:
SyntaxExplanationExamplesrgb(r, g, b)An opaque color; r, g, b can be either integers between 0 and 255 or percentages
rgb(128, 10, 54)
rgb(20%, 30%, 0%)rgba(r, g, b, a)A translucent color; r, g, b are as in the previous row, a is a floating point number between 0 and 1
rgba(255, 255, 0, 0.5)#xxyyzzAn opaque color; xx, yy, zz are hexadecimal numbers specifying r, g, b variants with between 1 and 4 hexadecimal digits per component are allowed
#ff12ab
#f0c@nameReference to a color that has been defined with @define-color@bg_colormix(color1, color2, f)A linear combination of color1 and color2. f is a floating point number between 0 and 1.
mix(#ff1e0a, @bg_color, 0.8)shade(color, f)A lighter or darker variant of color. f is a floating point number.shade(@fg_color, 0.5)lighter(color)A lighter variant of color
darker(color)A darker variant of color
Gradients
Linear or radial Gradients can be used as background images.
A linear gradient along the line from (start_x, start_y) to (end_x, end_y) is specified using the syntax
-gtk-gradient (linear,
start_x start_y, end_x end_y,
color-stop (position, color),
...)where start_x and end_x can be either a floating point number between 0 and 1 or one of the special values 'left', 'right' or 'center', start_y and end_y can be either a floating point number between 0 and 1 or one of the special values 'top', 'bottom' or 'center', position is a floating point number between 0 and 1 and color is a color expression (see above). The color-stop can be repeated multiple times to add more than one color stop. 'from (color)' and 'to (color)' can be used as abbreviations for color stops with position 0 and 1, respectively.
Example 32. A linear gradienthttp://developer.gnome.org/gtk3/3.0/gradient1.png
This gradient was specified with
-gtk-gradient (linear,
left top, right bottom,
from(@yellow), to(@blue))
Example 33. Another linear gradienthttp://developer.gnome.org/gtk3/3.0/gradient2.png
This gradient was specified with
-gtk-gradient (linear,
0 0, 0 1,
color-stop(0, @yellow),
color-stop(0.2, @blue),
color-stop(1, #0f0))
A radial gradient along the two circles defined by (start_x, start_y, start_radius) and (end_x, end_y, end_radius) is specified using the syntax
-gtk-gradient (radial,
start_x start_y, start_radius,
end_x end_y, end_radius,
color-stop (position, color),
...)
where start_radius and end_radius are floating point numbers and the other parameters are as before.
Example 34. A radial gradienthttp://developer.gnome.org/gtk3/3.0/gradient3.png
This gradient was specified with
-gtk-gradient (radial,
center center, 0,
center center, 1,
from(@yellow), to(@green))
Example 35. Another radial gradienthttp://developer.gnome.org/gtk3/3.0/gradient4.png
This gradient was specified with
-gtk-gradient (radial,
0.4 0.4, 0.1,
0.6 0.6, 0.7,
color-stop (0, #f00),
color-stop (0.1, #a0f),
color-stop (0.2, @yellow),
color-stop (1, @green))
Border images
Images can be used in 'slices' for the purpose of creating scalable borders.http://developer.gnome.org/gtk3/3.0/slices.png
The syntax for specifying border images of this kind is:
url(path) top right bottom left ? ?
The sizes of the 'cut off' portions are specified with the top, right, bottom and leftparameters. The 'middle' sections can be repeated or stretched tocreate the desired effect, by adding the 'repeat' or 'stretch' optionsafter the dimensions. If two options are specified, the first oneaffects the horizontal behaviour and the second one the verticalbehaviour. If only one option is specified, it affects both.
Example 36. A border imagehttp://developer.gnome.org/gtk3/3.0/border1.png
This border image was specified with
url(\"gradient1.png\") 10 10 10 10
Example 37. A repeating border imagehttp://developer.gnome.org/gtk3/3.0/border2.png
This border image was specified with
url(\"gradient1.png\") 10 10 10 10 repeat
Example 38. A stretched border imagehttp://developer.gnome.org/gtk3/3.0/border3.png
This border image was specified with
url(\"gradient1.png\") 10 10 10 10 stretch
Stylescan specify transitions that will be used to create a gradual change inthe appearance when a widget state changes. The following syntax isused to specify transitions:
duration ?
The durationis the amount of time that the animation will take for a complete cyclefrom start to end. If the loop option is given, the animation will berepated until the state changes again. The option after the durationdetermines the transition function from a small set of predefinedfunctions.
Figure 3. Linear transition
http://developer.gnome.org/gtk3/3.0/linear.png
Figure 4. Ease transition
http://developer.gnome.org/gtk3/3.0/ease.png
Figure 5. Ease-in-out transition
http://developer.gnome.org/gtk3/3.0/ease-in-out.png
Figure 6. Ease-in transition
http://developer.gnome.org/gtk3/3.0/ease-in.png
Figure 7. Ease-out transition
http://developer.gnome.org/gtk3/3.0/ease-out.png
Supported properties
Propertiesare the part that differ the most to common CSS, not all properties aresupported (some are planned to be supported eventually, some others aremeaningless or don't map intuitively in a widget based environment).
There is also a difference in shorthand properties, for example in common CSS it is fine to define a font through the different font-family, font-style, font-size properties, meanwhile in GTK+'s CSS only the canonical font property is supported.
The currently supported properties are:
Property nameSyntaxMaps toExamplesengineengine-nameGtkThemingEngineengine: clearlooks; engine: none; /* use the default (i.e. builtin) engine) */background-colorcolor (see above)GdkRGBA
background-color: #fff;
color: &color1;
background-color: shade (&color1, 0.5);
color: mix (&color1, #f0f, 0.8);colorborder-colorfontfamily [style] [size]PangoFontDescriptionfont: Sans 15;margin
width
vertical_width horizontal_width
top_width horizontal_width bottom_width
top_width right_width bottom_width left_widthGtkBorder
margin: 5;
margin: 5 10;
margin: 5 10 3;
margin: 5 10 3 5;paddingbackground-image
gradient (see above) or
url(path)cairo_pattern_t
-gtk-gradient (linear,
left top, right top,
from (#fff), to (#000));
-gtk-gradient (linear, 0.0 0.5, 0.5 1.0,
from (#fff),
color-stop (0.5, #f00),
to (#000));
-gtk-gradient (radial,
center center, 0.2,
center center, 0.8,
color-stop (0.0, #fff),
color-stop (1.0, #000));
url ('background.png');border-widthintegergintborder-width: 5;border-radiusintegergintborder-radius: 5;border-styleGtkBorderStyleborder-style: solid;border-image
border image (see above)internal use only
border-image: url("/path/to/image.png") 3 4 3 4 stretch;
border-image: url("/path/to/image.png") 3 4 4 3 repeat stretch;transitiontransition (see above)internal use only
transition: 150ms ease-in-out;
transition: 1s linear loop;gtk-key-bindingsbinding set name listinternal use only
gtk-bindings: binding1, binding2, ...;
GtkThemingEngines can register their own, engine-specific style properties with the function gtk_theming_engine_register_property(). These properties can be set in CSS like other properties, using a name of the form
-namespace-name
, where namespace is typically the name of the theming engine, and name is the name of the property. Style properties that have been registered by widgets using gtk_widget_class_install_style_property() can also be set in this way, using the widget class name for namespace.
Example 39. Using engine-specific style properties
123456* {engine: clearlooks;border-radius: 4;-GtkPaned-handle-size: 6;-clearlooks-colorize-scrollbar: false;}
页:
[1]