Иногда нужно выделить фрагменты или какие-то блоки текста рамкой, цветом, сделать цветной фон. Текст, оформленный в яркую закругленную рамку, привлекает внимание читателей. Сделать такую рамку с цветным фоном просто.
Не надо даже залезать в стили 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
СТАТЬИ ПО ТЕМЕ:
.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>
Если текст длинный, и ширины рамки не хватает, слова в рамке встанут в несколько строчек. Высота рамки при этом автоматически увеличится.
Как выбрать цвет рамки и фона
Чтобы подобрать цвет рамки и цвет фона, наиболее подходящие к дизайну вашего сайта:
ОТКРОЙТЕ свой сайт.
НАВЕДИТЕ курсор на элемент, который надо изменить.
ПРАВАЯ кнопка мыши, ПРОСМОТР КОДА ЭЛЕМЕНТА (в Google Chrome), или ИССЛЕДОВАТЬ ЭЛЕМЕНТ (в Mozilla Firefox), или ПРОИНСПЕКТИРОВАТЬ ЭЛЕМЕНТ (в Opera). Далее во всех этих браузерах действия аналогичны.
Появляется окно в нижней части экрана. Просматриваемый элемент в нем подсвечен.
Нажмите на квадратик COLOR и выберите наиболее подходящий вам цвет. Скопируйте цифровое обозначение цвета и вставьте его в html код (цвет рамки или цвет фона).
Заключение
Готово, вы получили выделение текста цветом (цветной фон) и цветной рамкой. Сделали это простым способом.
Понравилась статья? Поделитесь информацией с друзьями. Пишите отзывы в комментариях!
- Как выбрать нишу, тему для инфобизнеса
- Как научиться зарабатывать на партнерских программах
- Карта сайта sitemap.xml – что это такое, как ее создать на WordPress
- WordPress, как вывести записи в две колонки
- Отложенная, запланированная публикация WordPress
- Seo копирайтинг: что это такое, как копирайтеры оптимизируют тексты под запросы
- Как озвучить видео без микрофона, не своим голосом
Вот есть хороший сервис для озвучки — upsaleslab.ru. В нем можно легко озвучить ваше видео, сгенерировав из текста голоса — более чем 25 голосами на 20 языках.
gleb иди ты со своим упса! Это платный сервис! Стоит озвучка — не хило!
Отличная статья , много чего умного и полезного для себя прочитала.