Как на 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>