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

СТАТЬИ ПО ТЕМЕ:

.Htaccess: настройка, установка файла

Как сделать, изменить wordpress главную страницу

Отложенная, запланированная публикация WordPress

Вид рамки

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 код (цвет рамки или цвет фона).

Заключение

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

Понравилась статья? Поделитесь информацией с друзьями. Пишите отзывы в комментариях!

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

    Добрый день!
    Слышал про какой-то сервис, который проверяет текст и показывает вероятность попадания конкретного текста под фильтр. Это првда, есть такой?

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

      Вот публикация про этот сервис Тургенев. Угодить ему трудно, но можно.

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

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