CSS (Cascading Style Sheets) je stilski jezik koji se koristi za opisivanje prezentacije dokumenta napisanog u označnom jeziku. Koristi se za kontrolu izgleda, fontova, boja i drugih vizualnih aspekata web stranica.
CSS ili Cascading Style Sheets je jezik za kodiranje koji se koristi za stiliziranje i oblikovanje web stranica. Web dizajnerima omogućuje kontrolu izgleda teksta, slika i drugih elemenata na web stranici, uključujući njihovu veličinu, boju i položaj na stranici. Jednostavnije rečeno, CSS čini da web stranice izgledaju lijepo i organizirano.
CSS ili Cascading Style Sheets je programski jezik koji se koristi za opisivanje prezentacije dokumenta napisanog u HTML-u ili XML-u. CSS se koristi za definiranje stila web stranice zajedno s HTML-om i jezik je temeljen na pravilima koji vam omogućuje definiranje pravila određivanjem grupa stilova koje treba primijeniti na određene elemente ili grupe elemenata na vašoj web stranici.
CSS je moćan alat koji može kontrolirati izgled više web stranica odjednom, štedeći puno posla. Može manipulirati bojama teksta, okvirima i drugim elementima za stvaranje lijepih i funkcionalnih web stranica. CSS opisuje kako se elementi trebaju prikazati na ekranu, na papiru, u govoru ili na drugim medijima, što ga čini bitnim dijelom web razvoja.
Bilo da ste početnik ili iskusan web programer, razumijevanje CSS-a ključno je za stvaranje vizualno privlačne web stranice jednostavne za korištenje. U ovom članku dublje ćemo istražiti što je CSS, kako funkcionira i različite vrste CSS-a. Također ćemo istražiti neke od najboljih praksi za korištenje CSS-a za stvaranje nevjerojatnih web stranica koje su i funkcionalne i vizualno privlačne.
Što je CSS?
CSS ili Cascading Style Sheets je programski jezik koji se koristi za opisivanje prezentacije dokumenta napisanog u HTML-u ili XML-u. Koristi se za stiliziranje HTML elemenata i kontrolu izgleda više web stranica odjednom.
Definicija
CSS je jezik temeljen na pravilima koji definira pravila za prikaz elemenata na ekranu, papiru, u govoru ili na drugim medijima. Programerima omogućuje odvajanje prezentacije web stranice od njezinog sadržaja, što olakšava održavanje i ažuriranje web stranice.
Povijest
CSS je prvi put predstavljen 1996. godine i od tada je prošao nekoliko ažuriranja i revizija. Razvijen je za rješavanje ograničenja HTML-a u pogledu stila i izgleda. Prije CSS-a, HTML se koristio za definiranje strukture web stranice i njezine prezentacije. Međutim, to je otežavalo izmjene u izgledu ili dizajnu web stranice.
Važnost
CSS igra ključnu ulogu u web razvoju jer omogućuje programerima stvaranje vizualno privlačnih i responzivnih web stranica. Omogućuje veću kontrolu nad prezentacijom web stranice i razvojnim programerima stvaranje dosljednog izgleda i dojma na više web stranica.
Zaključno, CSS je bitan alat za web programere za stvaranje vizualno privlačnih i responzivnih web stranica. Odvaja prezentaciju web stranice od njezinog sadržaja i omogućuje programerima stvaranje dosljednog izgleda i dojma na više web stranica.
Osnove CSS-a
CSS je moćan stilski jezik koji se može koristiti za oblikovanje izgleda web stranice. U ovom ćemo odjeljku pokriti neke od osnovnih pojmova CSS-a, uključujući sintaksu, selektore, svojstva i vrijednosti.
Sintaksa
CSS je jezik temeljen na pravilima koji koristi skup pravila za određivanje kako bi HTML elementi trebali biti prikazani na web stranici. CSS pravilo sastoji se od selektora i bloka deklaracije. Selektor pokazuje na HTML element koji treba stilizirati, dok blok deklaracije sadrži jednu ili više deklaracija odvojenih točkom-zarezom. Svaka deklaracija uključuje naziv CSS svojstva i vrijednost, odvojene dvotočkom.
Selektori
Selektori se koriste za ciljanje određenih HTML elemenata na web stranici. Postoji nekoliko vrsta selektora, uključujući selektore elemenata, selektore klasa, selektore ID-a i selektore atributa. Selektori elemenata ciljaju određene HTML elemente, dok selektori klasa ciljaju elemente s određenim atributom klase. Selektori ID-a ciljaju elemente s određenim ID atributom, dok selektori atributa ciljaju elemente s određenim atributom.
Nekretnine
CSS svojstva koriste se za kontrolu vizualnog izgleda HTML elemenata na web stranici. Dostupna su mnoga svojstva CSS-a, uključujući boju, veličinu fonta, boju pozadine i marginu, među ostalima. Svojstva CSS-a mogu se postaviti na određene vrijednosti, poput boje ili veličine fonta, kako bi se kontroliralo kako se element prikazuje.
Vrijednosti
Vrijednosti se koriste za postavljanje specifičnih vrijednosti CSS svojstava. Na primjer, svojstvo boje može se postaviti na određenu vrijednost boje, kao što je crvena, zelena ili plava. Ostala svojstva, kao što je veličina fonta, mogu se postaviti na određene vrijednosti, poput 12 ili 16 piksela.
Pravila i prvenstvo
CSS pravila koriste se za postavljanje stila za određene HTML elemente na web stranici. Kada se više pravila primjenjuje na isti element, pravilo s najvećom specifičnošću i posljednje primijenjeno imat će prednost. U nekim slučajevima može biti potrebno upotrijebiti ključnu riječ !important kako bi se nadjačala druga pravila i osigurala primjena određenog stila.
Zaključno, CSS je moćan stilski jezik koji se može koristiti za formatiranje izgleda web stranice. Razumijevanjem osnova CSS sintakse, selektora, svojstava i vrijednosti, možete stvoriti lijepe i responzivne web-stranice koje su jednostavne za navigaciju i koje su vizualno privlačne.
CSS verzije
CSS se razvijao tijekom godina, s novim verzijama koje su predstavljene kako bi zadovoljile promjenjive potrebe web programera. Trenutno postoje četiri glavne verzije CSS-a: CSS1, CSS2.1, CSS3 i CSS4.
CSS1
CSS1 je bila prva verzija CSS-a, izdana 1996. Pružao je osnovne opcije stila kao što su boja fonta, veličina i stil. Također je omogućio stvaranje jednostavnih izgleda određivanjem položaja elemenata na stranici. CSS1 bio je značajno poboljšanje u odnosu na prethodne metode oblikovanja web stranica, koje su uključivale korištenje HTML oznaka za definiranje izgleda elemenata.
CSS2.1
CSS2.1 objavljen je 1998. i dodao je nekoliko novih značajki, uključujući podršku za vrste medija, kao što su ispis i zaslon, te mogućnost određivanja redoslijeda kojim bi elementi trebali biti prikazani. Također je uveo koncept selektora, koji je programerima omogućio ciljanje određenih elemenata na stranici i primjenu stilova na njih.
CSS3
CSS3 je predstavljen 1999. godine i najnovija je verzija CSS-a. Dodao je širok raspon novih značajki, uključujući podršku za animacije, prijelaze i gradijente. CSS3 je također predstavio nove opcije izgleda kao što su flexbox i grid, koje omogućuju stvaranje složenijih izgleda s manje koda. CSS3 se i danas široko koristi i postao je standard za moderni web razvoj.
CSS4
CSS4 je trenutno u razvoju i očekuje se da će biti objavljen u bliskoj budućnosti. Uvest će nekoliko novih značajki, uključujući podršku za varijable, što će programerima omogućiti da definiraju i ponovno koriste vrijednosti u svojim tablicama stilova. CSS4 će također uključivati nove opcije izgleda, kao što su upiti spremnika, što će programerima omogućiti stvaranje responzivnih dizajna koji se prilagođavaju veličini spremnika u koji se nalaze.
Zaključno, CSS je prošao dug put od svog početka, s novim verzijama koje su uvedene kako bi zadovoljile promjenjive potrebe web programera. Svaka verzija je dodala nove značajke i mogućnosti, što olakšava stvaranje složenih izgleda i stilova. S izdavanjem CSS4 na horizontu, budućnost web razvoja izgleda svijetla, s još moćnijim alatima i opcijama dostupnim programerima.
CSS i HTML
CSS i HTML su dva odvojena jezika koji se koriste za izradu web stranica. HTML je označni jezik koji se koristi za strukturiranje sadržaja na web stranici, dok se CSS koristi za stiliziranje i oblikovanje sadržaja. U ovom ćemo odjeljku istražiti kako CSS i HTML zajedno rade na stvaranju vizualno privlačnih web stranica.
HTML elementi
HTML elementi su građevni blokovi web stranice. To su oznake koje definiraju strukturu i sadržaj web stranice. HTML elementi mogu se koristiti za stvaranje naslova, odlomaka, popisa, slika i više. Svaki HTML element ima vlastiti skup svojstava koja se mogu stilizirati pomoću CSS-a.
Označni jezik
HTML je označni jezik koji koristi oznake za definiranje strukture web stranice. Oznake se koriste za ograđivanje sadržaja i davanje njegovog značenja. Na primjer, <h1> oznaka se koristi za definiranje naslova najviše razine, dok se oznaka <p> oznaka se koristi za definiranje odlomka. HTML je moćan jezik koji se može koristiti za stvaranje složenih web stranica.
linkovi
Veze su bitan dio svake web stranice. Korisnicima omogućuju navigaciju između stranica i pristup vanjskim resursima. Veze se stvaraju pomoću <a> oznaku i može se oblikovati pomoću CSS-a. Veze se također mogu koristiti za stvaranje knjižnih oznaka unutar web stranice, omogućujući korisnicima da brzo skoče na određene dijelove stranice.
Općenito, CSS i HTML zajedno stvaraju vizualno privlačne web stranice. HTML definira strukturu i sadržaj web stranice, dok se CSS koristi za stiliziranje i oblikovanje tog sadržaja. Korištenjem HTML-a i CSS-a zajedno, web programeri mogu stvoriti lijepe i funkcionalne web stranice koje su jednostavne za korištenje i navigaciju.
CSS i web dizajn
CSS igra ključnu ulogu u web dizajnu. Programerima omogućuje kontrolu vizualnog izgleda web stranica i osiguravanje dosljednosti na više stranica. U ovom odjeljku istražit ćemo kako CSS utječe na različite aspekte web dizajna, uključujući izgled, tipografiju, boju i slike.
Raspored
CSS omogućuje web programerima kontrolu izgleda web stranica. Korištenjem CSS-a programeri mogu pozicionirati različite elemente na web stranici, kontrolirati veličinu tih elemenata i osigurati dosljedan prikaz na različitim uređajima. CSS također omogućuje razvojnim programerima stvaranje responzivnih dizajna koji se prilagođavaju različitim veličinama zaslona, osiguravajući da su web stranice dostupne na svim uređajima.
Tipografija
CSS programerima pruža širok raspon opcija za kontrolu tipografije web stranica. Pomoću CSS-a programeri mogu kontrolirati obitelj fontova, veličinu fonta, visinu retka i razmak između slova teksta na web stranici. Također mogu kontrolirati poravnanje teksta i razmak između različitih elemenata na web stranici.
Boja
CSS programerima omogućuje kontrolu boja koje se koriste na web stranici. Pomoću CSS-a programeri mogu postaviti boju pozadine web stranice, promijeniti boju teksta i kontrolirati boju različitih elemenata na web stranici. CSS također pruža programerima mogućnost stvaranja gradijenata i drugih složenih efekata boja.
Slike
CSS programerima omogućuje kontrolu prikaza slika na web stranici. Pomoću CSS-a programeri mogu kontrolirati veličinu slika, postaviti položaj slika na web stranici i kontrolirati neprozirnost slika. CSS također pruža programerima mogućnost stvaranja složenih slikovnih efekata, kao što su sjene i granice.
Zaključno, CSS je bitan alat za web dizajn. Programerima omogućuje kontrolu izgleda, tipografije, boje i slika koje se koriste na web stranici, osiguravajući da su web stranice vizualno privlačne i dostupne na svim uređajima.
CSS i web razvoj
CSS, ili Cascading Style Sheets, bitan je alat za web programere. Omogućuje im kontrolu prezentacije HTML i XML dokumenata, uključujući izgled, boje, fontove i još mnogo toga.
Vanjski CSS
Vanjski CSS je zasebna datoteka koja sadrži sve stilove koje koristi web stranica. Ova je datoteka povezana s HTML dokumentom pomoću označiti. Vanjski CSS izvrstan je način da se prezentacija odvoji od sadržaja, što olakšava održavanje i ažuriranje web stranice. Također omogućuje dosljednost na više stranica na web-mjestu.
Interni CSS
Interni CSS definiran je unutar HTML dokumenta pomoću tag. It is useful when you want to apply styles to a single page or a specific section of a website. However, it can make the HTML document cluttered and harder to read.
Ugrađeni CSS
Inline CSS definiran je unutar HTML elementa pomoću atributa style. Korisno je kada želite primijeniti stilove na određeni element. Međutim, to može učiniti HTML dokument pretrpanim i težim za čitanje. Ne preporučuje se korištenje ugrađenog CSS-a za stiliziranje velikih razmjera.
Upiti za medije
Medijski upiti koriste se za primjenu različitih stilova na temelju veličine zaslona uređaja. To omogućuje web stranici da bude responzivna i prilagođena različitim uređajima, kao što su telefoni, tableti i stolna računala. Medijski upiti mogu se definirati u vanjskoj CSS datoteci ili unutar HTML dokumenta.
Zaključno, CSS je bitan alat za web programere. Omogućuje odvajanje prezentacije i sadržaja, što olakšava održavanje i ažuriranje web stranice. Vanjski CSS preporučuje se za stiliziranje velikih razmjera, dok su unutarnji i ugrađeni CSS korisni za stiliziranje manjih razmjera. Medijski upiti omogućuju web stranici da bude responzivna i prilagođena različitim uređajima.
CSS prednosti
CSS je moćan alat koji web programerima omogućuje stvaranje vizualno privlačnih i dosljednih web stranica. Evo nekih od prednosti korištenja CSS-a:
Ubrzati
Jedna od glavnih prednosti CSS-a je njegova brzina. CSS programerima omogućuje odvajanje dizajna i izgleda web stranice od njezinog sadržaja. Ovo odvajanje može značajno smanjiti vrijeme učitavanja web stranice, budući da preglednik ne mora preuzimati više stilskih listova za svaku stranicu. Umjesto toga, preglednik sprema stilsku tablicu koja se može koristiti na više stranica, što rezultira bržim učitavanjem stranice.
Dosljednost
CSS pomaže programerima u stvaranju dosljednog dizajna na više web stranica. Korištenjem jednog lista stilova, programeri mogu osigurati da sve stranice na web stranici imaju dosljedan izgled i dojam. Ova dosljednost može pomoći u poboljšanju korisničkog iskustva, budući da će korisnici moći lakše navigirati web-stranicom i brzo pronaći potrebne informacije.
održavanje
CSS olakšava održavanje i ažuriranje web stranice. Odvajanjem dizajna i izgleda web stranice od njezinog sadržaja, programeri mogu mijenjati dizajn bez utjecaja na sadržaj. To znači da ako je potrebno napraviti promjenu u dizajnu web stranice, to se može učiniti brzo i jednostavno bez potrebe za prepisivanjem cijele web stranice.
CSS također olakšava izmjene u izgledu web stranice. Korištenjem CSS-a programeri mogu stvoriti višekratno upotrebljive stilove koji se mogu primijeniti na više elemenata na web stranici. To znači da ako je potrebno promijeniti izgled web stranice, to se može učiniti brzo i jednostavno ažuriranjem CSS lista stilova.
Zaključno, CSS je moćan alat koji nudi mnoge prednosti web programerima. Korištenjem CSS-a programeri mogu stvoriti vizualno privlačne i dosljedne web-stranice koje se brzo učitavaju i lako ih je održavati i ažurirati.
CSS reference
Kada radite s CSS-om, bitno je imati pouzdanu referencu koju možete konzultirati kada naiđete na nepoznata svojstva ili sintaksu. Srećom, postoji mnogo dostupnih resursa koji vam mogu pomoći da razumijete i učinkovito koristite CSS.
W3C
World Wide Web Consortium (W3C) primarna je organizacija odgovorna za razvoj i održavanje web standarda, uključujući CSS. Njihova web stranica nudi opsežnu CSS referencu koja pokriva sve aspekte jezika, od osnovne sintakse do naprednih tehnika izgleda. Referenca je organizirana po svojstvima i uključuje primjere kako koristiti svaku od njih.
Osim referenci, web stranica W3C također nudi mnoštvo drugih resursa za učenje i korištenje CSS-a, uključujući vodiče, specifikacije i najbolje prakse. Ako ste ozbiljni u svladavanju CSS-a, web stranica W3C bitan je resurs.
moduli
CSS je modularan jezik, što znači da se sastoji od zasebnih modula koji se mogu kombinirati kako bi se stvorila potpuna lista stilova. Svaki modul fokusiran je na određeno područje CSS-a, kao što je izgled, tipografija ili boja. Razbijanjem CSS-a na module, lakše ga je razumjeti i učinkovito koristiti.
Web stranica W3C nudi popis svih CSS modula, zajedno s poveznicama na njihove specifikacije. Neki od najvažnijih modula uključuju:
- CSS selektori: Definira sintaksu za odabir elemenata u dokumentu.
- Model CSS okvira: opisuje kako su elementi raspoređeni na stranici.
- CSS Grid Layout: Pruža moćan sustav za stvaranje složenih izgleda.
- CSS transformacije: Omogućuje transformaciju oblika, veličine i položaja elemenata.
- CSS animacije: Omogućuje stvaranje animacija i prijelaza pomoću CSS-a.
Upoznavanjem s raznim CSS modulima možete postati vještiji CSS programer i stvarati naprednije i sofisticiranije dizajne.
Zaključno, imati pouzdanu CSS referencu ključno je za svakog programera koji radi s CSS-om. Web stranica W3C pruža opsežne reference, zajedno s mnogim drugim resursima, koji će vam pomoći da svladate CSS. Osim toga, razumijevanje različitih CSS modula može vam pomoći u stvaranju naprednijih i sofisticiranijih dizajna.
CSS animacije
CSS animacije moćan su alat koji razvojnim programerima omogućuje stvaranje dinamičnih i privlačnih korisničkih iskustava na njihovim web stranicama. Animacije se mogu koristiti za privlačenje pozornosti na određene elemente na stranici, pružanje povratnih informacija korisnicima ili jednostavno dodavanje vizualnog interesa.
Da biste izradili CSS animaciju, prvo trebate odabrati element koji želite animirati, a zatim definirati animaciju koristeći CSS svojstva. The animation Svojstvo se koristi za definiranje animacije i ima nekoliko podsvojstava koja vam omogućuju kontrolu vremena, trajanja i drugih detalja animacije.
Jedna važna stvar koju treba imati na umu je da animacije mogu zahtijevati puno resursa, stoga je važno koristiti ih štedljivo i pažljivo. Animacije bi trebale poboljšati korisničko iskustvo, a ne umanjiti ga, stoga je važno temeljito ih testirati i razmotriti kako će utjecati na ukupnu izvedbu vaše web stranice.
Evo nekih ključnih CSS svojstava koja možete koristiti za stvaranje animacija:
ime-animacije
Ovo svojstvo definira naziv animacije koju želite primijeniti na element. Možete definirati više animacija i primijeniti ih na različite elemente na svojoj stranici.
animacija-trajanje
Ovo svojstvo definira duljinu vremena potrebnog za dovršetak animacije. Možete odrediti trajanje u sekundama ili milisekundama.
funkcija mjerenja vremena animacije
Ovo svojstvo definira funkciju mjerenja vremena koja će se koristiti za kontrolu brzine animacije. Postoji nekoliko unaprijed definiranih funkcija mjerenja vremena koje možete koristiti, kao što su linear, ease-ini ease-out, ili možete izraditi vlastite prilagođene funkcije za mjerenje vremena.
animacija-odgoda
Ovo svojstvo definira količinu vremena koje će proteći prije početka animacije. Ovo može biti korisno ako želite vremenski rasporediti više animacija na stranici.
brojanje ponavljanja animacije
Ovo svojstvo definira koliko će se puta animacija ponoviti. Možete navesti određeni broj ponavljanja ili možete koristiti vrijednost infinite za stvaranje animacije koja se ponavlja unedogled.
animacija-režija
Ovo svojstvo definira smjer u kojem će se animacija reproducirati. Možete odrediti normal za animaciju naprijed, reverse za animaciju unatrag, ili alternate za izmjenu animacija naprijed i natrag.
animation-fill-mode
Ovo svojstvo definira stiliziranje elementa koji se animira prije i poslije animacije. Možete odrediti none ostaviti stil elementa nepromijenjenim, forwards da zadrži stil elementa na kraju animacije, ili backwards za primjenu stila elementa na početku animacije.
animacija-play-state
Ovo svojstvo definira da li se animacija reproducira ili je pauzirana. Možete koristiti vrijednost paused za pauziranje animacije ili running za početak ili nastavak.
Zaključno, CSS animacije su moćan alat koji se može koristiti za stvaranje dinamičnih i privlačnih korisničkih iskustava na vašoj web stranici. Međutim, važno ih je koristiti štedljivo i pažljivo jer mogu zahtijevati velike resurse i utjecati na ukupnu izvedbu vaše web stranice. Razumijevanjem ključnih CSS svojstava koja se koriste za stvaranje animacija, možete izraditi animacije koje poboljšavaju korisničko iskustvo i dodaju vizualni interes vašoj web stranici.
Više čitanja
CSS (Cascading Style Sheets) je jezik koji se koristi za opisivanje prikaza označnih jezika kao što su HTML i XML. Koristi se za stiliziranje i raspored web stranica mijenjanjem fonta, boje, veličine i razmaka sadržaja, dijeljenjem u više stupaca ili dodavanjem animacija i drugih ukrasnih značajki. CSS štedi puno posla i može kontrolirati izgled više web stranica odjednom. (izvor: MDN web dokumenti, W3Schools)
Povezani uvjeti razvoja web stranica