Как сделать рамку на сайте?

Рамки, располагающиеся вокруг картинок или текста, украшают сайт и вносят разнообразие в его оформление. Если для создания окантовок использовать таблицы, то код каждой рамки будет занимать слишком много места. Также в этом случае для каждого обрамления придется прописывать HTML-код заново. С помощью CSS можно легко сделать рамку любой толщины и нужного цвета, один раз прописав несложный код для всех элементов, которые будут окружены этой рамкой. Такая технология позволит при необходимости за пару минут поменять вид рамок на сайте.
Создать сайт самостоятельно с Wix.com

Вам понадобится

• - иметь собственный сайт;
• - знать, что такое CSS и где эти стили прописываются на сайте.

Инструкция

Чтобы создать рамку, сначала напишите в CSS такой код:

ramka {}

Для того, чтобы рамка была нужного размера, используйте параметр border-width, который назначает линии ширину в пикселях. Например, если линия рамки должна быть шириной в 3 пикселя, то запись будет выглядеть так:

ramka {border-width: 3px;}

Теперь определите стиль рамки с помощью параметра border-style. Если вы хотите создать рамку, сторонами которой являются обычные сплошные линии, то поместите в код между фигурными скобками такую запись - border-style: solid.

Обрамление, состоящее из точек можно получить, записав так: border-style: dotted. Отметив border-style: dashed, вы получите пунктирную рамку.

Сделать окантовку двойной сплошной линией можно так: border-style: double. Для оформления текста или картинок в рамки с эффектом объемных сторон напишите border-style: groove или border-style: ridge. Разница между этими двумя вариантами состоит в том, что в первом случае рамка состоит из вдавленных линий, а во втором - из выпуклых.

Для создания эффекта вдавленного вместе с рамкой элемента сайта используйте этот код: border-style: inset. Чтобы сделать содержимое рамки вместе с обрамлением наоборот выпуклым, напишите border-style: outset.

Придать нужный цвет рамке можно при помощи параметра border-color, помещенного также между фигурных скобок. Если вы хотите сделать рамку красной, то напишите border-color: red, синей - border-color: blue, оранжевой - border-color: orange.

Код рамки в CSS, включающий все параметры, выглядит так:

ramka {border-width: 3px; border-style: solid; border-color: blue;}

Теперь в HTML сделайте такую запись:

Содержимое рамки Вместо словосочетания «Содержимое рамки» вставьте текст или код нужной картинки.

Таким образом можно оформлять неограниченное количество элементов на сайте. Для изменения вида рамки нужно внести изменения только в код CSS.

Оцените статью!