CSS - Cascading Style Sheets
CSS je skraćenica od "Cascading Style Sheets", a služi za definisanje stilova koji određuju izgled HTML elemenata. CSS je izum World Wide Web Consortium (w3c.org).
CSS je podržan od strane svih vodećih web čitaća, ali nažalost izgled same strane nije isti na svim web čitačima (razlog je nepridržavanje standarda).
Postoji više načina ubacivanja stilova. U samom html dokumentu (izmedju head tagova) i preko spoljasnjeg fajla koji nosi ekstenziju .css .
Preporuka je ubacivanje CSS-a preko eksternog fajla iz više raloga kao što su preglednost, prepravka samo jednog fajla (samog .css fajla) za promenu izgleda svih stranica....
Evo kako izgleda kod za ubacivanje css-a unutar samog html fajla:
VAŽNO:
Neko komentar piše // što je izvodljivo ako je upitanju recimo FireFox browser ali ako je upitanju IE6 onda nikako nije, pošto IE6 ne poštuje taj komentar. Univerzalno rešenje je korišćenje komentara za više redova pa makar on bio i jedno jedno slovo. Ovo je i ujedno i prva nekompatibilnost medju web čitačima. Tako prosta stvar a može da prikaže ogromne razlike. Samo primera radi pogledajte ovaj kod u FireFox-u i IE6. Kopirajte kod u notepad i sačuvajte kao nesto.html i pogledajte iz oba browsera. NAPOMENA: pazite da notepad ne doda na kraju ekstenziju .txt . Slika sve govori !
Firefox je uvažio komentar color, tako da je tekst po defaultu crne boje, dok IE nije uvažio komentar i tekst je sada ispisan žutom bojom. Jedna strana 2 browsera i 2 različita prikaza.
Ubacivanje eksternog stila izvršava se tako što se uvacuje sledeći tag u head zaglavlje.
<head>
<link rel="stylesheet" href="mojstil.css" type="text/css">
</head>
Gde mojstil.css predstavlja eksterni fajl koji se nalazi u ovom slučaju u istom folderu gde i strana.html
Sintaksa CSS-a
Sintaksa CSS-a sadrži 3 dela. Sektor, atribut i vrednost i zapisuje se na sledeći način:
sektor { atribut1: vrednost; atribut2: vrednost; atributN: vrednost;}
Radi veće preglednosti usvojen je standard pisanja: jedan adribut jedan red.
sektor {
atribut1: vrednost;
atribut2: vrednost;
atributN: vrednost;
}
Sektor je obično neki html element (body gde se podesava telo strane) ili stil koji želite da definišete (npr naslovi koje možete da iskoristite za sve naslove na Vašoj strani).
Kreiranje prve strane sa CSS-om
Za početak krenućemo od podešavanja tela strane.
body {
background-color: #cccccc; /* boja pozadine */
color: yellow; /* boja teksta */
font-size: 26px; /* velicina fonta */
}
Definisali smo telo strane sa 3 atributa.
background-color i dodali vrednost #cccccc (boja pozadine i vrednost boje u heksadecimalnom obliku…neka siva boja)
color: i dodali vrednost yellow (boja teksta i vrednost data nazivom boje)
font-size: i dodali vrednost 26px (veličina fonta, konkretno 26 piksela)
Ceo kod:
Ako kopirate ovaj tekst u notepad i sačuvate kao nesto.html dobićete html stranu koja ima sivu pozadinu, "Neki tekst" zute boje i veličine 26 piksela.
Idemo dalje na test. (uvek ostavljamo stari kod da bi videli razliku)
body {
background-color: #cccccc;
color: yellow;
font-size: 26px;
}
p {
font-family: Tahoma, "Times New Roman", Times, serif;
color: #323232;
font-size: 14px;
}
Slovo p predstavlja skraceni oblik paragraf (običan tekst) i definisali smo osnovni oblik.
Osnovni oblik je font Tahoma, boje 323232 i veličine 14 px.
Poželjno je stavljati font-family: i nabrojati još par fontova pored osnovnog zbog sigurnosti da korisnik ima bar neki od tih pobrojanih fontova. Fontovi koji se sastoje od više reči kao što je Times New Roman treba da se pišu obavezno pod znacima navoda.
Ceo kod:
Rezultat svega je: font Tahoma, boja 323232 i veličina.
Dakle tekst više nije žute boje a relultat toga je to sto je u samom paragrafu definisano da tekst bude 323232 boje. Da kojim slučajem u paragraf delu nije definisan color rezultat bi bio tekst žute boje jer je nasledio tu osobinu od tela stranice (body deo). Možete to isprobati tako što ćete iskomentarisati color: #323232; ovaj deo koda ali obavezno /* */ ili jednostavno izbrisati taj deo koda pa pogledati rezultat. Inače samo to nasleđivanje treba izbegavati maksimalno jer opet dolazi do izražaja nekompatibilnos među čitačima. Evo primera:
Dakle FireFox je uzeo vrednost fonta dok je IE nasledio od paragrafa..... inače ovo je class i biće reči nešto kasnije o njemu.
I naravno generalni savet kada je upitanju CSS. Svaka stranica bi trebala bar približno da izgleda na većini browsera. Da izgleda identično na FireFox-u i IE je prosto nemoguće jer u samom startu FireFox nema scrollbar dok IE ima scrollbar koji je u funkciji tek kada je stranica "duža/veća" od veličine rezolucije na monitoru. Treba težiti da se sajt podjednako dobro vidi u svim popularnim web browserima u smislu da bude isti font, boja, veličina i tome slično. Zato jedan generalni savet pri izradi strana je da se u samoj izradi CSS-a koriste oba čitača za poređenje a ne samo jedan, kako ne bi došli u situaciju da završite ceo CSS kod i tek na kraju radoznalosti pogledate kako to izgleda u drugom čitaču i dobijete neke čudne rezultate. Zato posle definisanja celog jednog segmena odradite pogled na oba čitača.
Tutorial CSS 2 Class i ID
Vazno !
Ovim putem se izvinjavam za greške koje su možda slučajno promakle kao i za stopostotnu ispravnost teksta.
Pedja
Nazad na početak
OET 1