Okvirji, nameščeni okoli slik ali besedila, okrasijo spletno mesto in popestrijo njegovo zasnovo. Če za ustvarjanje mej uporabljate tabele, bo koda za vsako obrobo zavzela preveč prostora. V tem primeru boste morali napisati kodo HTML za vsak okvir. S CSS lahko enostavno ustvarite obrobo poljubne debeline in barve, tako da enkrat napišete preprosto kodo za vse elemente, ki bodo obkroženi s to obrobo. Ta tehnologija bo po potrebi omogočila, da v nekaj minutah spremeni vrsto okvirjev na spletnem mestu.
Potrebno je
- - imeti svojo spletno stran;
- - vedeti, kaj je CSS in kje so ti slogi zapisani na spletnem mestu.
Navodila
Korak 1
Če želite ustvariti obrobo, najprej v CSS napišite naslednjo kodo:
ramka {}
2. korak
Če želite obrobo prilagoditi želeni velikosti, uporabite parameter border-width, ki nastavi širino črte v slikovnih pikah. Če naj bo na primer črta okvirja široka 3 slikovne pike, bo vnos videti tako:
ramka {border-width: 3px;}
3. korak
Zdaj določite slog obrobe s parametrom style-border. Če želite ustvariti obrobo, katere stranice so pravilne polne črte, v kodo med kodraste oklepaje - border-style vstavite naslednji vnos: solid.
4. korak
Pikčasto obrobo lahko dobite tako, da jo zapišete takole: border-style: pikčasto. Preverjanje sloga obrobe: črtkana vam bo dala črtkano obrobo.
5. korak
Mejo lahko naredite dvojno polno črto, kot je ta: border-style: double. Uporabite slog obrobe: utor ali slog obrobe: greben, da besedilo ali slike uokvirite v okvirje s 3D stranskimi učinki. Razlika med tema dvema možnostma je v tem, da je v prvem primeru okvir sestavljen iz zamikanih črt, v drugem pa izbočenih.
6. korak
Uporabite to kodo: border-style: inset, da ustvarite učinek vstavka z obrobo elementa spletnega mesta. Če želite, da je vsebina obrobe skupaj z obrobo, nasprotno, izbočena, napišite border-style: outset.
7. korak
Okviru lahko dodate želeno barvo s pomočjo parametra barva obrobe, ki je prav tako nameščen med zavitimi oklepaji. Če želite obrobo narediti rdečo, napišite obrobo-barva: rdeča, modra - obroba-barva: modra, oranžna - obroba-barva: oranžna.
8. korak
Koda meje CSS, vključno z vsemi možnostmi, je videti takole:
ramka {border-width: 3px; obroba: trdna; barva obrobe: modra;}
9. korak
Zdaj v HTML zapišite to:
Vsebina okvirja Namesto besedne zveze "Vsebina okvirja" vstavite besedilo ali kodo želene slike.
10. korak
Tako lahko na spletnem mestu oblikujete neomejeno število elementov. Če želite spremeniti videz okvira, morate spremeniti samo kodo CSS.
