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

Текст, оформленный в яркую закругленную рамку, привлекает внимание читателей.

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

Не надо даже залезать в стили CSS.

Как сделать рамку в html вокруг текста

В текстовом режиме вставьте в запись (пост) следующий 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 (solid - сплошная линия, а может быть
dotted – точечная, dashed – пунктирная, double – двойная, ridge – рельефная).

РАЗМЕР шрифта font-size: 12px

СТИЛЬ шрифта font-family: Arial

ЦВЕТ фона background: #F8E4DF

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

ОТКРОЙТЕ свой сайт.

НАВЕДИТЕ курсор на элемент, который надо изменить.

ПРАВАЯ кнопка мыши, ПРОСМОТР КОДА ЭЛЕМЕНТА (в Google Chrome), или ИССЛЕДОВАТЬ ЭЛЕМЕНТ (в Mozilla Firefox), или ПРОИНСПЕКТИРОВАТЬ ЭЛЕМЕНТ (в Opera). Далее во всех этих браузерах действия аналогичны.

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

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

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

P.S. Чтобы рамка с текстом была заданной длины, задайте отступы или задайте размер этой рамки. Как это делается, написано в комментариях.

Метки:

Создать сайт на WordPress

ПОХОЖИЕ СТАТЬИ:

ДРУЗЬЯ, СПАСИБО, ЧТО ПОДЕЛИЛИСЬ СТАТЬЕЙ:

21 отзывов к “Html выделить текст цветом (фон), рамкой

  • vit:

    Спасибо, то что нужно:)

  • Анна:

    Почему-то html код не хочет вставляться.

  • Русский язык:

    Привык все плагинами выводить. А ведь все можно сделать проще. Спасибо!

  • AnSummer:

    Спасибо за простое объяснение, код использую. Но подобрать цвет как Вы советуете у меня в Mozille не получилось, меняется шрифт, а не фон. Может я чего-то не поняла.

    • Ольга:

      В данном куске кода есть возможность изменить цвет рамки или цвет фона. На цвет шрифта это не влияет.
      Как работать с цветом заголовков или шрифта в теле поста можно почитать здесь.

  • Иван:

    Огромное спасибо, реально то что нужно!!!

  • Вера:

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

    • Ольга:

      Вера, за закругления отвечает параметр border-radius: 9px. Попробуйте девятку заменить другой цифрой или вообще убрать из кода этот фрагмент.

  • Вера:

    Спасибо Оля я уже сама убрала часть ненужного кода, все получилась как задумано. Еще вопросик, как изменить ширину рамки?

    • Ольга:

      Ширина и цвет рамки border: 2px solid #aa0000
      2px — ширина
      #aa0000 — цвет

  • Вера:

    Благодарю Оля еще раз, как раз хотела такую рамочку для оформления записей, вообщем осталась довольна благодаря Вашему посту!

  • Ольга:

    Привет всем!Подскажите можно уменьшить саму длину рамки,а то у меня встаёт во всю ширину страницы,хочется поменьше сделать!

    • Ольга:

      У меня получилось. Может, кто-то предложит лучший вариант, я сделала так (задала отступы).
      Задала стиль стиль.
      В файле css записала отступы
      отступы.
      Получилось вот так
      рамка.

  • Ремонтник:

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

  • Наталья:

    Чтобы изменить ширину всего блока, надо перед параметром border вставить код width: 300px; — где 300 пикселей — ширина, которую можно менять под свои нужды.

    • Ольга:

      Спасибо за дополнения, Наталья.

    • Буса:

      Перед каким таким еще border надо ставить код width? там этих бордеров аж 3

      • Ольга:

        Задайте длину рамки перед первым border, вот так рамка html

  • Елена Касатова:

    Ольга, спасибо огромное, так не хотелось делать это плагином, но в кодах не разбираюсь, а ваше решение оказалось простым даже для меня — и цвет поменяла, и шрифт

  • Аля:

    Спасиибо! прям большое человеческое! Вот то, что нужно было

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *