Struktura CSS-a je ključna za organizaciju, definisanje i primjenu stilova na web stranicama. Razumijevanje ove strukture omogućava developerima da efikasno koriste CSS i kreiraju vizuelno atraktivne i funkcionalne web stranice.
Aspekti web stranice
Kada je riječ o dizajniranju web stranica, postoji nekoliko ključnih aspekata koji igraju ključnu ulogu u stvaranju vizuelno atraktivnih i funkcionalnih korisničkih iskustava.
- Izgled i struktura stranice
Izgled web stranice se odnosi na način kako su elementi raspoređeni i organizovani na stranici. Uključuje: dimenzije, pozicioniranje, prikaz elemenata.
- Tipografija
Tipografija igra ulogu u čitljivosti i estetici web stranice. Pravilno odabrani fontovi, veličine fonta, prored i boje teksta doprinose jasnoći i privlačnosti sadržaja.
- Pozadina
Pozadina web stranice može biti jednobojna, sa teksturom, ili sadržati slike i sl. Pravilno odabrana pozadina doprinosi atmosferi i stilu web stranice.
- Ivice
Ivice elemenata na web stranici mogu biti ravne, zaobljene, ili stilizovane na druge načine. Stilizovane ivice doprinose estetici i vizuelnom identitetu web stranice.
- Linkovi (veze)
Linkovi predstavljaju ključne elemente interakcije na web stranici. Boje, podvučenost i stilizacija linkova utiču na prepoznatljivost i upotrebljivost web stranice.
- Interakcije
Interaktivni elementi kao što su dugmad, forme, i animirani efekti doprinose angažovanju korisnika i olakšavaju navigaciju kroz web stranicu.
- Animacije i prelazi
Dozirana upotreba animacija i prelaza može unaprijediti korisničko iskustvo i dodati dinamičnost web stranici, dok pretjerana upotreba može ometati funkcionalnost.
- Responzivnost
Reaponsivni dizajn omogućava da se web stranica prilagodi različitim veličinama ekrana i uređajima, čime se obezbjeđuje konzistentno korisničko iskustvo bez obzira na korišćeni uređaj.
Selektori i deklaracije (opširnije)
Selektori i deklaracije su ključne CSS komponente koje ciljaju i stilizuju određene HTML elemente. Deklaracije se koriste za davanje stila određenim elementima. Svaka deklaracija ima dva dijela: svojstvo i vrijednost koje zajedno sa selektorom čine blok.
Koristeći selektore, identifikujemo određene elemente u HTML sadržaju koje treba da ciljamo. Osnovni selektori omogućavaju da se HTML elementi koriste u dokumentu zavisno od njihovih eksplicitnih pravila za prikazivanje.
Pored osnovnih, postoje i dodatne metode selektovanja elemenata.
* - univerzalni selektor
Univerzalni selektor cilja na sve elemente. Obično ovaj selektor treba izbjegavati osim ako nije apsolutno neophodno. Može se kombinovati sa drugim selektorima. Jedna upotreba je da ovaj selektor primjenjuje deklaracije na podređene elemente roditeljskog elementa, čak i ako to svojstvo nije naslijeđeno. Najčešće se koristi kada vršimo CSS resetovanje ili normalizaciju.
Pseudo klase
Riječ je o specifičnom stanju izabranog elementa. Koristeći pseudo klase, možemo izabrati elemente na osnovu informacija koje nijesu dostupne u HTML dokumentu. Informacije obično uključuju metapodatke ili stanje elementa.
Anchor Pseudo Klasa
Kada želimo da promijenimo status veze kao odgovor na interakciju korisnika, koristimo anchor pseudo-klase.
:focus
Kada element dobije pažnju, primjenjuju se stilovi. Ovaj tip selekcije se obično pokreće kada korisnik dodirne, klikne ili odabere element pomoću tastera Tab na tastaturi.
Stil baziran na poziciji unutar parent elementa
Stilizovanje elementa u zavisnosti od njihove pozicije unutar roditeljskog elementa je jaka tehnika za kreiranje vizuelno privlačnih i dobro organizovanih dizajna. Ovo se često postiže upotrebom pseudo-klasa kao što su :first-child, :last-child, :nth-child() i :nth-of-type(). Ajde sad da pogledamo kako da stilizujemo elemente na osnovu toga gdje se nalaze unutar nadređenog elementa:
Isključivanje elemenata iz selekcije
Izuzimanje stavki iz selekcije vam omogućava da fino podesite svoje stilove i primijenite određena pravila na kolekciju elemenata dok isključujete neke od tih elemenata. Da bi se to postiglo, koristi se :not() pseudo-klasa, koja se može koristiti sa drugim selektorima za generisanje preciznih efekata stilizovanja. Pseudo-klasa :not() omogućava da izaberete komponente koje se ne podudaraju sa datim selektorom. Ovo je veoma korisno kada je potrebno primijeniti stilove na grupu stavki izuzimajući pojedinačne elemente iz te grupe.
:is
Pseudo-klasa :is(), uobičajeno poznata kao pseudo-klasa “podudara se sa”, je moćna CSS funkcija koja vam omogućava da primenite stilove na komponente koje odgovaraju bilo kojoj listi selektora.
:where
Pseudo-klasa :where() je CSS selektor koji omogućava selektovanje elemenata zavisnosti od kriterijuma, a da pritom selektor bude specifičan. Posebno je koristan kada je potrebno primijeniti stilove na više selektora, a da njihova specifičnost ostane ista.
Pseudo elementi
Pseudo elementi omogućavaju kreiranje i stilizaciju dijela elemenata koji ne postoje u HTML strukturi. Označavaju se sa dvije tačke.
- ::before i ::after - omogućavaju ubacivanje sadržaja prije ili poslije sadržaja elementa.
- ::first-line i ::first-letter - za stilizovanje prvog reda ili prvog slova teksta unutar elementa bloka.
- ::placeholder - omogućava stilizovanje čuvara mejsta unutar input i textarea polja.
Nasleđivanje
Nasleđivanje se odnosi na prenošenje svojstava i vrijednosti stilova sa roditeljskog elementa na potomke.
Na primer, ako postavimo svojstva color i font-family za div element, njegove podređene komponente će naslijediti isto. U CSS-u, četiri univerzalne vrijednosti svojstva regulišu nasleđivanje. Svako CSS svojstvo može imati sledeće vrijednosti:
-
inherit - vrijednost svojstva podređenog elementa biće ista kao i roditeljskog elementa.
-
initial - predstavlja podrazumijevanu vrjednost nekog svojstva. Upotreba inicijalne vrijednosti određuje se na osnovu toga da li je svojstvo nasleđeno ili ne:
-
unset - resetuje svojstvo na podrazumijevanu vrijednost. Ako je svojstvo implicitno naslijeđeno, ponašaće se kao inherit, u suprotnom će se ponašati kao initial.
-
return - u većini slučajeva, ponaša se slično kao i unset, iako će vratiti svojstvo na podrazumijevani stil pretraživača, a ne na podrazumijevana podešavanja koja su dodijeljena tom svojstvu.
-