Добавление простых свойств CSS


Существует множество случаев, когда для достижения желаемого результата достаточно простого набора свойств CSS без каких-либо селекторов. Простые компоненты, такие как подпись или таймер, полностью настраиваются без единого селектора. Даже более сложные компоненты, такие как настраиваемое дерево, могут иметь несколько специальных полей свойств CSS, предоставляя возможность в той или иной степени стилизовать свои элементы с помощью простых свойств CSS.

Свойство CSS состоит из имени свойства и его значения. Текущий вид выглядит следующим образом:

свойство: значение

Несколько свойств разделяются точкой с запятой ( ; ) после каждого из них. Точка с запятой после единственного или последнего свойства не обязательна, но она помогает избежать случайных синтаксических ошибок:

property-a: value; property-b: value;

Список доступных на данный момент свойств CSS и их возможных значений регулируется спецификациями W3C CSS и может быть найден на различных открытых ресурсах, таких как W3C Community Wiki.



В нативном CSS простые свойства недопустимы и должны быть обернуты в селектор, что приводит к появлению правила CSS. Определение стилей компонентов в виде простого списка свойств является особенностью редактора CSS .


Пример добавления простого стиля в компонент


В самом простом сценарии, чтобы применить стиль к компоненту:

  1. В UI редакторе добавьте компонент на инструментальную панель, щелкнув по нему в Палитре компонентов или перетащив его на макет.

  2. Откройте редактор свойств, наведя курсор на компонент на макете и нажав кнопку ( :ic_configure_t_16 ) Настроить в правом верхнем углу появившегося оверлея, или выбрав его в Дереве компонентов.

  3. В редакторе свойств переключитесь на вкладку Стиль элемента.

  1. На вкладке Стиль элемента добавьте стили CSS в свойство Стиль CSS элемента:

color: tomato; text-align: center; font-size: 40px; font-weight: bold;

  1. Стиль применяется, когда поле выходит из фокуса, и результат виден на инструментальной панели.