Информационные технологииStfw.Ru 🔍

Как добавить вокруг текста рамку определенного цвета?

Для создания рамки вокруг текста используйте стилевой атрибут border, добавляя его к соответствующему селектору.
🕛 22.01.2009, 23:52
Например, если для текста применяется тег <P>, то для него надо установить следующий стиль.

P { border: 1px solid red; /* Толщина рамки в пикселах, тип границы (в данном случае сплошная линия) и цвет линии */ padding: 5px; /* Расстояние от текста до рамки */
}
Применение атрибута border к текстовому абзацу продемонстрировано в примере 1.
Пример 1. Рамка вокруг абзаца

HTML 4.01CSS 2.1IE 6IE 7Op 9.5Sa 3.1Ff 3.0

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>Рамка вокруг текста</title> <style type="text/css"> P { border: 1px solid red; padding: 10px; } </style> </head> <body> <p>Нет страшнее зверя в сибирских лесах, чем разъяренный заяц-мутант. Вы видели, какие у него зубы? О, даже медведь боится этих зубов! А, как известно, медведи больше ничего не боятся.</p> </body>
</html>

Следует учитывать, что в тексте может быть несколько абзацев и вокруг каждого тогда возникнет рамка. В подобных случаях лучше воспользоваться тегом <DIV>, для которого и требуется установить стиль. А текст добавить уже внутрь этого контейнера (пример 2).

Пример 2. Рамка вокргу слоя

HTML 4.01CSS 2.1IE 6IE 7Op 9.5Sa 3.1Ff 3.0

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>Рамка вокруг текста</title> <style type="text/css"> DIV.outline { border: 1px solid red; padding: 0 10px; } </style> </head> <body> <div class="outline"> <p>Перед тем как убить героя, антагонист обязательно рассказывает ему про все свои злодеяния, чтобы создать необходимую паузу. Разумеется, любой протагонист весьма умело использует данное время против самого злодея.</p> <p>Из этого правила есть только одно исключение. Герой может не суетиться, тянуть время, и вообще ничего не делать, потому что на помощь придут его друзья.</p> </div> </body>
</html>

Все рецепты HTML и CSS   Теги:

Читать IT-новости в Telegram
Информационные технологии
Мы в соцсетях ✉