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