Как добавить вокруг текста рамку определенного цвета - «Текст» » Новости мира Интернет
WhatsApp переизобрёл голосовую почту — и получил другие нововведения с последним крупным обновлением - «Новости сети»
WhatsApp переизобрёл голосовую почту — и получил другие нововведения с последним крупным обновлением - «Новости сети»
«Рождество наступило раньше времени»: создатели второго сезона сериала «Фоллаут» обрадовали фанатов переносом премьеры - «Новости сети»
«Рождество наступило раньше времени»: создатели второго сезона сериала «Фоллаут» обрадовали фанатов переносом премьеры - «Новости сети»
Продажи Hollow Knight: Silksong превысили 7 миллионов копий — анонсировано большое бесплатное дополнение Sea of Sorrow - «Новости сети»
Продажи Hollow Knight: Silksong превысили 7 миллионов копий — анонсировано большое бесплатное дополнение Sea of Sorrow - «Новости сети»
Британия предлагает встроить цензуру прямо в iOS и Android — доступ к обнажёнке только после проверки возраста - «Новости сети»
Британия предлагает встроить цензуру прямо в iOS и Android — доступ к обнажёнке только после проверки возраста - «Новости сети»
$3 млрд за лояльность: как Tesla превратила совет директоров в группу поддержки Илона Маска - «Новости сети»
$3 млрд за лояльность: как Tesla превратила совет директоров в группу поддержки Илона Маска - «Новости сети»
Escape from Tarkov вошла в Зал Славы видеоигровой индустрии России - «Новости сети»
Escape from Tarkov вошла в Зал Славы видеоигровой индустрии России - «Новости сети»
В этот день 15 лет назад перестал выходить на связь создатель биткоина Сатоши Накамото - «Новости сети»
В этот день 15 лет назад перестал выходить на связь создатель биткоина Сатоши Накамото - «Новости сети»
Впервые учёные наблюдали настоящую алхимию — солнечный нейтрино превратил изотоп углерода в азот - «Новости сети»
Впервые учёные наблюдали настоящую алхимию — солнечный нейтрино превратил изотоп углерода в азот - «Новости сети»
Замена трёхстворчатого дисплея у Samsung Galaxy Z TriFold обойдётся дороже новенького Galaxy S25 Ultra - «Новости сети»
Замена трёхстворчатого дисплея у Samsung Galaxy Z TriFold обойдётся дороже новенького Galaxy S25 Ultra - «Новости сети»
Netflix нашла в YouTube оправдание для поглощения Warner Bros — антимонопольщики вряд ли купятся - «Новости сети»
Netflix нашла в YouTube оправдание для поглощения Warner Bros — антимонопольщики вряд ли купятся - «Новости сети»
Новости мира Интернет » Самоучитель CSS » Текст » Как добавить вокруг текста рамку определенного цвета - «Текст»

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

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

Применение свойства 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>
Цитирование статьи, картинки - фото скриншот - Rambler News Service.
Иллюстрация к статье - Яндекс. Картинки.
Есть вопросы. Напишите нам.
Общие правила  поведения на сайте.

Для создания рамки вокруг текста используйте стилевое свойство border, добавляя его к соответствующему селектору. Например, если для текста применяется тег , то для него надо установить следующий стиль. Применение свойства border к текстовому абзацу продемонстрировано в примере.;1. Пример 1. Рамка вокруг абзаца HTML5 CSS 2.1 IE Cr Op Sa Fx Результат данного примера показан на рис;1. .; Рис. 1. Вид рамки вокруг абзаца Следует учитывать, что в тексте может быть несколько абзацев и вокруг каждого тогда возникнет рамка. В подобных случаях лучше воспользоваться тегом , для которого и требуется установить стиль. А текст добавить уже внутрь этого контейнера (пример.;2). Пример 2. Рамка вокруг слоя HTML5 CSS 2.1 IE Cr Op Sa Fx

Смотрите также

А что там на главной? )))



Комментарии )))