Как сделать рамку вокруг текста css

Оформляем текст в рамку с помощью HTML тегов

Речь пойдет об оформлении текста опубликованного в Интернет. Для этого мы будем использовать теги HTML, применяемые при форматировании текста.

Если вам необходимо обрамить в рамку текст (абзац, строку или выборочную часть), можно воспользоваться несколькими способами.

Использование свойств

Нам необходимо заключить выбранный кусок текста в любой подходящий тег. Самый простой вариант — использовать тег абзаца:

Теперь нужно назначить для него соответствующий стиль. Напоминаем, за рамку в HTML отвечает свойство " border ". Для него необходимо указывать 3 параметра:

  • Толщину рамку в пикселях
  • Форму границы (сплошная, точечная и тд.)
  • Цвет рамки

Допустим, нам нужно оформить наш абзац красной сплошной рамкой, толщиной в 1 пиксель. Вот такой код мы должны прописать в атрибуте " style " для тега " p ".

Вы получите вот такой результат.

В нашем примере текст в данном абзаце будет оформлен красной рамкой

Как правильно указывать параметры:

  1. Толщина указывается числом с дополнением " px "
  2. Доступны следующие варианты оформления рамки: dotted (точечная), dashed (прерывистая линия), solid (сплошная), double (двойная). Дополнительные варианты оформления делают рамку для текста с визуальными эффектами.
  3. Цвет рамки можно указывать английским словом, соответствующим выбранному цвету, или же указывая код цвета (например, синий #0000FF )

Такие же свойства вы можете применить к тегам " div " и " span ", заключив в них нужный текст.

Html выделить текст цветом (фон), рамкой

Как сделать рамку в html вокруг текста

Иногда нужно выделить фрагменты или какие-то блоки текста рамкой, цветом, сделать цветной фон. Текст, оформленный в яркую закругленную рамку, привлекает внимание читателей. Сделать такую рамку с цветным фоном просто.

Не надо даже залезать в стили CSS.

Как сделать рамку в html вокруг текста

В текстовом режиме вставьте в запись (пост) следующий html код (в режиме ТЕКСТ).

html выделить цветом фон текста, рамку

Все параметры можете изменить по своему вкусу.
В режиме ВИЗУАЛЬНО вы увидите текст в рамке.

Толщина и размер рамки

В вышеприведенном примере РАЗМЕР шрифта текста font-size: 12px

СТИЛЬ шрифта font-family: Arial

ТОЛЩИНУ и ЦВЕТ рамки определяет свойство border: 2px solid #aa0000.

ЦВЕТ фона background: #F8E4DF

Вид рамки

Solid — сплошная линия. Обводка может быть:

  • dotted – точечная;
  • dashed – пунктирная;
  • double – двойная;
  • ridge – рельефная.

При таком написании рамка растягивается на всю ширину занимаемого блока <p> или <div>.

Html рамка по длине текста

Чтобы сделать рамку по длине текста, надо задать ее ширину, например, width:100px.

html рамка по длине текста

Если текст длинный, и ширины рамки не хватает, слова в рамке встанут в несколько строчек. Высота рамки при этом автоматически увеличится.

Как выбрать цвет рамки и фона

Где в CSS искать название блога

Чтобы подобрать цвет рамки и цвет фона, наиболее подходящие к дизайну вашего сайта:
ОТКРОЙТЕ свой сайт.

НАВЕДИТЕ курсор на элемент, который надо изменить.

ПРАВАЯ кнопка мыши, ПРОСМОТР КОДА ЭЛЕМЕНТА (в Google Chrome), или ИССЛЕДОВАТЬ ЭЛЕМЕНТ (в Mozilla Firefox), или ПРОИНСПЕКТИРОВАТЬ ЭЛЕМЕНТ (в Opera). Далее во всех этих браузерах действия аналогичны.

Появляется окно в нижней части экрана. Просматриваемый элемент в нем подсвечен.

Нажмите на квадратик COLOR и выберите наиболее подходящий вам цвет. Скопируйте цифровое обозначение цвета и вставьте его в html код (цвет рамки или цвет фона).

Заключение

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

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

Как сделать рамку вокруг текста css

Это рамка с измененными размерами border:10 px и цветом solid #9b089e;

Края рамка вдавленные

Открыть комментарии &#8594;

6 коммент. :

Здравствуйте Ольга! Подскажите что значит дел? Если просто скопировать код и вставить в сообщение , то ничего не получается. И еще не могу присоединиться к сайту.

Татьяна, можете копировать, получилось исправить в браузере Опера.

Ольга, здравствуйте! Спасибо большое. Всё получилось.

Сколько перерыла статей в интернете, все объясняют очень сложно, с css, как делать рамку. А у вас все просто до гениальности — заключи текст в код — и вуаля! Единственное, что я бы добавила в вашу статью — что цвета рамки можно менять, заменив соответствующий цвет в коде.
И еще у вас хорошее оформление — код + как это выглядит. Лучшая статья для чайников

PS Третья рамка (зеленая) без кода. Последняя рамка "с краями кромкой" почему-то делает текст жирным курсивом по центру.

elenavogni, спасибо за отзыв. Третья рамка (зеленая) для примера, код в рамке выше. Я изменила размер границ рамки: border: 1px на border:10px.

Рамка с краями кромкой: в части кода text-align: center; font: 20px Arial;font-style: italic;

center-текст по центру, можно вставить right (справа), left (слева) или удалить строку с кода.

font-style: italic; текст курсив, наклонный (italic), нормальный текст (вставьте normal).Что касается жирного текста, напишите, Вы рамку используете на странице сообщений или в гаджете? Я проверила гаджетом для проверки, текст не жирный.

Ув. читатели! Для вставки HTML кода в комментарии, воспользуйтесь Генератором HTML кода

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *