| CSS |
|
Evo mojih vezba iz CSS-a. Nadam se da ce vam bar malo pomoci da shvatite CSS a na vama je, ukoliko zelite, da me kontaktirate i pomognete da ove stranice obogatimo. Naravno morao sam se malo pozabaviti i stilom teksta jer na sta bi licilo da sam samo upload-ovao svoju stranicu sa vazbama. Razumete sve. Da krenom.
HTML je ogranicen utoliko sto ne mozemo temeljnije menjati izgled teksta ili drugih elemenata na web stranici bez obzira i na sve atribute koje mozemo da upotrebimo. Ipak tu nam u pomoc stize CSS (Cascading Style Sheets) koji nam omogucava pravljenje tzv. stilski listova za dodatno uredjenje izgleda elemenata na web stranici. Oni mogu da se primenjuju na celu stranicu, deo stranice, samo jedan kod ili jednu oznaku. Kod stilova je vrlo vazno da znate na koju ce sadrzinu vase stranice biti primenjen stilski list i da to pravilno kazete vasem web browseru. Krenucemo prvo sa tipovima stilskih lista. Postoje dva tipa:
Interni stilski listovi stoje u glavi (HEAD) stranice. Prave se pomocu taga <STYLE> i odnose se, naravno, samo na tu stranicu. Evo pocetka jednog HTML dokumenta:
<html> Normalno, uvek mozete koristiti copy-paste komandu da bi vase stilove iskopirali u head neke druge strane. Ako imate vise strana koje koriste iste stilove, bolje je koristiti drugu vrstu stilskih lista a to su... Eksterne stilske liste je jednostavno napraviti i sa njima povezati sve strane koje ce koristiti isti stil. Kod se ne razlikuje od koda internih listi jedina razlika je sto eksterne liste stoje u posebnom fajlu i kao sto postoji komanda da prikazete sliku na vasoj stranici, tako postoji komanda kojom kazete HTML dokumentu da postoji eksterna stilska lista koju zelita bas na njega da primenite:
<link rel="stylesheet" type="text/css" href="neki vas stil.css"> Ovde srecemo novi tag a to je LINK. On se koristi da poveze eksterni stilski list sa stranicom. Njegov atribut REL ozbacava da se veza odnosi na stilski list. Atribut TYPE odredjuje sadrzaj linka (u ovom slucaju je u pitanju list sa kaskadnim stilom) i na kraju dolazi nama dobro poznat atribut HREF koji identifikuje ime fajla koji sadrzi eksterni stilski list. Kada pravite eksternu listu, napraviti je mozete u Notepadu, potom save as i snimite dokument sa ekstenzijom .css. Vasa eksterna stilska lista je gotova. Eksterne liste ne pisete izmedju <style></style>. Izmedju tih tagova se pisu samo interne liste. Zasto? Za interne liste imamo tag <style> a za eksterne je to tag <link>. Ako bi pokusali da spojima ta dva tipa listi, imali bi dva taga spojena sto nikako nebi funkcionisalo. Ipak jedna stranice moze da ima oba tipa listi. Hajde da pogledamo na koji nacin:
<html> Ovde vidimo primer pocetka jednog dokumenta i na koji nacin ubacujemo oba tipa listi. Prvo smo zatvorili tag </style> pa smo ubacili link za eksternu listu. Koja je prednost eksternih lista ? Zamislite da morate da promenite boju pozadine na 20 stranica vaseg sajta. Zamislite da morate da otvarate svaku u editoru i pisete kod za crnu pozadinu. Sva sreca pa imate .css fajl koje ste snimili i svih 20 strana je linkovano sa njim. Umesto kucanja koda na svih 20 strana, dovoljno je da izvrsite malu promenu u .css fajlu za crnu pozadinu i vas posao je gotov za par sekundi. Verujem da sad vidite prednost eksternih stilskih lista. I internu listu mozete za par sekundi pretvoriti u eksternu tako sto je kopirate u novi dokument Notepad-a i snimite fajl sa ekstenzijom .css. Ne zaboravite, eksterne liste pisete bez taga <style>. Sada kad smo objasnili tipove lista hajde da upoznamo komande kojima mozemo da pravimo te liste. Odmah cemo pozvati u pomoc jedan lak HTML kod:
<body bgcolor="#000000"> - Ovaj kod menja boju pozadine dokumenta u crnu boju. Sada cemo taj isti kod da ponovimo ali u CSS-u: body {background-color: #000000;} - I ovaj kod takodje menja boju pozadine dokumenta u crnu.
Pogledajte razlike i slicnosti izmedju ova dva koda. Hajde da objasnimo ovaj CSS kod:
Sada cemo posebno da objasnimo svaki atribut. Prvo cemo to da uradimo za BACKGROUND:
BACKGROUND-COLOR je atribut koji smo vec pominjali i koji menja pozadinu HTML dokumenta. Medjutim on ne mora da stoji samo sa body tagom. Uzecemo primer za naslove <h#>: NASLOV JE BELE BOJE I NA CRNOJ POZADINI Ovde smo upotrebili velicinu naslova 3. Sada cemo da vidimo kako izgleda CSS kod:
h3 {color: #ffffff; background-color: #000000;}
BACKGROUND-IMAGE. Samo ime vam govori da ovaj atribut ubacuje sliku u pozadinu. Prvo cemo napisati ceo kod:
body {background-image: url(neka slika.ekstenzija);} Malo je drugacije nego ubacivanje slika sa HTML kodom ali nije komplikovano. U maloj zagradi () gde stavljate link ka slici, obratite paznju da date tacnu putanju do slike. BACKGROUND-REPEAT ima 4 vrednosti:
Verujem da su ove 4 vrednosti jasne. Slika se ponavlja po X osi, slika se ponavlja po Y osi, slika se ponavlja bez preciziranja ikakvih dodatnih vrednosti, slika se ne ponavlja. BACKGROUND-ATTACHMENT je atribut kojim mozete da zakacite sliku za elemente na stranice i u tom slucaju ona se zajedno sa njima skroluje. Ovaj atribut ima 2 vrednosti:
BACKGROUND-POSITION atributom sliku mozemo precizno smestiti u bilo koji deo stranice. Vrednosti ovog atributa mogu biti iskazan uz pomoc piksela, santimetrima, procentima, recima. Treba napomenuti da je osnovna vrednost left top (levo gore) ukoliko ne navedemo neku drugu.
Sada smo prosli atribut BACKGROUND sa njegovim vrednostima. Rekli smo nesto ukratko o samo CSS-u. Hteo bih jos da dodam da CSS kod moze da izgleda ovako:
<html> Ovde imamo klasican pocetak HTML dokumenta gde u glavi dokumenta imamo ubacen CSS kod (podebljan deo) sa dva atributa za pozadinu koji joj menjaju boju u crnu i postavljaju izabranu sliku. Dodacu samo da sam za ovaj primer koristio drugi nacin unosenja CSS koda. Prelazimo na atribute za tekst:
TEXT-INDENT daje stilski izgled tekstu tako sto uvlaci prvi red u pasusu: p {text-indent: 20px;} - uvlaci prvi red pasusa za 20 piksela. TEXT-ALIGN atribut poravnava tekst. Isto kao i HTML atribut ALIGN ali ovde pored vrednosti left, center i right imamo i cetvrtu vrednost justify koja siri tekst u redu tako da i leva i desna strana budu ravne (kao clanci u novinama ili tekst u knjigama):
td {text-align: left;} - U ovom primeru CSS koda tekst je u celiji (td je oznaka za celiju secate se) poravnat levo. LETTER-SPACING je atribut sa kojim mozemo da pravimo veci razmak izmedju slova u tekstu:
p {letter-spacing: 5px;} - Primer u kojem pravim razmak izmedju slova u okviru pasusa. TEXT-TRANSFORM je zanimljiv atribut koji nam pomaze u uredjenju teksta na 4 nacina:
U ovom delu CSS-a obradicemo fontove i atribute koji nam omogucavaju da ih uredjujemo po sopstvenoj zelji (poput atribut <font> u HTML-u):
Dakle ovo su atributi koje koristimo prilikom uredjenja samo fonta. Objasnicemo svaki posebno. FONT-FAMILY atribut pravi listu fontova kojima ce biti prikazana web stranica. Ukoliko prvi font nije instaliran na racunaru posetioca stranice, web browser ce potraziti sledeci font na listi. Evo primera koda: h1 {font-family: arial, sans-serif, courier;} - Ovaj naslov ce biti ispisan Arial fontom. ukoliko nemate instaliran taj font, web browser ce potraziti sans-serif. FONT-STYLE atributom odredjujete dali ce font biti ispisan normal, italic ili oblique: h1 {font-style: italic; font-family: Sans Book SC;} - U ovom primeru naslov je ispisan italic stilom. Dodao sam jos i atribut font-family jer zelim da mi naslov bude ispisan Sans Book SC fontom (u drugom atributu samo mogao dodati i listu fontova). FONT-VARIATION smanjuje velika slova. Da ne bude zabune, velika slova su i dalje velika ali nisu toliko kao u normal modu. Konfuzno. I ja sam jedva skontao sta radi ovaj atribut. Imamo dva svojstva ovog atributa: normal i small-caps: h1 {font-variation: small-caps;} ili h1 {font-variation: normal;} FONT-WEIGHT je atribut koji podebljava slova i ima isti efekat kao tag <b>> u HTML-u. Takodje imamo dva svojstva a to su bold i normal: p {font-weight: bold;} ili p {font-weight: normal;} Linkovi se u CSS-u obelezavaju sa slovom a kao i u HTML-u medjutim CSS nam donosi neke novine sa kojima mozemo da poboljsamo izgled nasih linkova. CSS prepoznaje 4 stanja linka:
Na vama je da vezbate i eksperimentisete sa svim ovim atributima koje smo prosli. Sa CSS-om idete korak dalje, dobijate nove mogucnosti i samim tim vasa kreativnost jos vise dolazi do izrazaja. Primetili ste da sada nisam davao toliko primera kao u slucaju HTML-a. To je zato sto se CSS ne razlikuje mnogo od HTML-a a sto je jos lepse pisete ga samo u glavi dokumenta.
|
| by FSKPZ |