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

Рамка на HTML-страницах, созданная при помощи border color, помогает привлечь внимание к тексту или выделить любой элемент HTML.

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

Создание цветной рамки вокруг текста при помощи HTML и CSS Чтобы создать приведенный выше эффект, использовался следующий код:

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

В данном коде стиль определяет размер границы(px — пиксели), тип стиля и цвет границы(border color CSS). Стиль границы — это то, как на экране выводится рамка. Иные типы стилей границ — dotted, dashed, double, groove, ridge, inset и outset. Окраску границы определяет цвет, который будет использован для нее. В приведенном выше примере использовался красный цвет(#FF0000).

Определение стиля при помощи CSS

Стиль того, как элемент выводится на веб-странице, также можно без проблем через CSS-код, помещенный в раздел <head> </ head> HTML-страницы или внешнего файла CSS. К примеру, в приведенном ниже примере создается новый класс «borderexample», который может быть применен к любому HTML- тегу:

<style>.borderexample{border-style:solid;border-color:#287EC7;}</style>

Используя приведенный выше программный код, можно создать для элемента рамку при помощи внешних стилей CSS, которая аналогична предыдущему примеру с использованием HTML border color:

<p class="borderexample">Here is an example of a border created using CSS</p>

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

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