Как добавить вокруг текста рамку определенного цвета?
Тема:
Текст
Для создания рамки вокруг текста используйте стилевое свойство border, добавляя его к соответствующему селектору. Например, если для текста применяется тег <p>, то для него надо установить следующий стиль.
P {
border: 1px solid red; /* Толщина рамки в пикселах,
тип границы (в данном случае сплошная линия) и
цвет линии */
padding: 5px; /* Расстояние от текста до рамки */
}Применение свойства border к текстовому абзацу продемонстрировано в примере 1.
Пример 1. Рамка вокруг абзаца
HTML5CSS 2.1IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Рамка вокруг текста</title>
<style>
p {
border: 1px solid red;
padding: 10px;
}
</style>
</head>
<body>
<p>Нет страшнее зверя в сибирских лесах, чем разъяренный заяц-мутант.
Вы видели, какие у него зубы? О, даже медведь боится этих зубов! А, как известно,
медведи больше ничего не боятся.</p>
</body>
</html>Результат данного примера показан на рис. 1.
Рис. 1. Вид рамки вокруг абзаца
Следует учитывать, что в тексте может быть несколько абзацев и вокруг каждого тогда возникнет рамка. В подобных случаях лучше воспользоваться тегом <div>, для которого и требуется установить стиль. А текст добавить уже внутрь этого контейнера (пример 2).
Пример 2. Рамка вокруг слоя
HTML5CSS 2.1IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Рамка вокруг текста</title>
<style>
.outline {
border: 1px solid red;
padding: 0 10px;
}
</style>
</head>
<body>
<div class="outline">
<p>Перед тем как убить героя, антагонист обязательно рассказывает ему про все
свои злодеяния, чтобы создать необходимую паузу. Разумеется, любой протагонист
весьма умело использует данное время против самого злодея.</p>
<p>Из этого правила есть только одно исключение. Герой может не суетиться,
тянуть время, и вообще ничего не делать, потому что на помощь придут его
друзья.</p>
</div>
</body>
</html>
