Закрыть ... [X]

Как сделать рамку в html

сделать как сделать рамку в html Здравствуйте уважаемые начинающие веб мастера.

Рамка является одним из самых популярных вариантов оформления контента, и в этой статье мы подробно рассмотрим, как создаются простые рамки средствами html.

Более продвинутым советую сразу перейти в Рамки средствами CSS.

При помощи CSS их можно сделать гораздо красивее. Ну, а с начинающими продолжим.

Рамку можно создать для любого html элемента, будь то <p>, <h1>, <img>, <span>, <blockquote>, <marquee> и так далее.

Разница между рамками блочных и встраиваемых элементов состоит в том, что у блочных рамка образуется на всю ширину блока, и её нужно ограничивать, задавая ширину.

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

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

Применять их рекомендуется только для отладки внешнего вида,поэтому, после отладки, все значения атрибута style, лучше будет перенести в файл style.css шаблона.

Хотя встроенные стили прекрасно работают и проходят валидацию.

Так как руководство это практическое, то перейдём непосредственно к примерам. Для примера возьмём тег <p> и создадим ему простую рамку.

<p style="border:3px #00B344 solid; width:160px;"> текст текст текст текст</p>


можно изменить внешний вид рамки, для этого меняется значение «solid»

рамки бывают следующих видов:

dotted — точечная

dashed — пунктирная

solid — сплошная 36

double — двойная

ridge —  рельефная

ширина рамки меняется изменением цифр в свойстве «width», а текст внутри можно подравнять добавив свойство «padding»

<p style="border:3px #00B344 ridge; width: 160px; padding: 5px 0 5px 15px;" > текст текст текст текст</p>

можно задать отступ от предметов находящихся снаружи рамки, для этого добавим свойство «margin»

<p style="border:3px #00B344 ridge; width: 160px; padding: 5px 0 5px 15px; margin:20px 0 0 20px;" > текст текст текст текст</p>

где первая цифра — отступ сверху, вторая — отступ справа, третья — отступ снизу, четвёртая — отступ слева.

можно внутри рамки сделать фоновый цвет

<p style="background-color: #F4FC03; border:3px #00B344 ridge; width: 140px; padding: 5px 0 5px 15px; margin:20px 0 0 20px;" > текст текст текст текст</p>

Можно вместе с текстом  в рамку вставить картинку.

<p style="background-color: #F4FC03; border:3px #00B344 ridge; width: 240px; height:100px; padding: 5px 0 5px 15px; margin:20px 0 0 20px;"> <img src="images/i6.jpg"><br>Текст текст текст текст текст</p>

РамкиТекст текст текст

 
А если задать ширину рамки ridge пикселей в 15-20, то есть в свойстве border вместо 3px задать 15px, то получится багет.

РамкиТекст текст текст

 

О способах создания рамок средствами CSS, можно прочитать в статьях Как сделать тень для блока, да-да, используя тени, можно создавать очень красивые рамки, и Рамки CSS

Желаю творческих успехов.

Неужели не осталось вопросов? Спросить

Короткий отдых
Перемена

\
Вовочка папе: — Папа, а тебя била когда нибудь твоя мама?
— Нет, только твоя…

Прямая линия HTML < < < В раздел > > > Кнопка HTML.


Источник: https://starper55plys.ru/html/ramki-html/


Как сделать рамку в html вокруг текста


Как сделать рамку в html

Похожие новости


Как сделать красители для бомбочек
Как сделать угол у окна
Сделать блесну для щуки свои руками
Как подтянуть ягодицы в домашних условиях девушке
Комп самостоятельно
Как удалить монтажную пену с рук в домашних условиях
Как сделать чтобы учится на одни 5




ШОКИРУЮЩИЕ НОВОСТИ