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

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

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

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

Похожие записи WordPress: с плагином, без плагина, с миниатюрами

ТОЛЩИНУ и ЦВЕТ рамки определяет свойство 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 код (цвет рамки или цвет фона).

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

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

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

    Не поняла про плагин Рустолат, я его установила себе, но ссылки остались прежними…его настроить как-то надо?

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

      Марина, у Вас правильные урлы. Рустолат нужен, если адреса имеют непонятный вид типа 23201c291c43f3abbb6/%D0%A1%D1%82% и тому подобное.
      Оставьте все, как есть.

      1. Марина

        вот спасибо, а то я уже засомневалась в этом моменте)
        И за подсказки спасибо — вы у меня в закладках!!!

  2. Марина

    Еще, Ольга, я вам задала несколько вопросов на нескольких статьях, вот хотела посмотреть что вы ответите мне, но, к сожалению, не знаю на какие страницы выходить, я ведь читала десятки ваших статей, пробовала по вашей рекомендации устанавливать плагины, но, уж и забыла где писала…когда писала последний комментарий, обратила внимание, что нет предложения следить за комментариями темы. Вот на некоторых сайтах, когда пишешь комментарий, предлагают поставить галочку, чтобы как только ответ есть в комментариях, то сразу на емайл письмо приходит, ну и идешь смотреть…у вас этого нет, поэтому придется заново пересматривать статьи, не очень удобно((

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

      Марина, Вы имеете ввиду плагин Subscribe to comments?
      Я тоже поначалу подписалась на комментарии к разным блогам. Почту буквально завалило всяким хламом, чужими, неинтересными комментариями.
      Могу напомнить Вам просмотренные страницы
      https://moi-start.ru/kak-proverit-relevantnost-stranic-sajta.html/
      https://moi-start.ru/kak-ya-borolas-s-yandeksom.html/
      https://moi-start.ru/plagin-platinum-seo-pack-seo-optimizaciya-sajta.html/
      https://moi-start.ru/oshibki-nachinayushhix-bloggerov.html/

  3. Светлана

    Добрый день, Ольга! Снова к Вам за помощью. Яндекс проиндексировал наконец-то мой сайт lubluparfum.ru но из 9 загруженных 8 исключено, пишет документ запрещен в robot TXT, прочла эту статью,установила rus to lat, ничего не поменялось и я залезла в настройки постоянных ссылок. Раньше у меня стояло по умолчанию цыфры и я сменила на более человечные название записи, но это было до установки rus to lat. Не пойму что сделала сегодня не правильно, но все страницы кроме главной 404. Видно нужно сперва внимательно все читать, а потом клацать настройки (но у меня первый сайт и знаний ноль) Подскажите какие мои действия теперь. Очень жду вашего ответа! Заранее спасибо!

    1. Светлана

      Я связалась с службой поддержки хостинга и они деактивировали плагин, я его снесла. Теперь все открывается, но проблему с robot TXT я пока не решила. Страшновато лезть в код, я не понимаю в нем ничего.

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

        Плагин как-раз и нужен для того, чтобы не лазить лишний раз в коды.

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

      Светлана, без ЧПУ ссылки на сайте выглядят примерно следующим образом: ссылки на сайте без ЧПУ.
      Вот из-за этой строчки в robots.txt, у Вас не индексируются посты сайта:

      Disallow: /*?*

      Если Вы плагин установили правильно, то просто надо немного подождать. Яндекс проиндексирует страницы не моментально, а через некоторое время.
      Страницы с новыми адресами добавьте в Яндекс.Вебмастере http://webmaster.yandex.ru/addurl.xml. Это ускорит индексирование.

      1. Светлана

        Ольга, спасибо за внимание к нашим проблемам! Я удалила строчку Disallow: /*?*, в настройках поставила снова название, но оно без плагина пишется русскими буквами и в строке выдает абракадабру. Решила проблему прописав URL вручную. На яндексе проверила, вроде все проходит. Обновленные статьи провела через аддурилку в яндексе. Теперь мне только ждать осталось?

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

        Светлана, Вы перемудрили.
        Если удалили из robots.txt директиву Disallow: /*?*, теперь адреса содержащие ?p=338 и так будут индексироваться. Только нужны ли вам такие адреса?
        Плагин нужен, чтобы не делать все вручную (при старом robots.txt).

      3. Светлана

        Вы скорее всего правы на все 100%, но я или не могу его правильно настроить или может с моей темой он в конфликте, а скорее всего руки у меня из мягких булочек. При его активации ВСЕ страницы 404, кроме главной. Я нарыла, что необходимо установить еще плагин и настроить все имеющиеся у меня страницы (их пока не много)на переадресацию. Тут мне, наверно, самой не справиться. Буду пока так, а позже найду кого нибудь, чтоб настроил. Можно Вам, Ольга еще вопрос не в тему? В комментариях на вашем сайте (в ответах) граватар автоматически выставляется? Мне, наверно, нужно прописать второй e-mail (тот к которому сайт привязан)

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

        Светлана, когда Вы установили плагин, нужно было у всех старых статей вручную изменить адреса (взять заголовок статьи, нажать ИЗМЕНИТЬ). Плагин трансформирует заголовок.
        У Вас всего шесть статей, никакой плагин для редиректа не нужен. Настройте правильно, статьи проиндексируются под новыми адресами.
        новый адрес

      5. Светлана

        Ольга, спасибо Вам огромное! Только Вы мне и разъяснили :) Я установила по новой плагин и часть статей (6 шт те где я не успела в ручную изменить ссылки)действительно сразу 404. Зашла изменила, а заодно и оптимизировала seo все в одном. Теперь все открывается и выглядит красиво. Создала свою фавиконку. Сильно помучилась с установкой ее на сайт. Еще раз спасибо за Ваше внимание и умение. Буду потихоньку изучать Ваши статьи и, если можно, приставать с вопросами.

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

        Конечно, спрашивайте, Светлана.

  4. Николай

    Правильный файл robots.txt очень важен для правильной индексации сайта. Если в Disallow: не указать страницы с большим количеством внешних ссылок (если такие конечно есть), то сайт, очень часто, начинает вылетать из индексации :-(

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

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