Иногда нужно выделить фрагменты или какие-то блоки текста рамкой, цветом, сделать цветной фон, как, например, на рисунке.

html выделить цветом фон текста, рамку

Сделать такую рамку с цветным фоном просто. Не надо даже залезать в стили CSS.

В текстовом режиме вставьте в запись (пост) следующий html код.


<div style="border: 2px solid #aa0000; background: #F8E4DF; padding: 15px; border-radius: 9px; font-size: 12px; font-family: Arial;">ваш текст</div>

 

Все параметры можете изменить по своему вкусу.

  • Ширина и цвет рамки border: 2px solid #aa0000
  • размер шрифта font-size: 12px
  • стиль шрифта font-family: Arial
  • цвет фона background: #F8E4DF

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

  • Откройте свой сайт.
  • Наведите курсор на элемент, который надо изменить.
  • Правая кнопка мыши, Просмотр кода элемента (в Google Chrome), или Исследовать элемент (в Mozilla Firefox), или Проинспектировать элемент (в Opera). Далее во всех этих браузерах действия аналогичны.

Появляется окно в нижней части экрана. Просматриваемый элемент в нем подсвечен.

Где искать название блога

Где в CSS искать название блога

 

 

 

 

Нажмите на квадратик COLOR и выберите наиболее подходящий вам цвет. Скопируйте цифровое обозначение цвета и вставьте его в html код (цвет рамки или цвет фона).

Готово, вы получили выделение текста цветом (цветной фон) и цветной рамкой.