Како додати двоструку ивицу различитим бојама?
Да бисте додали двоструку ивицу на било који облик користећи ЦСС, „ :пре него што ” селектор је познат. Мења боје обе ивице како би биле јединствене. Процедура корак по корак наведена у наставку за додавање двоструке ивице са различитим бојама:
Корак 1: Додајте Див елемент и доделите класе
У ХТМЛ датотеци додајте елемент див унутар ознаке <боди> и доделите „ класа “ са именом “ двомеђе ”. Корисници такође могу креирати своје име класе:
< див класа = 'двомеђе' >
< / див >
Корак 2: Креирајте ознаку стила
У овом кораку креирајте део за класу „ двомеђе ” и направите једну копију са „ :пре него што ” селектор. На овај начин ће се ЦСС својства применити на наше класе:
< стил >
.доубле- граница {
}
.доубле- граница :пре него што {
}
< / стил >
Корак 3: Додајте стилове у класу
ЦСС својства се примењују на елемент див који има класу „ двомеђе ”. Следећи стилови су наведени у наставку:
.доубле- граница {
позадина- боја : #ццц;
граница : 4пк пуна зелена;
паддинг: 50пк;
ширина : 16пк;
висина : 16пк;
положај: релативан;
маргина: 0 ауто;
}
Опис ЦСС својстава је дат у наставку:
- Прво додајте „ боја позадине ” који је сив и „ граница ” тежине 4пк и зелене боје.
- „ паддинг ” од 50пк да бисте направили унутрашњи простор од 50пк са свих страна.
- На крају, „ ширина ' и ' висина” од 16пк. Такође, „ маргина ” је 0 ауто, што значи да ће горња и доња маргина бити нула и лева.
Веб страница изгледа овако:
Излаз приказује да је ивица примењена на „див“.
Корак 4: Додавање ЦСС селектора
Сада се померите према другом пољу у ознаци стила који има „ :пре него што ” приложен селектор и напишите код испод:
.доубле- граница :пре него што {позадини : ниједан;
граница : 4пк пуна плава;
садржаја : '' ;
позиција: апсолутна;
врх: 4пк;
лево: 4пк;
десно: 4пк;
боттом: 4пк;
}
Својства су објашњена у наставку:
- Користити ' положај ” да би положај елемента био фиксни.
- Након тога, „ горе, лево, десно и доле ” дефинише маргину новонастале ставке у односу на оригиналну.
- ЦСС селектор под називом „: пре него што ” додаје садржај испред изабраног елемента.
Излаз изгледа овако:
Тако се може додати двоструки оквир користећи различите боје.
Закључак
Да бисте додали двоструку ивицу, прво креирајте див елемент и доделите га класи. Затим додајте ЦСС “ положај ” својство које мора бити постављено на релативно. Након тога, додајте ЦСС селектор „:бефоре“ у њега како би корисници могли да додају садржај пре изабраног елемента. Овај водич је показао употребу двоструких ивица са различитим бојама.