Иногда нужно выделить фрагменты или какие-то блоки текста рамкой, цветом, сделать цветной фон.
Текст, оформленный в яркую закругленную рамку, привлекает внимание читателей.
Сделать такую рамку с цветным фоном просто.
Не надо даже залезать в стили CSS.
Содержание статьи
Как сделать рамку в html вокруг текста
В текстовом режиме вставьте в запись (пост) следующий html код (в режиме ТЕКСТ).
<div style="border: 2px solid #aa0000; background: #F8E4DF; padding: 15px; border-radius: 9px; font-size: 12px; font-family: Arial;">ваш текст</div>
Все параметры можете изменить по своему вкусу.
В режиме ВИЗУАЛЬНО вы увидите текст в рамке.
Толщина и размер рамки
РАЗМЕР шрифта текста 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>
Если текст длинный, и ширины рамки не хватает, слова в рамке встанут в несколько строчек. Высота рамки при этом автоматически увеличится.
Как выбрать цвет рамки и фона
Чтобы подобрать цвет рамки и цвет фона, наиболее подходящие к дизайну вашего сайта:
ОТКРОЙТЕ свой сайт.
НАВЕДИТЕ курсор на элемент, который надо изменить.
ПРАВАЯ кнопка мыши, ПРОСМОТР КОДА ЭЛЕМЕНТА (в Google Chrome), или ИССЛЕДОВАТЬ ЭЛЕМЕНТ (в Mozilla Firefox), или ПРОИНСПЕКТИРОВАТЬ ЭЛЕМЕНТ (в Opera). Далее во всех этих браузерах действия аналогичны.
Появляется окно в нижней части экрана. Просматриваемый элемент в нем подсвечен.
Нажмите на квадратик COLOR и выберите наиболее подходящий вам цвет. Скопируйте цифровое обозначение цвета и вставьте его в html код (цвет рамки или цвет фона).
Готово, вы получили выделение текста цветом (цветной фон) и цветной рамкой.
Понравилась статья? Пишите отзывы в комментариях!
ПОХОЖИЕ СТАТЬИ:
- Как сделать, изменить wordpress главную страницу
- Похожие записи WordPress без плагина
- Как сделать постраничную навигацию WordPress без плагина
- Отложенная, запланированная публикация WordPress
- Как зайти в админку wordpress. Где вход в админку?
- Создать фавикон для сайта. Устанавливаем без плагина
- Хлебные крошки на сайте wordpress без плагина
ДРУЗЬЯ, СПАСИБО, ЧТО ПОДЕЛИЛИСЬ СТАТЬЕЙ:
Спасибо, то что нужно:)
Почему-то html код не хочет вставляться.
Исправлено.
Привык все плагинами выводить. А ведь все можно сделать проще. Спасибо!
Спасибо за простое объяснение, код использую. Но подобрать цвет как Вы советуете у меня в Mozille не получилось, меняется шрифт, а не фон. Может я чего-то не поняла.
В данном куске кода есть возможность изменить цвет рамки или цвет фона. На цвет шрифта это не влияет.
Как работать с цветом заголовков или шрифта в теле поста можно почитать здесь.
Огромное спасибо, реально то что нужно!!!
Действительно очень просто сделать рамочку для текста, спасибо теперь можно обойтись без плагинов. Только вот хотелось бы без округлых краев, это возможно изменить в коде?
Вера, за закругления отвечает параметр border-radius: 9px. Попробуйте девятку заменить другой цифрой или вообще убрать из кода этот фрагмент.
Спасибо Оля я уже сама убрала часть ненужного кода, все получилась как задумано. Еще вопросик, как изменить ширину рамки?
Ширина и цвет рамки border: 2px solid #aa0000
2px — ширина
#aa0000 — цвет
Благодарю Оля еще раз, как раз хотела такую рамочку для оформления записей, вообщем осталась довольна благодаря Вашему посту!
Привет всем!Подскажите можно уменьшить саму длину рамки,а то у меня встаёт во всю ширину страницы,хочется поменьше сделать!
У меня получилось. Может, кто-то предложит лучший вариант, я сделала так (задала отступы).
.
.
.
Задала стиль
В файле css записала отступы
Получилось вот так
Наверное вы знаете, чтобы добиться красивого оформления текстов, можно использовать различные художественные приемы, одним из которых является оформление цветом. Это изменение цвета текста, цвет фона.
Чтобы изменить ширину всего блока, надо перед параметром border вставить код width: 300px; — где 300 пикселей — ширина, которую можно менять под свои нужды.
Спасибо за дополнения, Наталья.
Перед каким таким еще border надо ставить код width? там этих бордеров аж 3
Задайте длину рамки перед первым border, вот так
Ольга, спасибо огромное, так не хотелось делать это плагином, но в кодах не разбираюсь, а ваше решение оказалось простым даже для меня — и цвет поменяла, и шрифт
Спасиибо! прям большое человеческое! Вот то, что нужно было
спасибо большое, достаточно просто, как оказывается)
а как поступить, если нужны несколько слов в одной строке, и каждому нужна своя рамка? (рамки однотипные)
посмотрите тут про выделение рамкой div и span https: / /alexey-donskoy.livejournal.com/140433.html