Što je CSS i gdje se koristi?

Što su Cascading Style Sheets?

Web stranice se sastoje od više pojedinačnih komada, uključujući slike, tekst i različite dokumente. Ti dokumenti ne uključuju samo one koji se mogu povezati s različitih stranica, poput PDF datoteka, već i dokumente koji se koriste za samu izradu stranica, poput HTML dokumenata za određivanje strukture stranice i dokumenata CSS (Cascading Style Sheet) da diktiraju izgled stranice. Ovaj članak će se probiti u CSS, pokrivajući što je i gdje se danas koristi na web stranicama.

Lekcija povijesti CSS-a

CSS je prvi put razvijen 1997. godine kao način da web programeri definiraju vizualni izgled web stranica koje stvaraju. Namjeravalo je omogućiti web profesionalcima da od vizualnog dizajna odvoje sadržaj i strukturu koda web stranice, što prije nije bilo moguće.

Razdvajanje strukture i stila omogućuje HTML-u da izvrši više funkcije na kojoj se izvorno temelji - označavanje sadržaja, bez brige o samom dizajnu i izgledu stranice, nešto što se obično naziva "izgled i dojam" stranice.

CSS nije stekao popularnost sve do 2000, kada su web preglednici počeli koristiti više od osnovnih aspekata fontova i boja ovog označnog jezika. Danas svi moderni preglednici podržavaju cijelu CSS razinu 1, većinu CSS razine 2, pa čak i većinu aspekata CSS razine 3. Kako se CSS nastavlja razvijati i uvode novi stilovi, web preglednici počeli su implementirati modele koji donose novu CSS podršku u te preglednike i daju web dizajnerima moćne nove styling alate za rad.

U proteklih nekoliko godina bili su odabrani web dizajneri koji su odbili koristiti CSS za dizajn i razvoj web stranica, ali ta praksa sve je danas nestala iz industrije. CSS je sada široko korišten standard u web dizajnu i bit će teško pronaći nekoga tko danas radi u industriji koji nije imao barem osnovno razumijevanje tog jezika.

CSS je kratak

Kao što je već spomenuto, izraz CSS označava "Cascading Style Sheet". Prekinimo ovu frazu malo da bismo u potpunosti objasnili što ti dokumenti rade.

Riječ "stilski list" odnosi se na sam dokument (kao što je HTML, CSS datoteke zapravo su samo tekstualni dokumenti koji se mogu uređivati ​​s raznovrsnim programima). Stilovi se koriste za izradu dokumenata dugi niz godina. To su tehničke specifikacije za izgled, bez obzira jesu li ispisane ili online. Dizajneri za tisak dugo su koristili listove stila kako bi osigurali da su njihovi nacrti ispisani točno prema njihovim specifikacijama. Stilski obrazac za web stranicu služi istoj svrsi, ali uz dodatnu funkciju također govori web pregledniku kako prikazati dokument koji se pregledava. Danas, CSS stilski listovi također mogu koristiti medijske upite kako bi promijenili način na koji stranica traži različite uređaje i veličine zaslona . Ovo je nevjerojatno važno jer omogućava da se jedan HTML dokument razlikuje prema zaslonu koji se koristi za pristup.

Kaskada je stvarno poseban dio pojma "kaskadni stilski list". Ploča s web-stranicama namijenjen je kaskadi kroz niz stilova na tom listu, poput rijeke iznad vodopada. Voda na rijeci pogoduje sve stijene u vodopadu, ali samo one na dnu utječu točno na to gdje će voda teći. Isto vrijedi i za kaskadu u web stranicama stila.

Svaka web stranica podliježe barem jednom stilu, čak i ako web dizajner ne primjenjuje niti jedan stil. Ovaj stilski stil je korisnički obrazac korisničkih agenata - poznat i kao zadani stilovi koje će web preglednik koristiti za prikaz stranice ako se ne daju druge upute. Na primjer, prema zadanim hipervezama stilizirani su plavom bojom i podcrtani su. Ti stilovi dolaze iz zadanog stila web preglednika. Ako web dizajner pruža druge upute, međutim preglednik će morati znati koje upute imaju prednost. Svi preglednici imaju svoje zadane stilove, ali mnogi od tih zadanih postavki (poput plavih potcrtanih tekstualnih veza) dijele se u svim ili većini glavnih preglednika i verzija.

Za još jedan primjer zadane postavke preglednika, u mom web pregledniku zadani font " Times New Roman " prikazan je u veličini 16. Međutim, gotovo nijedna od stranica koje posjetim ne prikazuje se u toj obitelji i veličini. To je zato što kaskada definira da drugi stilski listovi, koji sami dizajneri određuju, redefinirati veličinu fonta i obitelj, prešućujući zadane postavke web preglednika. Svi stilski listovi koje izradite za web stranicu imat će više specifičnosti od zadanih stilova preglednika, tako da će se te zadane postavke primjenjivati ​​samo ako ih vaš stilski stil ne nadjačava. Ako želite da veze budu plave i podvučene, ne morate ništa učiniti jer je to zadana, ali ako CSS datoteka vaše web lokacije kaže da veze trebaju biti zelene, ta će boja nadjačati zadanu plavu boju. Podcrtat će ostati u ovom primjeru, jer niste naveli drukčije.

Gdje se koristi CSS?

CSS se također može koristiti za definiranje načina na koji bi web stranice trebale izgledati kada su pregledane na drugim medijima od web preglednika. Na primjer, možete izraditi list stila za ispis koji će definirati način na koji bi web stranica trebala biti ispisana. Budući da stavke web stranice kao što su gumbe za navigaciju ili web-obrasci neće imati svrhu na ispisanoj stranici, za ispisivanje stranice možete upotrijebiti Sheet Sheet Style (Stil ispisa) za "isključivanje" tih područja. Iako nije uobičajena praksa na mnogim web stranicama, mogućnost kreiranja listova stila je moćna i atraktivna (u mom iskustvu - većina web stručnjaka to ne čini jednostavno zato što područje proračuna ne zahtijeva dodatno obavljanje posla ).

Zašto je CSS važno?

CSS je jedan od najsnažnijih alata koje web dizajner može naučiti jer s njim možete utjecati na cijeli vizualni izgled web stranice. Dobro napisani listovi stilova mogu se brzo ažurirati i omogućiti web lokacijama da promijene vizualni prioritet na zaslonu, što zauzvrat pokazuje vrijednost i fokus na posjetitelje, bez ikakvih izmjena koje su potrebne za izradu HTML oznake.

Glavni izazov CSS-a je da ima dosta toga za naučiti - a preglednicima koji se mijenjaju svaki dan, ono što danas dobro funkcionira ne može imati smisla sutra dok novi stilovi postanu podržani, a drugi se ispuštaju ili pate od koristi iz jednog ili drugog razloga ,

Budući da se CSS može kaskadirati i kombinirati, a s obzirom na to kako različiti preglednici mogu tumačiti i implementirati različite direktive, CSS može biti teži nego običan HTML za svladavanje. CSS se također mijenja u preglednicima na način na koji HTML zapravo ne. Nakon što počnete upotrebljavati CSS, vidjet ćete da iskorištavanje moći stilskih ploča pružit će Vam nevjerojatnu fleksibilnost u načinu postavljanja web stranica i definiranju njihovog izgleda i dojma. Usput, prikupit ćete "vrećicu trikova" stilova i pristupa koji su vam u prošlosti funkcionirali i na što se možete obratiti dok gradite nove web stranice u budućnosti.

Izvorni članak Jennifer Krynin. Uredio / la Jeremy Girard dana 7/5/17,