Okviri postavljeni oko slika ili teksta ukrašavaju web mjesto i unose raznolikost u njegov dizajn. Ako za izradu granica koristite tablice, tada će kôd svake granice zauzeti previše prostora. Također, u ovom ćete slučaju morati prepisati HTML kôd za svaki okvir. Pomoću CSS-a možete jednostavno stvoriti obrub bilo koje debljine i boje koju želite tako da jednom napišete jednostavan kod za sve elemente koji će biti okruženi tom obrubom. Ova tehnologija omogućit će, ako je potrebno, za nekoliko minuta promijeniti vrstu okvira na web mjestu.
Nužno je
- - imati svoju web stranicu;
- - znati što je CSS i gdje su ti stilovi napisani na web mjestu.
Upute
Korak 1
Da biste stvorili obrub, prvo u CSS napišite sljedeći kod:
ramka {}
Korak 2
Da biste obrub učinili željenom veličinom, upotrijebite parametar width-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;}
3. korak
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.
4. korak
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 crtom poput ove: border-style: double. Upotrijebite obrub: žljeb ili obrub: greben za uokvirivanje teksta ili slika u okvire s 3D nuspojavama. Razlika između ove dvije mogućnosti je u tome što se u prvom slučaju okvir sastoji od uvučenih linija, a u drugom konveksnih.
Korak 6
Upotrijebite ovaj kod: border-style: inset da biste stvorili efekt umetnutog dijela s obrubom elementa web stranice. 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 border-color, koji se također 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 granični kod, 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 mjestu. Da biste promijenili izgled okvira, trebate samo promijeniti CSS kôd.
