Как на html реализовать блоки «Внимание / Важно»?

Question

[Вася Пупкин]

Напомните названия онлайн конструкторов, где можно реализовать такие блоки в тексте, без отдельного css файла.
Т.е. чтобы все было внутри просто html файла. Тобишь банальный текст к примеру: Примечание: сам текст, и все это в синем блоке. Предпреждение в желтом и т.д.

Comments

[Сергей Соколов]

обычно такие штуки называются alert (напр. в Bootstrap) — но без CSS-файла не обойтись. Можно его, конечно, подключить по ссылке, но пользователю от этого не легче.

[Ankhena]

без отдельного css файла

Что мешает заинлайнить стили?

[Вася Пупкин]

Сергей Соколов, жаль.

[Вася Пупкин]

Ankhena, мешает не понимание жаргона в этой сфере ))) Пришлось гуглить вопрос ваш.
Но вот как раз то что вы написали, и была мысля реализовать.

Поднята система заявок + база знаний на HESK, и там при наполнении базы статьями, есть встроенный редактор (WYSчето-там) с простыми навыками html, и есть просмотр кода, куда можно вносить изменения.


Была малая доля надежды, что получится реализовать что-то похожее через, какой-нибудь style, который будет применен к div'ам или "p" с залитым к примеру фоном или банально таблицу разукрасить, а в ней центрирование сделать по вертикали.

Поэтому и попросил какой-нибудь хороший визуализатор, если кто часто пользуется, где можно будет реализовать такое и потом CTR+C, CTR+V.

[Сергей delphinpro]

Вася Пупкин, можно один раз сделать правильно, а потом удобно пользоваться
https://delphinpro.ru/a/11

[Ankhena]

Вася Пупкин, из онлайн не знаю, думаю, что с функциональностью которая нужна вам для этой плашки (разные бордеры, скругления, тени) - вряд ли.
Скорее всего поможет что-то типа Dreamweaver.

Если не разбираетесь в верстке, то проще и быстрее попросить на фрилансе.

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

<section style="padding: 1em; border-left: 4px solid #d9a83a ; border-radius: 8px; background:rgb(252,246,230); color: #49390d; box-shadow:  0 2px 0 #efefef">
  <h2 style="margin-top: 0; text-transform:uppercase;">⚠ Предупреждение</h2>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet natus laborum eveniet? Unde nesciunt, architecto error iste accusamus veritatis? Fuga!</p>
</section>

[Вася Пупкин]

Сергей delphinpro, Нет прав добавлять что-то или менять. Как я уже написал выше, использую HESK

Ankhena, Спасибо, погуглю на эту тему, может где-то можно будет подгрузить свои стили все-таки.

[Сергей delphinpro]

Вася Пупкин, насколько я понял, система вполне поддается кастомизации
https://www.hesk.com/knowledgebase/?article=33

Как минимум, вы можете определить собственные стили и вставлять в редактор упрощенный код алерта, без инлайн стилей

<section class="my-alert">
  <h2>⚠ Предупреждение</h2>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet natus laborum eveniet? Unde nesciunt, architecto error iste accusamus veritatis? Fuga!</p>
</section>

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

А по максимуму скорее всего можно и редактор подтюнить.

[Вася Пупкин]

Сергей delphinpro, Спасибо, поддается, я уже открыл код страницы со статьей по ссылке, скопировал DIV'ы с нее и просто вставил в свою статью. Стили корректно отработали на ней, значит те стили что юзаются на той странице есть и в базовой версии, так что просто буду вставлять эти DIV'ы и все.

Answer 1

[Сергей delphinpro]

Поэтому и попросил какой-нибудь хороший визуализатор, если кто часто пользуется, где можно будет реализовать такое и потом CTR+C, CTR+V.

Его можно самому написать за несколько минут.

Вот, как вариант:

https://codepen.io/delphinpro/pen/BaXXKzQ