Spec-Zone.ru › GTK 3.24

Свойства 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. Свойства цвета

Имя Значение Начальное Насл. Аним. Ссылка Примечания
цвет 〈color〉 rgba(1,1,1,1) ✓ ✓ CSS2, CSS3
прозрачность 〈alpha value〉 1 ✓ CSS3

Свойство цвета задаёт цвет для текста, значков и других элементов переднего плана. Свойство прозрачности задаёт прозрачность, используемую для композиции виджета на его родительском виджете.

Таблица 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

Spec-Zone.ru

Настройки Оффлайн Что нового Помощь О нас
Spec-Zone .ru
спецификации, руководства, описания, API