Свойства CSS GTK+
GTK+ CSS Properties — CSS Properties in GTK+
Поддерживаемые CSS свойства
GTK+ поддерживает CSS-свойства и сокращения, насколько они могут быть применены к виджетам, и добавляет свои собственные свойства только при необходимости. Все GTK+-специфические свойства имеют префикс -gtk.
Все свойства поддерживают следующие ключевые слова: inherit, initial, unset, с тем же значением, что и в CSS.
Всюду используются следующие базовые типы данных:
〈length〉 = 〈number〉 [ px | pt | em | ex |rem | pc | in | cm | mm ] | 〈calc expression〉
〈percentage〉 = 〈number〉 % | 〈calc expression〉
〈angle〉 = 〈number〉 [ deg | grad | turn ] | 〈calc expression〉
〈time〉 = 〈number〉 [ s | ms ] | 〈calc expression〉
Значения длин с единицами em или ex разрешаются с использованием значения размера шрифта, если они не встречаются при установке самого размера шрифта, в этом случае они разрешаются с использованием унаследованного значения размера шрифта.
Единица rem разрешается с использованием начального значения размера шрифта, что несколько отличается от определения rem в CSS.
Всюду, где разрешено числовое значение, GTK+ также принимает размер темы Windows:
〈win32 theme size〉 = 〈win32 size〉 | 〈win32 part size〉
〈win32 size〉 = -gtk-win32-size ( 〈theme name〉, 〈metric id〉 )
〈win32 part size〉 = [ -gtk-win32-part-width | -gtk-win32-part-height |
-gtk-win32-part-border-top | -gtk-win32-part-border-right |
-gtk-win32-part-border-bottom | -gtk-win32-part-border-left ]
( 〈theme name〉 , 〈integer〉 , 〈integer〉 )
〈calc expression〉 = calc( 〈calc sum〉 )
〈calc sum〉 = 〈calc product〉 [ [ + | - ] 〈calc product〉 ]*
〈calc product〉 = 〈calc value〉 [ * 〈calc value〉 | / 〈number〉 ]*
〈calc value〉 = 〈number〉 | 〈length〉 | 〈percentage〉 | 〈angle〉 | 〈time〉 | ( 〈calc sum〉 )
Нотация calc() добавляет значительную выразительную мощность. Существуют ограничения на типы, которые могут быть объединены в таком выражении (например, нет смысла складывать число и время). Подробности см. в спецификации CSS3 Values and Units.
Распространённым шаблоном среди сокращённых свойств (называемых «четырьмя сторонами») является тот, где можно указать от одного до четырёх значений для определения значения для каждой стороны области. В этом случае указанные значения интерпретируются следующим образом:
4 значения: | верхний правый нижний левый |
3 значения: | верхний горизонтальный нижний |
2 значения: | вертикальный горизонтальный |
1 значение: | все |
Таблица 2. Свойства цвета
Свойство цвета задаёт цвет для текста, значков и других элементов переднего плана. Свойство прозрачности задаёт прозрачность, используемую для композиции виджета на его родительском виджете.
Таблица 3. Свойства шрифта
| Имя | Значение | Начальное | Насл. | Аним. | Ссылка | Примечания |
|---|---|---|---|---|---|---|
| шрифт-семейство | 〈family name〉 [ , 〈family name〉 ]* | настройка gtk-font-name | ✓ | CSS2, CSS3 | ||
| размер-шрифта | 〈absolute size〉 | 〈relative size〉 | 〈length〉 | 〈percentage〉 | настройка gtk-font-name | ✓ | ✓ | CSS2, CSS3 | |
| стиль-шрифта | normal | oblique | italic | normal | ✓ | CSS2, CSS3 | ||
| вариант-шрифта | normal | small-caps | normal | ✓ | CSS2, CSS3 | поддерживаются только значения CSS2 | |
| вес-шрифта | normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | normal | ✓ | ✓ | CSS2, CSS3 | normal эквивалентно 400, bold эквивалентно 700 |
| растяжение-шрифта | ultra-condensed | extra-condensed | condensed | semi-condensed | normal | semi-expanded | expanded | extra-expanded | ultra-expanded | normal | ✓ | CSS3 | ||
| -gtk-dpi | 〈number〉 | разрешение экрана | ✓ | ✓ | ||
| font-feature-settings | 〈feature-tag-value〉# | "" | ✓ | > | CSS3 |
| Сокращение | Значение | Начальное | Ссылка | Примечания |
|---|---|---|---|---|
| шрифт | [ 〈font-style〉 || 〈font-variant〉 || 〈font-weight〉 || 〈font-stretch〉 ]? 〈font-size〉 〈font-family〉 | см. отдельные свойства | CSS2, CSS3 | CSS позволяет использовать высоту-строки и т.д |
〈absolute size〉 = xx-small | x-small | small | medium | large | x-large | xx-large
〈relative size〉 = larger | smaller
Свойства шрифта определяют шрифт для отображения текста. Относительные размеры и веса шрифтов разрешаются относительно унаследованного значения для этих свойств.
Таблица 4. Свойства курсора текста
| Имя | Значение | Начальное | Насл. | Аним. | Ссылка | Примечания |
|---|---|---|---|---|---|---|
| цвет-курсора | 〈color〉 | currentColor | ✓ | ✓ | CSS3 | CSS позволяет значение auto |
| -gtk-цвет-вторичного-курсора | 〈color〉 | currentColor | ✓ | ✓ | Используется для вторичного курсора в текстах с двунаправленным отображением |
Свойства курсора позволяют изменить внешний вид курсора ввода в редактируемом тексте.
Таблица 5. Свойства оформления текста
| Имя | Значение | Начальное | Насл. | Аним. | Ссылка | Примечания |
|---|---|---|---|---|---|---|
| интерлиньяж | 〈length〉 | 0px | ✓ | ✓ | CSS3 | |
| оформление-текста-строка | none | underline | line-through | none | CSS2, CSS3 | CSS позволяет использовать overline | ||
| цвет-оформления-текста | 〈color〉 | currentColor | ✓ | CSS3 | ||
| стиль-оформления-текста | solid | double | wavy | solid | CSS3 | CSS позволяет использовать пунктирную и точечную линию | ||
| текст-тень | none | 〈shadow〉 | none | ✓ | ✓ | CSS3 |
| Сокращение | Значение | Начальное | Ссылка | Примечания |
|---|---|---|---|---|
| оформление-текста | 〈text-decoration-line〉 || 〈text-decoration-style〉 || 〈text-decoration-color〉 | см. отдельные свойства | CSS3 |
〈shadow〉 = 〈length〉 〈length〉 〈color〉?
Свойства оформления текста определяют, применять ли дополнительные украшения при отображении текста.
Таблица 6. Свойства значков
| Имя | Значение | Начальное | Наследуется | Анимация | Ссылка | Примечания |
|---|---|---|---|---|---|---|
| -gtk-icon-source | builtin | 〈image〉 | none | builtin | ✓ | |||
| -gtk-icon-transform | none | 〈transform〉+ | none | ✓ | |||
| -gtk-icon-style | requested | regular | symbolic | requested | ✓ | Определяет предпочтительный стиль для значков, загруженных приложением | ||
| -gtk-icon-theme | 〈name〉 | текущая тема значков | ✓ | Тема значков для использования с -gtk-icontheme(). С версии 3.20 | ||
| -gtk-icon-palette | 〈color palette〉 | default | ✓ | ✓ | Используется для перекраски значков-символов (как загруженных приложением, так и из -gtk-icontheme()). С версии 3.20 | |
| -gtk-icon-shadow | none | 〈shadow〉 | none | ✓ | ✓ | ||
| -gtk-icon-effect | none | highlight | dim | none | ✓ |
〈transform〉 = matrix( 〈number〉 [ , 〈number〉 ]{5} ) | translate( 〈length〉, 〈length〉 ) | translateX( 〈length〉 ) | translateY( 〈length〉 ) | scale( 〈number〉 [ , 〈number〉 ]? ) | scaleX( 〈number〉 ) | scaleY( 〈number〉 ) | rotate( 〈angle〉 ) | skew( 〈angle〉 [ , 〈angle〉 ]? ) |
skewX( 〈angle〉 ) | skewY( 〈angle〉 )
〈color palette〉 = default | 〈name〉 〈color〉 [ , 〈name〉 〈color〉 ]*
Свойство -gtk-icon-source используется виджетами, которые отображают «встроенные» значки, такие как стрелки, раскрывающие элементы, спиннеры, галочки или радиокнопки.
Свойство -gtk-icon-style определяет предпочтительный стиль для значков, предоставляемых приложением.
Свойства -gtk-icon-transform и -gtk-icon-shadow влияют на отображение как встроенных, так и предоставленных приложением значков.
-gtk-icon-palette определяет цветовую палитру для перекраски значков-символов. Признаваемые имена цветов в значках-символах — error, warning и success. По умолчанию эта палитра сопоставляет эти три имени со значками-символами @error_color, @warning_color и @success_color соответственно.
Таблица 7. Свойства блоков
| Имя | Значение | Начальное | Наследуется | Анимация | Ссылка | Примечания |
|---|---|---|---|---|---|---|
| min-width | 〈length〉 | 0px | ✓ | CSS2, CSS3 | CSS допускает проценты | |
| min-height | 〈length〉 | 0px | ✓ | CSS2, CSS3 | CSS допускает проценты | |
| margin-top | 〈length〉 | 0px | ✓ | CSS2, CSS3 | CSS допускает проценты или auto | |
| margin-right | 〈length〉 | 0px | ✓ | CSS2, CSS3 | CSS допускает проценты или auto | |
| margin-bottom | 〈length〉 | 0px | ✓ | CSS2, CSS3 | CSS допускает проценты или auto | |
| margin-left | 〈length〉 | 0px | ✓ | CSS2, CSS3 | CSS допускает проценты или auto | |
| padding-top | 〈length〉 | 0px | ✓ | CSS2, CSS3 | CSS допускает проценты | |
| padding-right | 〈length〉 | 0px | ✓ | CSS2, CSS3 | CSS допускает проценты | |
| padding-bottom | 〈length〉 | 0px | ✓ | CSS2, CSS3 | CSS допускает проценты | |
| padding-left | 〈length〉 | 0px | ✓ | CSS2, CSS3 | CSS допускает проценты |
| Сокращение | Значение | Начальное | Ссылка | Примечания |
|---|---|---|---|---|
| margin | 〈length〉{1,4} | см. отдельные свойства | CSS2, CSS3 | сокращение для «четырёх сторон» |
| padding | 〈length〉{1,4} | см. отдельные свойства | CSS2, CSS3 | сокращение для «четырёх сторон» |
Таблица 8. Свойства границ
| Имя | Значение | Начальное | Наследуется | Анимируется | Ссылка | Примечания |
|---|---|---|---|---|---|---|
| border-top-width | 〈length〉 | 0px | ✓ | CSS2, CSS3 | CSS допускает другие значения | |
| border-right-width | 〈length〉 | 0px | ✓ | CSS2, CSS3 | CSS допускает другие значения | |
| border-bottom-width | 〈length〉 | 0px | ✓ | CSS2, CSS3 | CSS допускает другие значения | |
| border-left-width | 〈length〉 | 0px | ✓ | CSS2, CSS3 | CSS допускает другие значения | |
| border-top-style | 〈border style〉 | none | CSS2, CSS3 | |||
| border-right-style | 〈border style〉 | none | CSS2, CSS3 | |||
| border-bottom-style | 〈border style〉 | none | CSS2, CSS3 | |||
| border-left-style | 〈border style〉 | none | CSS2, CSS3 | |||
| border-top-right-radius | 〈corner radius〉 | 0 | ✓ | CSS2, CSS3 | ||
| border-bottom-right-radius | 〈corner radius〉 | 0 | ✓ | CSS2, CSS3 | ||
| border-bottom-left-radius | 〈corner radius〉 | 0 | ✓ | CSS2, CSS3 | ||
| border-top-left-radius | 〈corner radius〉 | 0 | ✓ | CSS2, CSS3 | ||
| border-top-color | 〈color〉 | currentColor | ✓ | CSS2, CSS3 | ||
| border-right-color | 〈color〉 | currentColor | ✓ | CSS2, CSS3 | ||
| border-bottom-color | 〈color〉 | currentColor | ✓ | CSS2, CSS3 | ||
| border-left-color | 〈color〉 | currentColor | ✓ | CSS2, CSS3 | ||
| border-image-source | 〈image〉 | none | none | ✓ | CSS3 | ||
| border-image-repeat | 〈border repeat〉{1,2} | stretch | CSS3 | |||
| border-image-slice | [ 〈number〉 | 〈percentage〉 ]{1,4} && fill? | 100% | CSS3 | «четыре стороны» сокращенная запись | ||
| border-image-width | [ 〈length〉 | 〈number〉 | 〈percentage〉 | auto ]{1,4} | 1 | CSS3 | «четыре стороны» сокращенная запись |
| Сокращение | Значение | Начальное значение | Ссылка | Примечания |
|---|---|---|---|---|
| border-width | 〈length〉{1,4} | см. отдельные свойства | CSS2, CSS3 | сокращение для четырёх сторон |
| border-style | 〈border style〉{1,4} | см. отдельные свойства | CSS2, CSS3 | сокращение для четырёх сторон |
| border-color | 〈color〉{1,4} | см. отдельные свойства | CSS3 | сокращение для четырёх сторон |
| border-top | 〈length〉 || 〈border style〉 || 〈color〉 | см. отдельные свойства | CSS2, CSS3 | |
| border-right | 〈length〉 || 〈border style〉 || 〈color〉 | см. отдельные свойства | CSS2, CSS3 | |
| border-bottom | 〈length〉 || 〈border style〉 || 〈color〉 | см. отдельные свойства | CSS2, CSS3 | |
| border-left | 〈length〉 || 〈border style〉 || 〈color〉 | см. отдельные свойства | CSS2, CSS3 | |
| border | 〈length〉 || 〈border style〉 || 〈color〉 | см. отдельные свойства | CSS2, CSS3 | |
| border-radius | [ 〈length〉 | 〈percentage〉 ]{1,4} [ / [ 〈length〉 | 〈percentage〉 ]{1,4} ]? | см. отдельные свойства | CSS3 | |
| border-image | 〈border-image-source〉 || 〈border-image-slice〉 [ / 〈border-image-width〉 | / 〈border-image-width〉? / 〈border-image-outset〉 ]? || 〈border-image-repeat〉 | см. отдельные свойства | CSS3 |
〈border style〉 = none | solid | inset | outset | hidden | dotted | dashed | double | groove | ridge
〈corner radius〉 = [ 〈length〉 | 〈percentage〉 ]{1,2} Таблица 9. Свойства контура
| Имя | Значение | Начальное значение | Насл. | Аним. | Ссылка | Примечания |
|---|---|---|---|---|---|---|
| outline-style | none | solid | inset | outset | hidden | dotted | dashed | double | groove | ridge | none | CSS2, CSS3 | |||
| outline-width | 〈length〉 | 0px | ✓ | CSS2, CSS3 | ||
| outline-color | 〈color〉 | currentColor | ✓ | CSS2, CSS3 | ||
| outline-offset | 〈length〉 | 0px | CSS3 | |||
| -gtk-outline-top-left-radius | 〈corner radius〉 | 0 | ✓ | |||
| -gtk-outline-top-right-radius | 〈corner radius〉 | 0 | ✓ | |||
| -gtk-outline-bottom-right-radius | 〈corner radius〉 | 0 | ✓ | |||
| -gtk-outline-bottom-left-radius | 〈corner radius〉 | 0 | ✓ |
| Сокращение | Значение | Начальное значение | Ссылка | Примечания |
|---|---|---|---|---|
| outline | 〈outline-color〉 || 〈outline-style〉 || 〈outline-width〉 | см. отдельные свойства | CSS2, CSS3 | |
| -gtk-outline-radius | [ 〈length〉 | 〈percentage〉 ]{1,4} [ / [ 〈length〉 | 〈percentage〉 ]{1,4} ]? | см. отдельные свойства |
GTK+ использует свойства CSS outline для отрисовки «прямоугольника фокуса».
Таблица 10. Свойства фона
| Имя | Значение | Начальное значение | Насл. | Аним. | Ссылка | Примечания |
|---|---|---|---|---|---|---|
| background-color | 〈color〉 | rgba(0,0,0,0) | ✓ | CSS2, CSS3 | ||
| background-clip | 〈box〉 [ , 〈box〉 ]* | border-box | CSS3 | |||
| background-origin | 〈box〉 [ , 〈box〉 ]* | padding-box | CSS3 | |||
| background-size | 〈bg-size〉 [ , 〈bg-size〉 ]* | auto | ✓ | CSS3 | ||
| background-position | 〈position〉 [ , 〈position〉 ]* | 0 | ✓ | CSS2, CSS3 | ||
| background-repeat | 〈bg-repeat〉 [ , 〈bg-repeat〉 ]* | repeat | CSS2, CSS3 | |||
| background-image | 〈bg-image〉 [ , 〈bg-image〉 ]* | none | ✓ | CSS2, CSS3 | не поддерживаются: ссылки без кавычек, радиальные градиенты CSS, цвета в переходах | |
| background-blend-mode | 〈blend-mode〉 [ , 〈blend-mode〉 ]* | normal | только влияет на несколько фонов | |||
| box-shadow | none | 〈box shadow〉 [ , 〈box shadow〉 ]* | none | ✓ | CSS3 |
| Сокращение | Значение | Начальное значение | Ссылка | Примечания |
|---|---|---|---|---|
| background | [ 〈bg-layer〉 , ]* 〈final-bg-layer〉 | см. отдельные свойства | CSS2, CSS3 |
〈box〉 = border-box | padding-box | content-box
〈box shadow〉 = inset? && 〈length〉{2,4}? && 〈color〉? 〈bg-size〉 = [ 〈length〉 | 〈percentage〉 | auto ]{1,2} | cover | contain 〈position〉 = [ left | right | center | top | bottom | 〈percentage〉 | 〈length〉 ]{1,2,3,4} 〈bg-repeat〉 = repeat-x | repeat-y | [ no-repeat | repeat | round | space ]{1,2} 〈bg-image〉 = 〈image〉 | none
〈bg-layer〉 = 〈bg-image〉 || 〈position〉 [ / 〈bg-size〉 ]? || 〈bg-repeat〉 || 〈box〉 || 〈box〉
〈final-bg-layer〉 = 〈bg-image〉 || 〈position〉 [ / 〈bg-size〉 ]? || 〈bg-repeat〉 || 〈box〉 || 〈box〉 || 〈color〉
〈blend-mode〉 = color || color-burn || color-dodge || darken || difference || exclusion ||
hard-light || hue || lighten || luminosity || multiply || normal || overlay ||
Как и в CSS, цвет фона отображается под всеми слоями изображений фона, поэтому он будет виден только в том случае, если изображения фона отсутствуют или имеют прозрачность.
В качестве альтернативы, несколько фонов можно смешивать, используя свойство background-blend-mode.
Таблица 11. Свойства переходов
| Имя | Значение | Начальное | Наследуется | Аним. | Ссылка | Примечания |
|---|---|---|---|---|---|---|
| transition-property | none | all | 〈property name〉 [ , 〈property name〉 ]* | all | CSS3 | |||
| transition-duration | 〈time〉 [ , 〈time〉 ]* | 0s | CSS3 | |||
| transition-timing-function | 〈single-timing-function〉 [ , 〈single-timing-function〉 ]* | ease | CSS3 | |||
| transition-delay | 〈time〉 [ , 〈time〉 ]* | 0s | CSS3 |
| Сокращение | Значение | Начальное | Ссылка | Примечания |
|---|---|---|---|---|
| transition | 〈single-transition〉 [ , 〈single-transition〉 ]* | см. отдельные свойства | CSS3 |
〈single-timing-function〉 = ease | linear | ease-in | ease-out | ease-in-out |
step-start | step-end | steps( 〈integer〉 [ , [ start | end ] ]? ) |
cubic-bezier( 〈number〉, 〈number〉, 〈number〉, 〈number〉 )
〈single-transition〉 = [ none | 〈property name〉 ] || 〈time〉 || 〈single-transition-timing-function〉 || 〈time〉
Таблица 12. Свойства анимации
| Имя | Значение | Начальное | Наследуется | Аним. | Ссылка | Примечания |
|---|---|---|---|---|---|---|
| animation-name | 〈single-animation-name〉 [ , 〈single-animation-name〉 ]* | none | CSS3 | |||
| animation-duration | 〈time〉 [ , 〈time〉 ]* | 0s | CSS3 | |||
| animation-timing-function | 〈single-timing-function〉 [ , 〈single-timing-function〉 ]* | ease | CSS3 | |||
| animation-iteration-count | 〈single-animation-iteration-count〉 [ , 〈single-animation-iteration-count〉 ]* | 1 | CSS3 | |||
| animation-direction | 〈single-animation-direction〉 [ , 〈single-animation-direction〉 ]* | normal | CSS3 | |||
| animation-play-state | 〈single-animation-play-state〉 [ , 〈single-animation-play-state〉 ]* | running | CSS3 | |||
| animation-delay | 〈time〉 [ , 〈time〉 ]* | 0s | CSS3 | |||
| animation-fill-mode | 〈single-animation-fill-mode〉 [ , 〈single-animation-fill-mode〉 ]* | none | CSS3 |
| Сокращение | Значение | Начальное | Ссылка | Примечания |
|---|---|---|---|---|
| animation | 〈single-animation〉 [ , 〈single-animation〉 ]* | см. отдельные свойства | CSS3 |
〈single-animation-name〉 = none | 〈property name〉
〈single-animation-iteration-count〉 = infinite | 〈number〉
〈single-animation-direction〉 = normal | reverse | alternate | alternate-reverse
〈single-animation-play-state〉 = running | paused
〈single-animation-fill-mode〉 = none | forwards | backwards | both
〈single-animation〉 = 〈single-animation-name〉 || 〈time〉 || 〈single-timing-function〉 || 〈time〉 ||
〈single-animation-iteration-count〉 || 〈single-animation-direction〉 ||
〈single-animation-play-state〉 || 〈single-animation-fill-mode〉
Таблица 13. Свойства привязки клавиш
| Имя | Значение | Начальное | Наследуется | Аним. | Ссылка | Примечания |
|---|---|---|---|---|---|---|
| -gtk-key-bindings | none | 〈binding name〉 [ , 〈binding name〉 ]* | none |
〈имя привязки〉 должно было быть назначено набора привязок с помощью правила @binding-set.
© 2005–2020 The GNOME Project
Licensed under the GNU Lesser General Public License version 2.1 or later.
https://developer.gnome.org/gtk3/3.24/chap-css-properties.html