Создайте цветную рамку вокруг текста с помощью HTML и CSS

Обновлено: 13.11.2008 от Computer Hope Обновлено: 13

Граница на ваших HTML-страницах может помочь привлечь внимание к фрагменту текста или окружить любой другой элемент HTML.

Как видно ниже, вокруг любого текста можно создать рамку, используя HTML а также CSS на вашей веб-странице. В приведенном ниже примере мы окружили абзац (<p> </ p>) красной рамкой.

Первый пример с текстом, обведенным красной рамкой.
Этот пример также имеет несколько строк.

Для создания приведенного выше примера использовался приведенный ниже код.

<p style = "border: 3px; border-style: solid; border-color: # FF0000; padding: 1em;"> Первый пример с текстом, обведенным красной рамкой. <br> В этом примере также есть несколько строк. </ р>

В приведенном выше коде стиль определяет размер границы (сокращение от px до пиксель ), тип стиля и цвет границы. Стиль границы - то, как граница появляется на экране. Другие типы стилей границ включают пунктирную, пунктирную, двойную, канавку, гребень, вставку и выход. Цвет границы определяет цвет, который вы хотите использовать для границы. В приведенном выше примере цветовой код # FF0000 был использован, который является цветовой код для красного.

Внешний вид элементов на веб-странице также может быть определен с в соответствии CSS. Встроенный CSS определяется в вашем HTML-документе, в <HEAD> </ HEAD> элемент. Или вы можете определить CSS во внешнем файле с расширением .css . Затем вы можете ссылаться на этот файл из любого HTML-документа, и элементы в этом документе имеют доступ к стилям CSS. Например, с помощью приведенного ниже кода CSS создается новый класс под названием «borderexample», который можно применять к любому другому тегу HTML.

<style> .borderexample {border-style: solid; границы цвета: # 287EC7; } </ style>

Используя приведенный выше код, если вы хотите применить этот стиль рамки к абзацу HTML, вы можете напечатать нечто похожее на приведенный ниже пример.

<p class = "borderexample"> Вот пример границы, созданной с помощью CSS </ p>