Онлайн журнал для всех — дофоллоу блог девушки

В процессе оформления своего сайта админы ставят текст в рамку в разные цвета и забывают код, как заключить цветную рамку вокруг текста. Согласитесь, память этот такая вещь, что порой забываешь любые коды в html и php!

На первом этапе рамку можно сделать для каждого html элемента (текст или рисунок) в независимости, неважно что за теги: <h1>, <p>, <img>, <span> и т.д.

В свою очередь существует разница между рамками встраиваемых и блочных элементов.

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

Блочные рамки формируются во всю ширину блока, что провоцирует потребность задания команд связанных с ограничением ширины.

Для начала ВОТ НИЖЕ КАК БУДЕТ ВЫГЛЯДЕТЬ пример:

ВАШ ТЕКСТ ИЛИ РИСУНОК

 Для реализации такой рамки необходимо обратиться к тегу <p> и заключить между ним ниже опубликованный код.

Код:

<p style=»border: 3px solid #C1FF0A; background-color: #d5d5d1; padding: 10px;»>ВАШ ТЕКСТ ИЛИ РИСУНОК</p>

1. border – свойство, отвечающее за отображение рамки. Для упрощения поставленной задачи я не стал по отдельности прописывать каждое свойство — border-width (толщина границ рамки), border-color (цвет рамки html). А вместо этого немного сократил html код, прописав все свойства после двоеточия.

Для изменения внешнего вида рамки достаточно изменить значение solid. Существуют следующие границы рамок:

— ridge – рельефная.

— dotted – точечная.

— double – двойная.

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

— solid – сплошная.

2. padding – свойство, отвечающее за расстояние между рамкой и объектом, заключенным в нее.

При желании можно еще немного побаловаться со стилями добавив к числу команд заключенных между открывающимся и закрывающимся тегом <p> свойство margin. Таким способом можно осуществить отступы элементов, которые находятся снаружи рамки.

Чтобы изменить задний фон достаточно прописать свойство background-color, указав после двоеточия код желанного цвета.

Рамка вокруг картинки html делается тем же самым способом, поэтому у вас с этим не должно возникнуть проблем. Единственное что нужно знать новичку, это то, что для ее отображения свойства необходимо прописать в одиночном теге <img>.