Как вставить текст в рамку

Атрибут border — задает толщину рамки вокруг элемента в пикселях
 

border-style: none; — запрещает рисование границы (значение по умолчанию);
border-style: dotted; — рисует точечную линию;
border-style: dashed; — рисует штриховую линию;
border-style: solid; — рисует сплошную линию;
border-style: double; — рисует двойную сплошную линию;
border-style: groove; — рисует трехмерную вдавленную границу;
border-style: ridge; — рисует трехмерную выпуклую границу;
border-style: inset; — рисует трехмерную «ступеньку вверх»;
border-style: outset; — рисует трехмерную «ступеньку вниз».

Сначала вам может показаться это абракадаброй, но если
вы внимательно рассмотрите из чего состоит каждая запись
потренируетесь, создавая новую запись без публикации, у вас все
получится.

1 ВАРИАНТ — Рамка с заголовком («легендой»):

код: <fieldset><legend>ТЕКСТ ЗАГОЛОВКА</legend>ТЕКСТ В РАМКЕ</fieldset>

ТЕКСТ ЗАГОЛОВКА

ТЕКСТ В РАМКЕ

Пример. Вместо фразы «текст заголовка» подставили «пословица», вместо «текст в рамке» — «Баснями сыт не будешь».

<fieldset><legend>ПОСЛОВИЦА</legend>Баснями сыт не будешь</fieldset>

ПОСЛОВИЦА

Баснями сыт не будешь

Заголовок по умолчанию находится слева, но ему можно задать разные параметры выравнивания, пример см ↑↑

Задаем «по центру»: <fieldset><legend align=»center»>ТЕКСТ ЗАГОЛОВКА</legend>ТЕКСТ В РАМКЕ</fieldset>

ТЕКСТ ЗАГОЛОВКА

ТЕКСТ В РАМКЕ

Если мы в коде заменим всего одно значение center на right , то наш заголовок будет справа.

<fieldset><legend align=»right»>ТЕКСТ ЗАГОЛОВКА</legend>ТЕКСТ В РАМКЕ</fieldset>

 

ТЕКСТ ЗАГОЛОВКА

ТЕКСТ В РАМКЕ

2 ВАРИАНТ —
код: <blockquote style=»border:1px #CD5C5C solid; padding: 10px; margin:0px 0px 0px 0px;»>Баснями сыт не будешь</blockquote>
Где значение #CD5C5C обозначает цвет рамки берется из специальной таблицы

Баснями сыт не будешь

 

Заменяем #CD5C5C на значение #FFD700 и вот результат

Баснями сыт не будешь

 

Хочется вас предупредить, что в коде каждый штрих, точка, кавычка имеют значение. При копировании кода, его изменении, будьте внимательны.

Источник

 

Серия сообщений "Все для дневника на Ли.Ру":
Часть 1 - Фотошоп в дневнике
Часть 2 - Для дневника на Ли.Ру Как сделать баннер-картинку для блога.
...
Часть 18 - Для дневника на Ли.Ру Картинки "Спасибо"
Часть 19 - Для дневника на Ли.Ру Спецсимволы HTML
Часть 20 - Для дневника на Ли.Ру Как вставить текст в рамку
Часть 21 - Как скачать видео с ютьюба
Часть 22 - Для дневника на Ли.Ру Смайлики
...
Часть 27 - Поисковик Гугл
Часть 28 - Кнопочки перехода под кат "Далее" + код. [120 шт.]
Часть 29 - Сохранение дневника LiveInternet на компьютер с картинками