Привязка классов к типам элементов

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

Здравствуйте, друзья

Недавно мы ввели в наш редактор привязку классов к типам элементов и хотим поделиться как этим пользоваться!

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

Можно конечно привязать из классу у которого внешние отступы установлены в 0, но все равно, к этому классу надо привязать все эти элементы, а если вам нужно добавить новый абзац или заголовок - не забыть привязать их к этому классу, согласитесь неудобно.

Что делать?

Все очень просто! Рассмотрим на примере, мы добавили два заголовка первого и второго уровня и создали предварительно классы Список классов для привязки в типам элементов

По названиям видно, что класс с именем Все заголовки будет влиять на заголовки всех уровней, Заголовки ур. 1 только на заголовки первого уровня и Заголовки ур. 2 только на заголовки второго уровня, но применять его не будем.

Для начала привяжем класс Все заголовки к заголовкам всех уровней. Виделим класс, у увидим как нам отобразиться новая кнопка Кнопка привязки класса к элементам

Список типов элементов редактора Нажав на нее мы увидим список всех типов элементов поддерживаемые редактором. Нам нужно выбрать все заголовки от 1 до 6 уровней, как показано на рисунке. Все! Теперь класс привязан к заголовкам, список типов элементов можно закрыть, нажав на кпопку раскрывшую список.

Теперь вы можете устанавливать любые стили для этого класса и влиять они будут только на заголовки от 1 до 6 уровней. Мы, для примера, установили фон серого цвета и внешние отступы в 10px. А если мы хотим выделить дополнительным стилем только заголовки уровня 1? Не проблема...

Привязка класса в заголовкам 1-ого уровня

Выбор заголовка 1 уровня Все аналогично как и со всеми заголовками, в примере мы уже добавили класс с именем Заголовки ур. 1. Нам только нужно выбрать его и привязать к заголовкам уровня 1, выбрав только Заголовок 1 уровня в меню элементов, как в прошлом примере. После привязки, для примера, установим белый цвет текста этих заголовков.

Итог

Таким образом, можно комбинировать стили для различных типов элементов, при вставке нового элемента стили установленные для этого типа элемента будут применены автоматически, что очень удобно, особенно если элементов нужного типа очень много. На изображении ниже видно, что у всех заголовков серый фон и есть отступы только у заголовка 1 уровня - белый цвет текста, как мы и хотели Итог примера привязки классов к элементам
C уважением, команда devdesire.ru
Закрыть