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

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

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

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

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

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

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

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

Все параметры можете изменить по своему вкусу.
В режиме ВИЗУАЛЬНО вы увидите текст в рамке.
html выделить цветом фон текста, рамку

Толщина и размер рамки

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

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

ТОЛЩИНУ и ЦВЕТ рамки определяет свойство border: 2px solid #aa0000.

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

Вид рамки

Solid - сплошная линия. Обводка может быть:

  • dotted – точечная;
  • dashed – пунктирная;
  • double – двойная;
  • ridge – рельефная.

При таком написании рамка растянется на всю ширину блока <p>  или <div>, который занимает.

Html рамка по длине текста

Чтобы сделать рамку по длине текста, надо задать ее ширину, например, width:100px.

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

html рамка по длине текста Если текст длинный, и ширины рамки не хватает, слова в рамке встанут в несколько строчек. Высота рамки при этом автоматически увеличится.

Как выбрать цвет рамки и фона

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

ОТКРОЙТЕ свой сайт. Где в CSS искать название блога

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

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

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

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

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

Понравилась статья? Пишите отзывы в комментариях!

Понравилась статья? Поделиться с друзьями:
Я новичок
Комментариев: 24
  1. vit

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

  2. Анна

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

    1. Ольга (автор)

      Исправлено.

  3. Русский язык

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

  4. AnSummer

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

    1. Ольга (автор)

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

  5. Иван

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

  6. Вера

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

    1. Ольга (автор)

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

  7. Вера

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

    1. Ольга (автор)

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

  8. Вера

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

  9. Ольга

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

    1. Ольга (автор)

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

  10. Ремонтник

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

  11. Наталья

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

    1. Ольга (автор)

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

    2. Буса

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

      1. Ольга (автор)

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

  12. Елена Касатова

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

  13. Аля

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

  14. Ольга

    спасибо большое, достаточно просто, как оказывается)

  15. Илья

    а как поступить, если нужны несколько слов в одной строке, и каждому нужна своя рамка? (рамки однотипные)

    1. Ольга (автор)

      посмотрите тут про выделение рамкой div и span https: / /alexey-donskoy.livejournal.com/140433.html

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

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: