CSS je WEB tehnologija koja vam omogućava manipulaciju i primjenu stila, izgleda i teme digitalnog sadržaja. U većini situacija, to je alat koji omogućava kreatoru da odredi estetski izgled web stranice.
Prije CSS-a postojali su drugi načini stilizovanja web stranice (*inline stil, ekstenzije atributa, table za layout… *), ali ono što je CSS razlikovalo je to što na WEB-u stil dokumenta nije mogao u potpunosti da zavisi od kreatora ili korisnika, već kombinacijom oba, prateći kompaktibilnost uređaja i mogućnosti pretraživača. Tako, CSS stavlja kontrolu u ruke programera i korisnika, čineći je interaktivnom, ali podložnu izboru krajnjeg korisnika, koji može definisati konačni izgled stranice na osnovu svojih potreba.
CSS se može okarakterisati kao jezik sa određenom sintaksom i skupom pravila. Označen je kao jezik za stilizovanje od strane W3C. Može se reći da CSS zadovoljava neke zahtjeve programskog jezika opšte namjene, pa se njegova upotreba može smatrati kao vid ‘programiranja’. Sledeće karakteristike CSS dijeli sa programskim jezicima:
- upotreba varijabli
- funkcije
- osnovne računarske operacije
- importovanje eksternog sadržaja
- komentari
- polimorfizam
- opseg
Ako uz to integrišemo CSS prekompajlere, dobijamo dodatne karakteristike programskih jezika:
- mixins - blokovi stila koji se mogu koristiti na više mjesta
- extensions - dodatne funkcije
- namespaces - organizovanje naziva u hijerarhijskoj strukturi
- liste i mape kao struktura podataka (SASS, LESS, Stylus, PostCSS)
- matematički izrazi
Dodavanje CSS-a HTML dokumentu
Dodavanje CSS stila u HTML dokumentu je ključni korak za postizanje željenog izgleda web stranice. Postoje nekoliko načina za dodavanje CSS stila, a svaki od njih ima svoje prednosti i primjene.
- Inline stil - predstavlja direktno dodavanje css stila HTML elementu.
<p style="color: blue; font-size: 26px;">Tekst sa inline stilom.</p>- Interni stil - postiže se dodavanjem <style> tagova unutar <head> sekcije HTML dokumenta.
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: blue;
font-size: 18px;
}
</style>
</head>
<body>
<p>Tekst sa internim stilom</p>
</body>
</html>- Eksterni stil - dodaje se putem linkovanja eksternog CSS fajla u HTML dokumentu.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<!-- html kod -->
</body>
</html>- Unutrašnji import - predstavlja još jedan način importovanja stilova. Ova deklaracija omogućava uvoz CSS fajlova unutar drugih CSS fajlova, čime se omogućava organizacija i modularnost stilova.
/* Import se uvijek vrši prije ostalih css pravila */
@import url("/path/to/style.css") tipMedia;Kao CSS radi
Proces primjene CSS stila u pretraživaču prolazi kroz nekoliko ključnih faza, uključujući parsiranje HTML-a, učitavanje CSS fajlova, konstrukciju CSSOM-a1, primjenu stilova na HTML elemente i konačno rendering i prikazivanje web stranice.
-
Prva faza u procesu primjene CSS stila je parsiranje HTML-a. Pretraživač čita HTML dokument i identifikuje sve HTML elemente, kao i reference ka spoljnim CSS fajlovima ili unutrašnjim stilovima.
-
Nakon parsiranja HTML-a, pretraživač učitava spoljne CSS fajlove koji su referencirani unutar HTML dokumenta. Ovi fajlovi sadrže stilove koji će biti primijenjeni na HTML elemente.
-
CSSOM je struktura podataka koja predstavlja CSS stilove u pretraživaču. Tokom ove faze, pretraživač konstruiše CSSOM na osnovu učitanih CSS fajlova i internih stilova. CSSOM omogućava pretraživaču da razumije i primijeni stilove na HTML elemente.
-
Nakon konstrukcije CSSOM-a, pretraživač primjenjuje stilove na HTML elemente u skladu sa definisanim selektorima i deklaracijama u CSS fajlovima. Ova faza uključuje određivanje izgleda, boje, fontova, rasporeda i drugih vizuelnih svojstava HTML elemenata.
-
Konačna faza procesa primjene stila je rendering i prikazivanje web stranice. Pretraživač koristi primijenjene stilove i HTML strukturu da bi kreirao vizuelni prikaz web stranice, koji se zatim prikazuje korisniku.
Ako se tokom procesa raščlanjivanja pojavi dio CSS-a koji pretraživač ne razumije, pristupa se sledećim rješenjima:
- Ignorisanje neprepoznatih svojstava - ako naiđe na CSS deklaraciju koju parser ne prepoznaje tokom procesa renderovanja, jednostavno će je preskočiti i nastaviti.
– Upotreba podrazumijevanog stila – svaki pretraživač ima sopstveni podrazumijevani stil koji reguliše kako html komponente treba da se pojavljuju u odsustvu eksplicitnih CSS pravila. U ovoj situaciji, pretraživač može da koristi podrazumijevani stil ako se pojavi nerazumljiva deklaracija.
-
Ako pregledač pronađe pogrešnu deklaraciju ili sintaksičku grešku, može preskočiti cijelu deklaraciju stilskog bloka povezanu sa problemom.
-
CSS validacija – Ako CSS pravila sadrže veliki broj grešaka i pretraživač naiđe na veliki problem, stranica može biti netačno prikazana ili cijela CSS datoteka može biti zanemarena.
Footnotes
-
CSS Object Model predstavlja programski interfejs koji omogućava manipulaciju CSS-om putem JavaScript-a. Slično kao što DOM (Document Object Model) omogućava manipulaciju HTML i XML dokumentima, CSSOM omogućava pristup i manipulaciju stilovima na web stranici. ↩