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

Заключение

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

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

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

    Дополню еще по поводу кавычек. Если название чего-либо (например, фирмы) прописано на кириллице, то используют кавычки-елочки. Если название на латинице — лапки.

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

      Спасибо за Дополнение, Ирина.

  2. Edya

    Мне кажется это технические вопросы, влияние которых на самого читателя минимально. Ну кому какая разница с какой буквы пишется гЕРОЙ советского союза? Никто не читает статьи только из-за того, что они пунктуационно выверены.
    Я бы фокусировался на том, о чем написано и как написано (правила копирайтинга). Мне кажется от этого было бы больше эффекта.

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

      Правила русского языка никто не отменял. Неприятно читать тексты и запинаться за каждое слово или запятую. Можно ведь хотя бы в Ворде проверить текст на ошибки.

  3. Влад

    Очень полезная статья, вот только для продвижение сайта не пригодится. Люди читают все статьи, даже те, которые содежат кучу ошибок.

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

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

  4. Александра

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

  5. Евгения

    Добрый день. у меня не получилось добиться от Word никакой реакции на сочетание клавиш: Alt + 4 + 5.

    и: Alt + 0 + 2 + 1 + 5.
    уточните, пожалуйста, что имелось ввиду.

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

      Сама еще раз попробовала. Набирать надо на правой клавиатуре (не вверху). Минус получился, а вот вместо знака умножения получилась буква Ч. Что-то делаю не правильно.

      Знак умножить точкой — сочетание клавиш Alt+0183.

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

        Знак умножить — английская раскладка, сочетание Alt + 0 + 2 + 1 + 5 на правой клавиатуре.

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

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