Uvod u CSS
Šta, kako i zašto CSS?
CSS je skraćenica od Cascading Style Sheets, u slobodnom prevodu bi bilo "kaskadni opis stila stranice". Drugim rečima CSS je jezik formatiranja koji nam služi da definišemo izgled i ponašanje svakog elementa na web sajtu.
CSS je počeo da se koristi od HTML verzije 4.0. Uvođenjem CSS-a dobili smo mogućnost da istovremeno odredimo izgled više elemenata ili da jednom elementu odredimo više opisa.
Druga važna novina koju nam je doneo CSS je mogućnost da sve što se tiče izgleda sadržaja web sajta odvojimo od samog sadržaja. CSS-om sada možemo jednostavnom promenom neke definicije stila, tu promenu odmah videti na svim stranicama sajta, dok bi bez CSS-a promenu morali raditi na svakoj stranici posebno. A zamislite samo ovaj posao bez CSS-a na web sajtu sa nekoliko hiljada stranica...
CSS kod se može zadavati na tri načina:
- Direktno u HTML tagu koristeći argument style,
- U zaglevlju dokumenta, između <head> i </head> tagova i
- U eksternom fajlu sa ekstenzijom .css koji se uključuje u HTML stranicu tagom link.
PRIMER upotrebe CSS-a direktno u HTML tagovima:
<!DOCTYPE html>
<html> <head><!--Sadržaj zaglavlja--></head>
<body>
<h1 style="color:#f00;>Naslov</h1>
<div style="color:#0f0;>Neki naš tekst</div>
</body>
</html>
U ovom primeru, koristili smo argument style koji ide uz HTML tag i definisali samo njegov izgled.
U konkretnom primeru reč "Naslov" biće ispisana crvenim fontom, a rečenica "Neki naš tekst" biće zelena. I to važi samo ovde i nigde više.
Važno je znati da su ovako definisani stilovi imaju najveću težinu i oni će se primeniti bez obzira što je na nekom drugom mestu definisano drugačije.
PRIMER upotrebe CSS-a u zaglavlju dokumenta:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
h1 {color:#f00;}
div {color:#0f0;}
</style>
</head>
<body>
<h1>Naslov</h1>
<div>Neki naš tekst</div>
</body>
</html>
U ovom primeru dobili bi smo isti rezultat kao u predhodnom, s tim što bi u telu dokumenta svi h1 tagovi bili crveni, a svi div-ovi zeleni, što u prvom primeru ne bi bio slučaj.
Treći način primene CSS-a, odnosno CSS u eksternom fajlu je najčešće korišćen način. Treba se nastojati da se upravo ovaj način uvek koristi, a prva dva samo u izuzetnim situacijama.
Kada želimo da napravimo eksterni CSS fajl, uradićemo to u bilo kom tekstualnom editoru, a pri snimanju fajla daćemo mu ime po svojoj volji, ali ekstenzija MORA da bude .css. Vrlo često se na jednom web sajtu koristi više CSS fajlova, pa je poželjno sve njih smestiti u poseban folder koji možemo nazvati "css".
<link rel="stylesheet" type="text/css" href="css/neko-ime.css" />
Da bi se definicije iz eksternog CSS fajla primenile na nekoj stranici, potrebno je taj CSS fajl povezati sa stranicom korišćenjem kod-a kako je prikazano u boksu desno.:
Na isti način moramo povezati sve CSS fajlove, ako ih ima više. Nikako ne treba preterivati sa velikim brojem CSS fajlova, odnosno, uvek treba nastojati da ih je što manji broj.
Opšta sintaksa u CSS-u
Na slici vidimo opštu sintaksu CSS-a koji počinje sa selektorom, a između vitičastih zagrada nalazi se jedna ili više definicija stilova, međusobno razdvojenih sa tačka-zaret (;).
Definicije stila sastoje se od naziva svojstva i vrednosti. Između je dvotačka (:).
Selektori mogu da budu regularni HTML tagovi (body, div, span, p, table, h1-h6, strong, img.......), mogu da budu CSS identifikatori, CSS klase, pseudo klase, selektori sa atributima i određene kombinacije selektora. Selektor određuje na šta se definicije navedene između vitišastih zagrada primenjuju.
Važno je znati da su neka CSS svojstva nasledna, odnosno da se prenose na elemente unutar nekog selektora, dok neke nisu nasledne. Koje su nasledne, a koje nisu, detaljno ćemo opisati u posebnom postu.
Porodično stablo u CSS-u
Vreme je da objasnimo strukturu web sajta koja je na izvestan način organizovana po principu roditelja i njihove dece. Zanemarimo za sada prvi red HTML dokumenta (u našem primeru je to: <!DOCTYPE html>), videćemo da HTML kôd počinje sa <html> i završava sa </html>. Ovo je najstariji elemenat svake web stranice odnosno, najstariji predak svih ostalih elementa. On obično ima dva "deteta" naslednika. To je zaglavlje dokumenta - HEAD (<head>...</head>) i TELO dokumenta (<body>...</body>).
Head se ne prikazuje u browseru, ali sadrži veoma važne informaciju neophodne za preavilan prikaz web stranice, pa između ostalog sadrži i linkove za povezivanje sa eksternim fajlovima. Celokupni sadržaj koji se prikazuje u browseru nalazi se u telu dokumenta, odnosno između elemenata <body> i </body>.
Unutar <body> nalaze se njegova "deca" elementi koji mogu imati svoju "decu", koja takođe mogu imati svoju "decu" i tako u nedogled.
Komentari
Trenutno nema komentara.Dodajte komentar