Blockly перешёл в состав Raspberry Pi Foundation 10 ноября 2025 года! Ознакомьтесь с записью в блоге и разделом часто задаваемых вопросов .

Эта страница переведена с помощью Cloud Translation API.

Стиль с помощью CSS

Приложения Blockly создаются из HTML и SVG элементов. Эти элементы помечаются CSS-классами, которые определяют, что они представляют (например, blocklyBlock , blocklyField ), а также их состояние (например, blocklyEditing , blocklySelected ). Blockly также предоставляет набор правил CSS по умолчанию.

Для оформления вашего приложения можно использовать CSS:

Замените правила CSS Blockly своими собственными правилами.
Добавьте собственные CSS-классы к компонентам Blockly для большей специфичности.
Используйте классы и правила CSS для оформления пользовательских компонентов.

CSS-классы

В приложениях Blockly для идентификации элементов, подлежащих стилизации, используются CSS-классы. Это обеспечивает более точный контроль, чем селекторы типа (элемента).

Блочные CSS-классы

Blockly использует CSS-классы для предоставления следующей информации об используемых элементах HTML и SVG.

Тип. Большинство CSS-классов Blockly определяют, что представляет собой элемент. Например, корневой элемент блока имеет метку blocklyBlock . Некоторые элементы имеют несколько меток, каждая из которых более специфична, чем предыдущая. Например, корневой элемент текстового поля ввода имеет метки blocklyField , blocklyInputField и blocklyTextInputField . Классы типов остаются неизменными на протяжении всего существования компонента.
Состояние. Blockly также использует классы CSS для указания состояния компонента. Например, когда курсор находится на текстовом поле ввода, его корневой элемент помечается классом blocklyEditing . Когда курсор перемещается, этот класс удаляется.
Дополнительная информация. Blockly использует несколько CSS-классов для предоставления дополнительной информации. Например, в внедряемом элементе <div> есть классы, которые указывают имя текущего рендерера и темы рабочей области. Эти классы, как правило, остаются неизменными на протяжении всего срока службы приложения.

Проще всего узнать, какие CSS-классы использует Blockly, — открыть инструменты разработчика в браузере и просмотреть элементы, используемые вашим приложением.

Пользовательские CSS-классы

Для большей специфичности компонентов Blockly можно использовать пользовательские CSS-классы.

Рабочие места

Чтобы добавить или удалить CSS-класс из внедряемого элемента <div> в рабочей области, вызовите методы WorkspaceSvg.addClass или WorkspaceSvg.removeClass .

Ящики для инструментов

Чтобы добавить CSS-класс к кнопке или метке в панели инструментов, используйте ключ web-class в определении панели инструментов в формате JSON. Дополнительную информацию см. в разделе «Кнопки и метки» .

Чтобы переопределить CSS-классы, используемые для различных частей категории, используйте ключ cssConfig в определении категории в формате JSON. Это позволяет стилизовать отдельные категории. Для получения дополнительной информации см. раздел «CSS для категорий» .

Блоки

Чтобы добавить CSS-классы к пользовательскому блоку, передайте строку или массив строк в ключ classes .

Blockly.common.defineBlocksWithJsonArray([{
  "type": "string_length",
  "message0": 'length of %1',
  "args0": [
    {
      "type": "input_value",
      "name": "VALUE",
      "check": "String",
    }
  ],
  "classes": "myStringLengthBlock",
  "output": "Number",
  "colour": 160,
}]);

Также можно добавить или удалить CSS-класс из элемента <g> блока, вызвав методы BlockSvg.addClass или BlockSvg.removeClass .

Поля меток

Чтобы добавить или удалить CSS-класс для элемента <text> , используемого полем метки или сериализуемым полем метки, вызовите метод FieldLabel.setClass . Вы также можете передать имя класса в конструктор метки.

CSS-классы и пользовательские компоненты

При создании пользовательского компонента используйте один из следующих методов для добавления пользовательских CSS-классов:

Если ваш компонент является подклассом Field или Icon , переопределите метод initView . Например:
```
class MyCustomField extends Blockly.FieldTextInput {
  ...

  initView() {
    super.initView();

    // Add custom CSS class so we can style the field.
    if (this.fieldGroup_) {
      Blockly.utils.dom.addClass(this.fieldGroup_, 'myCustomField');
    }
  }
}
```
Для получения дополнительной информации см. раздел «Настройка полей с помощью CSS» или «Создание представления значка» .
При создании SVG-элемента передайте свой класс в Blockly.utils.dom.createSvgElement :
```
this.svgRoot = Blockly.utils.dom.createSvgElement(Svg.G, {'class': 'myCustomComponent'});
```

При создании HTML-элемента используйте Blockly.utils.dom.addClass :

const myDiv = document.createElement('div');
Blockly.utils.dom.addClass(myDiv, 'myInformation');

Для добавления или удаления классов после создания объекта используйте Blockly.utils.dom.addClass или Blockly.utils.dom.removeClass .

setMyHighlight(highlight) {
  if (highlight) {
    Blockly.utils.dom.addClass(this.svgRoot, 'myHighlight');
  } else {
    Blockly.utils.dom.removeClass(this.svgRoot, 'myHighlight');
  }
}

фон из правил CSS

Если вы разбираетесь в свойствах стилизации SVG и каскадах CSS, можете пропустить этот раздел.

Свойства стилизации SVG против свойств CSS

SVG-элементы оформляются с помощью свойств стилизации SVG . Эти свойства можно использовать в качестве атрибутов SVG-элементов (также известных как атрибуты представления ) или в правилах CSS. Таким образом, все приведенные ниже примеры делают одно и то же.

<!-- SVG file with presentation attributes. -->
<circle fill="red" ... />

<!-- SVG file with <style> tag. -->
<style>
  circle {fill:red;}
</style>
<circle ... />

/* External CSS file.*/
circle {fill:red;}

<!-- SVG file with inline style. -->
<circle style="fill:red;" ... />

Список свойств стилизации SVG связан со списком свойств CSS, но отличается от него:

Одинаковая концепция, одно и то же название. Например, и SVG, и CSS используют direction для указания того, является ли текст слева направо (LTR) или справа налево (RTL).
Концепция та же, название другое. Например, в SVG для указания цвета заливки используется fill ; в CSS — background-color .
Только CSS. В CSS есть много свойств, которых нет в SVG, таких как margin и padding .
Только SVG. В SVG есть несколько свойств, которых нет в CSS, например, x и y .

Таким образом, если вы стилизуете элемент SVG, используйте свойства стилизации SVG . Если вы стилизуете элемент HTML, используйте свойства CSS .

CSS каскад

Каскад CSS определяет приоритеты правил CSS, то есть, какое правило использовать, если к данному свойству и элементу применяется более одного правила. Приведенная ниже упрощенная схема каскада охватывает наиболее часто используемые Blockly части каскада и может помочь вам ответить на вопрос: «Почему мой CSS не работает?»

Упрощенный каскад

Чтобы определить, какое правило применяется к конкретному элементу и свойству, выполните следующие шаги и остановитесь, когда останется только одно правило:

Соберите все правила, применимые к данному свойству и элементу.
Если какие-либо правила имеют аннотацию !important , отбросьте все правила, которые не имеют аннотации !important .
Выберите правила с наибольшей специфичностью .
- Атрибуты представления SVG имеют нулевую специфичность.
- Специфичность правил в теге <style> или внешней таблице стилей рассчитывается обычным способом.
- Встроенные стили (стили, задаваемые атрибутом style ) обладают большей специфичностью, чем любые селекторы.
Выберите правило, которое встречается последним в документе.
Если правило не применяется, значение свойства наследуется от родительского элемента.

Данный алгоритм не учитывает следующие части каскада:

Свойство transition имеет наивысший приоритет. Blockly использует несколько таких свойств.
Правило @media с использованием @. Blockly использует одно из таких правил.
Правила, заданные браузером или пользователем.
Правила @scope и @layer , а также свойство animation , которые не используются Blockly.

Правила CSS

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

Правила CSS Blockly

Blockly предоставляет набор правил CSS по умолчанию. Способ и место добавления этих правил влияют на их приоритет .

Стили тегов

Большинство правил CSS в Blockly задаются в двух тегах <style> . Поскольку эти теги расположены в верхней части страницы, правила в них имеют более низкий приоритет, чем правила с той же спецификой, которые находятся дальше по странице.

Правила Blockly.css.register

При внедрении Blockly добавляется тег <style> в качестве дочернего элемента тега <head> . Правила для этого тега берутся из:

Пространство имен Blockly.css . Чтобы увидеть эти правила, откройте файл core/css.ts и найдите строку let content .
Отдельные компоненты, которые вызывают Blockly.css.register для добавления специфичных для компонента правил CSS. Поскольку css.register добавляет эти правила в конец строки content , они имеют более высокий приоритет, чем правила с той же специфичностью, которые были добавлены ранее. Чтобы увидеть эти правила, см. вызовы Blockly.css.register .

Если вы не хотите использовать эти правила, установите параметр конфигурации css в false . В этом случае вам потребуется предоставить альтернативный набор правил CSS.

Правила рендеринга

При создании экземпляра рендерера он добавляет тег <style> , содержащий специфичные для рендерера правила CSS, в качестве дочернего элемента тега <head> . Обратите внимание, что эти правила добавляются всегда — на них не влияет параметр конфигурации css . Чтобы увидеть эти правила, найдите метод getCss_ в вашем рендерере.

Встроенные стили

Встроенные стили задаются с помощью атрибута style и обычно создаются при создании DOM-дерева для компонента. Частичный список можно найти в этом запросе на GitHub .

Встроенные стили применяются непосредственно к элементу, на котором они находятся, и обладают большей специфичностью, чем любые селекторы. По этой причине для их переопределения обычно требуется использовать аннотацию !important .

Атрибуты представления SVG

Атрибуты представления SVG — это свойства стиля SVG, используемые в качестве атрибутов элементов SVG. Они имеют нулевую специфичность и не могут содержать аннотацию !important , поэтому имеют самый низкий приоритет среди всех правил Blockly. Blockly обычно создает их при вызове функции createSvgElement .

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

Вы можете добавлять собственные правила CSS, используя те же методы, что и в Blockly:

Перед внедрением Blockly вызовите Blockly.css.register . Ваши правила будут добавлены после правил Blockly и будут иметь более высокий приоритет, чем правила Blockly с той же специфичностью.
Добавьте тег <style> или ссылку на внешнюю таблицу стилей в качестве дочернего элемента после тега <head> . Поскольку Blockly добавляет свои правила в качестве первых двух дочерних элементов тега <head> , ваши правила будут иметь более высокий приоритет, чем правила Blockly с той же степенью специфичности.
Используйте встроенные стили для добавления стилей к элементам в пользовательском компоненте. Эти правила будут иметь более высокую специфичность, чем любые правила с селектором.
Используйте атрибуты представления для элементов SVG в пользовательском компоненте. Эти правила будут иметь меньшую специфичность, чем любые правила с селектором.

Поиск неисправностей

Если ваш CSS не работает, вот несколько возможных причин:

Вы используете свойства CSS для элемента SVG или свойства стилизации SVG для элемента HTML. См. Сравнение свойств стилизации SVG и свойств CSS .
Ваше правило имеет более низкий приоритет, чем другое правило. Обычно это связано с более низкой специфичностью . Возможные способы решения этой проблемы:
- Вместо селектора типа (элемента) используйте селектор класса.
- Используйте несколько селекторов.
- По возможности добавьте пользовательский класс к целевому элементу и используйте этот класс в своем правиле.
- В крайнем случае, добавьте к своему правилу аннотацию !important . Это ваш единственный вариант, если конкурирующее правило задано с использованием встроенного стиля (атрибута style ).
Ваше правило имеет ту же специфичность, что и другое правило, но расположено раньше на странице. Если вы не можете повысить специфичность своего правила, переместите его дальше на странице.

Существует два типа правил CSS, которые нельзя переопределить:

Свойства, задаваемые внутри правила transition .
!important правила, заданные браузером.