Web stranice sastoje se od niza pojedinačnih dijelova, uključujući slike, tekst i razne dokumente. Ti dokumenti ne uključuju samo one na koje se može povezati s različitih stranica, poput PDF datoteka, već i dokumente koji se koriste za izradu samih stranica, poput HTML dokumenti za određivanje strukture stranice i CSS (Cascading Style Sheet) dokumenata koji diktiraju izgled stranice. Ovaj članak će se pozabaviti CSS-om, pokrivajući što je to i gdje se danas koristi na web mjestima.
CSS lekcija iz povijesti
CSS je prvi put razvijen 1997. godine kao način za web programere da definiraju vizualni izgled web stranica koje su kreirali. Namjera mu je bila omogućiti web profesionalcima odvojiti sadržaj i struktura koda web stranice iz vizualnog dizajna, nešto što prije toga nije bilo moguće.
Odvajanje strukture i stila omogućuje HTML-u da izvrši više funkcije na kojoj se izvorno temeljio - označavanje sadržaja, bez brige o dizajnu i izgledu same stranice, nečemu što je poznato kao "izgled i dojam" stranice stranica.
Evolucija CSS-a
CSS je stekao na popularnosti tek oko 2000. godine kada su web preglednici počeli koristiti više od osnovnih aspekata fonta i boja ovog označnog jezika. Danas svi moderni preglednici podržavaju sav CSS Level 1, većinu CSS Level 2, pa čak i većinu aspekata CSS Level 3. Kako se CSS nastavlja razvijati i uvode novi stilovi, web preglednici su počeli implementirati module koji unose nove CSS podrške u te preglednike i daju web dizajnerima snažne nove alate za oblikovanje za rad s.
U (mnogo) godina prošlo, bilo je odabranih web dizajnera koji su odbili koristiti CSS za dizajn i razvoj web stranica, ali ta je praksa danas gotovo nestala iz industrije. CSS je sada široko korišten standard u web dizajnu i bilo bi vam teško pronaći nekoga tko danas radi u industriji i koji nije imao barem osnovno razumijevanje ovog jezika.
CSS je kratica
Kao što je već spomenuto, izraz CSS označava "Cascading Style Sheet". Razlomimo ovu frazu malo da bismo potpunije objasnili što ti dokumenti rade.
Riječ "tablica stilova" odnosi se na sam dokument (poput HTML-a, CSS datoteke zapravo su samo tekstualni dokumenti koji se mogu uređivati različitim programima). Stilski listovi već se dugi niz godina koriste za dizajn dokumenata. Oni su tehničke specifikacije za izgled, bilo tiskani ili mrežni. Dizajneri tiska već dugo koriste stilske listove kako bi osigurali da se njihovi dizajni tiskaju točno prema njihovim specifikacijama. Tablica stilova za web stranicu ima istu svrhu, ali s dodanom funkcionalnošću i time što web pregledniku govori kako prikazati dokument koji se pregledava. Danas se mogu koristiti i CSS listovi stilova medijski upiti za promjenu načina na koji stranica traži različitih uređaja i veličina zaslona. To je nevjerojatno važno jer omogućuje da se jedan HTML dokument različito prikazuje, ovisno o zaslonu koji mu se koristi za pristup.
Kaskada zaista je poseban dio izraza "kaskadni tabelarni list". Web stilski list namijenjen je kaskadnom provlačenju kroz niz stilova u tom listu, poput rijeke preko vodopada. Voda u rijeci pogađa sve stijene u vodopadu, ali samo one na dnu točno utječu na to gdje će voda teći. Isto vrijedi i za kaskadu u tablicama stilova web stranica.
Tablice stilova dizajnera nadjačavaju zadane stilove preglednika
Na svaku web stranicu utječe barem jedan stil, čak i ako web dizajner ne primjenjuje nijedan stil. Ova lista stilova je tabelu stilova korisničkog agenta - poznati i kao zadani stilovi koje će web preglednik koristiti za prikaz stranice ako nisu dane druge upute. Primjerice, hiperveze su prema zadanim postavkama oblikovane plavom bojom i podcrtane su. Ti stilovi dolaze iz zadane tablice stilova web preglednika. Međutim, ako web dizajner pruža druge upute, preglednik će morati znati koje upute imaju prednost. Svi preglednici imaju svoje zadane stilove, ali mnogi od tih zadanih vrijednosti (poput plavo podvučenih tekstualnih veza) dijele se u svim ili većini glavnih preglednika i verzija.
Za drugi primjer zadanog preglednika, u našem web pregledniku zadani font je "Times New Roman"prikazan u veličini 16. Gotovo nijedna stranica koju posjetimo ne prikazuje se u toj obitelji fontova i veličini. To je zato što kaskada definira da se drugi stilski listovi, koje postavljaju sami dizajneri, redefiniraju veličina fonta i obitelj, nadjačavajući zadane postavke našeg web preglednika. Sve tablice stilova koje izradite za web stranicu imat će više specifičnosti od zadanih stilova preglednika, tako da će se zadane vrijednosti primijeniti samo ako ih vaša tablica stilova ne poništi. Ako želite da veze budu plave i podcrtane, ne trebate ništa raditi jer je to zadano, ali ako CSS datoteka vaše web lokacije kaže da veze trebaju biti zelene, ta će boja nadjačati zadanu plavu. Podcrtavanje će ostati u ovom primjeru jer niste drugačije naveli.
Gdje se koristi CSS?
CSS se također može koristiti za definiranje izgleda web stranica prilikom gledanja u drugim medijima osim u web-preglednik. Na primjer, možete stvoriti tablicu stilova ispisa koja će definirati kako se web stranica treba ispisati. Budući da stavke web stranica poput navigacijskih gumba ili web obrazaca neće imati svrhu na ispisanoj stranici, list stilova ispisa može se koristiti za "isključivanje" tih područja kad se stranica ispisuje. Iako to zapravo nije uobičajena praksa na mnogim web mjestima, mogućnost izrade listova stilova ispisa snažna je i atraktivna (u našoj iskustvo - većina web profesionalaca to ne radi jednostavno zato što opseg proračuna web stranice ne zahtijeva ovaj dodatni posao biti učinjeno).
Zašto je CSS važan?
CSS je jedan od najmoćnijih alata koji web dizajner može naučiti jer njime možete utjecati na cjelokupan vizualni izgled web stranice. Dobro napisani listovi stilova mogu se brzo ažurirati i omogućiti web mjestima da vizualno promijene ono što je prioritetno na zaslon, koji zauzvrat pokazuje vrijednost i fokus na posjetiteljima, bez ikakvih promjena na temeljni HTML označavanje.
Glavni izazov CSS-a je taj da se ima još ponešto za naučiti - a s preglednicima koji se mijenjaju svaki dan, ono što danas dobro funkcionira možda sutra neće imati smisla jer novi stilovi postaju podržani, a drugi ispadaju ili ne padaju naklonost iz jednog razloga ili još.
CSS krivulja učenja vrijedi
Budući da CSS može kaskadno kombinirati i uzimajući u obzir kako različiti preglednici mogu različito interpretirati i implementirati direktive, CSS može biti teže naučiti od običnog HTML-a. CSS se također mijenja u preglednicima na način koji HTML stvarno ne čini. Jednom kad započnete koristiti CSS, vidjet ćete da će vam iskorištavanje snage stilskih tablica pružiti nevjerojatnu fleksibilnost u načinu postavljanja web stranica i definiranju njihovog izgleda i osjećaja. Usput ćete skupiti "vreću trikova" stilova i pristupa koji su vam radili u prošlosti i kojima se možete ponovno obratiti dok ste izgraditi nove web stranice u budućnosti.