CSS3 - Uvod




CSS je kratica za Cascading Style Sheets. CSS je standardni jezik stila koji se koristi za opisivanje prezentacije (tj. izgleda i oblikovanja) web stranica. Prije CSS-a, gotovo svi prezentacijski atributi HTML dokumenata sadržavali su se u HTML označivanju (tačnije unutar HTML oznaka), sve boje fonta, stilovi pozadine, poravnanja elemenata, borderi i veličine moraju biti izričito opisani u HTML-u. Kao rezultat toga, razvoj velikih web stranica postao je dug i skup proces, jer su se informacije o stilu više puta dodavale na svaku pojedinačnu web stranicu.

Da bi se rješio ovaj problem, CSS je uveo 1996. godine World Wide Web Consortium (W3C), koji takođe održava svoj standard. CSS je dizajniran tako da omogući odvajanje prezentacije i sadržaja. Sada web dizajneri mogu informacije o oblikovanju web stranica premjestiti u zasebnu listu stilova što rezultira znatno jednostavnijom oznakom HTML-a i boljom održavanju. CSS3 je najnovija verzija CSS specifikacije. CSS3 dodaje nekoliko novih značajki stila i poboljšanja kako bi poboljšao mogućnosti web prezentacije.



Šta možete uraditi sa CSS-om?

Postoji puno više stvari koje možete učiniti sa CSS-om.

  • Pravila stila lako možete primijeniti na više elemenata.
  • Možete kontrolirati prezentaciju više web stranice sa jednim fajlom.
  • Istu stranicu možete različito predstaviti na različitim uređajima.
  • Možete stilizirati dinamična stanja elemenata kao što su lebdenje, fokus itd. Što inače nije moguće.
  • Možete promijeniti položaj elementa na web stranici bez promjene oznake.
  • Možete promijeniti prikaz postojećih HTML elemenata.
  • U 2D ili 3D prostoru možete transformirati elemente poput razmjera, rotiranja, nagiba itd.
  • Možete stvoriti efekte animacija i prelaza bez upotrebe JavaScript-a.
  • Možete kreirati verziju web stranica namijenjenih ispisu.

Ovdje se popis ne završava, postoje i mnoge druge zanimljive stvari koje možete učiniti sa CSS-om. O njima ćete detaljno saznati u narednim lekcijama.



Prednosti upotrebe CSS-a

Najveća prednost CSS-a je ta što omogućava odvajanje stila i izgleda od sadržaja dokumenta. Evo još nekoliko prednosti, zašto treba početi koristiti CSS?

  • Sa CSS-om uštedite puno vremena - CSS pruža puno fleksibilnosti za postavljanje svojstava stila elementa. Možete jednom napisati CSS, a zatim se isti kod može primijeniti na grupe HTML elemenata i može se ponovo upotrijebiti na više HTML stranica.

  • Jednostavno održavanje - CSS pruža jednostavno sredstvo za ažuriranje formatiranja dokumenata i održavanje doslednosti u više dokumenata. Budući da se sadržaj čitavog skupa web stranica može lako kontrolirati pomoću jedne ili više tablica stilova.

  • Brže učitavanje stranica - CSS omogućava više stranica dijeljenje informacija o oblikovanju, što smanjuje složenost i ponavljanje strukturalnih sadržaja dokumenata. Značajno smanjuje veličinu prenosa datoteke, što rezultira bržim učitavanjem stranice.

  • Superiorni stilovi za HTML - CSS ima mnogo šire mogućnosti prezentacije od HTML-a i pruža mnogo bolju kontrolu nad izgledom vaših web stranica. Na taj način možete dati puno bolji izgled svojim web stranicama u odnosu na HTML prezentacijske elemente i atribute.

  • Kompatibilnost s više uređaja - CSS također omogućava optimiziranje web stranica za više vrsta uređaja ili medija. Korištenjem CSS-a isti HTML dokument može se predstaviti u različitim stilovima pregledavanja za različite uređaje za prikaz, poput radne površine, mobitela itd.


Šta nastavak kursa pokriva?

Ova serija CSS tutorijala pokriva sve osnove CSS-a, uključujući ideju odabira, načine postavljanja boja i pozadine, način oblikovanja fontova i teksta, stilizovanje UI elemenata poput hiperveza, lista, tabela itd. Kao i koncept CSS model box i tako dalje. Jednom kada ovladate osnovama, preći ćete na sljedeći nivo koja objašnjava način postavljanja dimenzija i poravnanja elemenata, metode za pozicioniranje elemenata na web stranici, korištenjem slika, kao i koncept relativnog i apsolutne jedinice, model vizuelnog oblikovanja, prikaz i vidljivost, slojevi, pseudo klase i elementi, listovi stilova ovisni o medijima i tako dalje.

Konačno, istražit ćete neke napredne oznake uvedene u CSS3 poput gradijentnih boja, efekta sjene, 2D i 3D transformacije, alfa transparentnosti, kao i način stvaranja prelaznog i animacijskog efekta, fleksibilnog izgleda, efekta filtra, koncepta medija upiti i još mnogo toga.