Kuidas lisada topeltäärist erinevate värvidega?
Mis tahes kujundile topeltäärise lisamiseks CSS-i abil, : enne ” valija on kuulus. See muudab mõlema äärise värve, et muuta need ainulaadseks. Allpool toodud samm-sammuline protseduur erinevate värvidega topeltäärise lisamiseks:
1. samm: lisage Div Element ja määrake klassid
Lisage HTML-faili element div märgendi
sisse ja määrake ' klass ' nimega ' topeltpiir ”. Kasutajad saavad luua ka oma klassi nime:< div klass = 'topeltpiir' >
< / div >
2. samm: looge stiilisilt
Selles etapis looge osa klassile ' topeltpiir ' ja tehke sellest üks koopia koos ' : enne ” valija. Sel viisil rakendatakse meie klassidele CSS-i atribuute:
< stiilis >
.double- piir {
}
.double- piir : enne {
}
< / stiilis >
3. samm: lisage klassi stiilid
CSS-i atribuudid kehtivad div elemendile, mille klass on ' topeltpiir ”. Allpool on mainitud järgmisi stiile:
.double- piir {
taust- värvi : #ccc;
piir : 4px ühevärviline roheline;
polsterdus: 50 pikslit;
laius : 16 pikslit;
kõrgus : 16 pikslit;
asend: suhteline;
marginaal: 0 auto;
}
CSS-i atribuutide kirjeldus on toodud allpool:
- Esmalt lisage ' taustavärv ', mis on hall ja ' piir 4 pikslit kaaluga ja rohelise värviga.
- ' polsterdus ” 50 pikslit, et luua igast küljest 50 piksli suurune siseruum.
- Lõpuks ' laius ” ja „ kõrgus” 16 pikslit. Samuti ' marginaal ” on 0 auto, mis tähendab, et ülemine ja alumine veeris on null ja vasakpoolne.
Veebileht näeb välja selline:
Väljund näitab, et ääris on rakendatud 'div'.
4. samm: CSS-i valija lisamine
Nüüd liikuge stiilisildis teise kasti poole, millel on ' : enne ” valija on lisatud ja kirjutage allolev kood:
.double- piir : enne {taustal : puudub;
piir : 4px ühevärviline sinine;
sisu : '' ;
positsioon: absoluutne;
ülemine: 4 pikslit;
vasakul: 4px;
paremal: 4 pikslit;
alumine: 4 pikslit;
}
Omadusi selgitatakse allpool:
- Kasuta ' positsiooni ” omadus elemendi asukoha fikseerimiseks.
- Pärast seda ' üleval, vasakul, paremal ja all ” määrab vastloodud üksuse veerise algsest.
- CSS-i valija nimega ': enne ” lisab sisu valitud elemendi ette.
Väljund näeb välja selline:
Nii saab erinevate värvide abil lisada topeltäärise.
Järeldus
Topeltäärise lisamiseks looge esmalt element div ja määrake see klassile. Seejärel lisage CSS ' positsiooni ” atribuut, mis tuleb määrata suhteliseks. Seejärel lisage sellele CSS-i valija ':befor', et kasutajad saaksid enne valitud elementi sisu lisada. See juhend on näidanud erinevate värvidega topeltääriste kasutamist.