# Редактор стилей

> [HTML Version](style-editor.html)

Начиная с версии системы 2026.4 в дизайнере интерфейсов доступен **редактор стилей**. Это инструмент, который позволяет задать для виджетов цвета, шрифты, размеры, отступы и т. п. с помощью языка CSS.

Особенности редактора стилей:

1. При написании кода доступно автодополнение, а также проверки на ошибки.

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

3. Настроенные стили применяются к виджетам на поле для моделирования, поэтому вы можете посмотреть результат без публикации.

О других способах изменения внешнего вида интерфейсов читайте в статье в [статье о способах настройки стилей](apply-styles.md).

## Открыть редактор стилей

Чтобы начать работу с редактором, в [дизайнере интерфейсов](interface_designer.md) на вкладке **Шаблон** нажмите кнопку **Редактор стилей**. Рядом с полем для моделирования откроется панель для написания кода.

Вы можете изменить:

- расположение редактора — установите панель слева, справа или снизу от шаблона, нажав значок шестерёнки и выбрав нужную опцию;

- размер редактора — вы можете сузить или расширить панель с помощью значка двух полосок на её границе.

**(style-editor-1.png)**

## Настроить стили для виджетов

Чтобы определить внешний вид виджетов, нужно задать для них пользовательские классы, по которым определяется, какие стили к ним применить. Затем нужно настроить стили на языке CSS.

Допустим, вы настраиваете на форме виджет **Контейнер**, в котором размещаются кнопки. Рассмотрим, как добавить для него класс и определить его внешний вид в редакторе стилей:

1. В дизайнере интерфейсов откройте настройки виджета **Контейнер**.

2. На вкладке **Системные** создайте для виджета пользовательский класс. Для этого в поле **HTML классы** введите его название, например **buttons-panel**, и нажмите клавишу **Tab**.

**(style-editor-2.png)**

3. Нажмите на название добавленного класса, чтобы быстро перейти в редактор стилей. Откроется строка кода, где задаются стили для этого класса.

4. Определите стили для класса **buttons-panel**, используя язык CSS.

Рекомендуем вместо фиксированных значений свойств использовать [дизайн‑токены](design-tokens.md), чтобы сохранять единообразие стилей во всех частях системы.

````
начало примера

````
**Пример настройки стилей**

Чтобы задать для виджета ширину, отступы, радиус скругления границ и цвет фона, напишите в редакторе стилей код:

````
.buttons-panel \{  
    width: auto;  
    padding: var(--el-b-spacing-x) var(--el-b-spacing-2x);  
    margin: var(--el-b-spacing-3x);  
    border-radius: var(--el-b-border-radius-3x);  
    background-color: var(--el-b-color-background-accent-delicate);  
\}

конец примера

5. ````
Нажмите в редакторе стилей кнопку **Применить**. Новый стиль применится к виджету **Контейнер**, так как в его настройках указан класс **buttons-panel**.

**(style-editor-3.png)**

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

Вы можете применить один стиль к разным элементам интерфейса, указав в настройках нескольких виджетов одинаковый пользовательский класс.