Рамки, поставени около снимки или текст, украсяват сайта и внасят разнообразие в дизайна му. Ако използвате таблици за създаване на граници, тогава кодът за всяка граница ще заема твърде много място. Също така, в този случай ще трябва да пренапишете HTML кода за всеки кадър. С CSS можете лесно да създадете граница с всякаква дебелина и цвят, които искате, като напишете прост код веднъж за всички елементи, които ще бъдат заобиколени от тази граница. Тази технология ще позволи, ако е необходимо, да променя вида на кадрите на сайта за няколко минути.
Необходимо е
- - да имате собствен уебсайт;
- - да знаете какво е CSS и къде са написани тези стилове на сайта.
Инструкции
Етап 1
За да създадете граница, първо напишете следния код в CSS:
рамка {}
Стъпка 2
За да направите границата желания размер, използвайте параметъра border-width, който задава ширината на линията в пиксели. Например, ако линията на кадъра трябва да е широка 3 пиксела, тогава записът ще изглежда така:
ramka {широчина на границата: 3px;}
Стъпка 3
Сега дефинирайте стила на границата, като използвате параметъра граничен стил. Ако искате да създадете граница, чиито страни са правилни плътни линии, тогава поставете следния запис в кода между къдравите скоби - border-style: solid.
Стъпка 4
Пунктирана граница може да се получи, като се напише така: border-style: dotted. Проверка на граничен стил: пунктирана ще ви даде пунктирана граница.
Стъпка 5
Можете да направите контура двойна плътна линия по следния начин: border-style: double. Използвайте граничен стил: жлеб или граничен стил: гребен за рамкиране на текст или изображения в рамки с 3D странични ефекти. Разликата между тези две опции е, че в първия случай рамката се състои от отстъпени линии, а във втория - изпъкнали.
Стъпка 6
Използвайте този код: border-style: inset, за да създадете ефекта на вмъкване с границата на елемент на сайта. За да направите съдържанието на границата, заедно с границата, напротив, изпъкнало, напишете border-style: outset.
Стъпка 7
Можете да добавите желания цвят към рамката, като използвате параметъра border-color, също поставен между фигурните скоби. Ако искате да направите границата червена, напишете border-color: червен, син - border-color: син, оранжев - border-color: оранжев.
Стъпка 8
Кодът на границата на CSS, включително всички опции, изглежда така:
ramka {широчина на границата: 3px; граничен стил: плътен; цвят на границата: син;}
Стъпка 9
Сега, в HTML, напишете това:
Съдържание на рамката Вместо фразата „Съдържание на рамката“, вмъкнете текста или кода на желаната снимка.
Стъпка 10
По този начин можете да проектирате неограничен брой елементи на сайта. За да промените външния вид на рамката, трябва само да промените CSS кода.
