Okviri postavljeni oko slika ili teksta ukrašavaju stranicu i unose raznolikost u njen dizajn. Ako za izradu granica koristite tablice, tada će kod za svaku granicu zauzeti previše prostora. Također, u ovom slučaju, morat ćete prepisati HTML kôd za svaki okvir. Pomoću CSS-a možete jednostavno stvoriti obrub bilo koje debljine i boje koju želite tako što ćete jednom napisati jednostavan kod za sve elemente koji će biti okruženi ovom ivicom. Ova tehnologija omogućit će, ako je potrebno, za nekoliko minuta promijeniti vrstu okvira na web mjestu.
Neophodno je
- - imati svoju web stranicu;
- - znati šta je CSS i gdje su ti stilovi napisani na web lokaciji.
Instrukcije
Korak 1
Da biste kreirali obrub, prvo napišite sljedeći kod u CSS:
ramka {}
Korak 2
Da biste granicu učinili željenom veličinom, upotrijebite parametar border-width koji postavlja širinu crte u pikselima. Na primjer, ako bi linija okvira trebala biti široka 3 piksela, tada će unos izgledati ovako:
ramka {border-width: 3px;}
Korak 3
Sada definirajte stil obruba pomoću parametra obruba. Ako želite stvoriti obrub čije su stranice redovite pune crte, tada u kod stavite sljedeći unos između kovrčavih zagrada - obrub: solid.
Korak 4
Točkasti obrub može se dobiti tako da se napiše ovako: border-style: dotted. Provjera u obliku obruba: isprekidana dobit ćete isprekidanu obrubu.
Korak 5
Možete napraviti obrub dvostrukom punom linijom poput ove: border-style: double. Koristite stil obruba: žljeb ili stil obruba: greben za uokvirivanje teksta ili slika u okvire sa 3D neželjenim efektima. Razlika između ove dvije opcije je u tome što se u prvom slučaju okvir sastoji od uvučenih linija, au drugom konveksnih.
Korak 6
Upotrijebite ovaj kod: border-style: inset da biste stvorili efekt umetnutog dijela s obrubom elementa web lokacije. Da bi sadržaj obruba, zajedno s obrubom, bio naprotiv konveksan, napišite obrub: outset.
Korak 7
Okviru možete dodati željenu boju pomoću parametra boja obruba, koji se takođe nalazi između kovrčavih zagrada. Ako želite obrub učiniti crvenim, napišite obrub: crvena, plava - obrub: plava, narančasta - obrub: narančasta.
Korak 8
CSS kôd granice, uključujući sve opcije, izgleda ovako:
ramka {širina obruba: 3px; obrub: čvrst; boja obruba: plava;}
Korak 9
Sada u HTML napišite ovo:
Sadržaj okvira Umjesto fraze "Sadržaj okvira", umetnite tekst ili kod željene slike.
Korak 10
Dakle, možete dizajnirati neograničen broj elemenata na web lokaciji. Da biste promijenili izgled okvira, trebate samo promijeniti CSS kod.
