Вам понадобится
- - иметь собственный сайт;
- - знать, что такое CSS и где эти стили прописываются на сайте.
Инструкция
1
Чтобы создать рамку, сначала напишите в CSS такой код:
ramka {}
ramka {}
2
Для того, чтобы рамка была нужного размера, используйте параметр border-width, который назначает линии ширину в пикселях. Например, если линия рамки должна быть шириной в 3 пикселя, то запись будет выглядеть так:
ramka {border-width: 3px;}
ramka {border-width: 3px;}
3
Теперь определите стиль рамки с помощью параметра border-style. Если вы хотите создать рамку, сторонами которой являются обычные сплошные линии, то поместите в код между фигурными скобками такую запись - border-style: solid.
4
Обрамление, состоящее из точек можно получить, записав так: border-style: dotted. Отметив border-style: dashed, вы получите пунктирную рамку.
5
Сделать окантовку двойной сплошной линией можно так: border-style: double. Для оформления текста или картинок в рамки с эффектом объемных сторон напишите border-style: groove или border-style: ridge. Разница между этими двумя вариантами состоит в том, что в первом случае рамка состоит из вдавленных линий, а во втором - из выпуклых.
6
Для создания эффекта вдавленного вместе с рамкой элемента сайта используйте этот код: border-style: inset. Чтобы сделать содержимое рамки вместе с обрамлением наоборот выпуклым, напишите border-style: outset.
7
Придать нужный цвет рамке можно при помощи параметра border-color, помещенного также между фигурных скобок. Если вы хотите сделать рамку красной, то напишите border-color: red, синей - border-color: blue, оранжевой - border-color: orange.
8
Код рамки в CSS, включающий все параметры, выглядит так:
ramka {border-width: 3px; border-style: solid; border-color: blue;}
ramka {border-width: 3px; border-style: solid; border-color: blue;}
9
Теперь в HTML сделайте такую запись:
<div id="ramka">Содержимое рамки</div>Вместо словосочетания «Содержимое рамки» вставьте текст или код нужной картинки.
<div id="ramka">Содержимое рамки</div>Вместо словосочетания «Содержимое рамки» вставьте текст или код нужной картинки.
10
Таким образом можно оформлять неограниченное количество элементов на сайте. Для изменения вида рамки нужно внести изменения только в код CSS.