CodeWilderness
Laptop with CSS on screen
Singing Parrot as author
Radošević Dejan

CSS - Struktura

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.

  1. 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.

  1. 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.

  1. 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.

  1. 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.

  1. 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.

  1. Interakcije

Interaktivni elementi kao što su dugmad, forme, i animirani efekti doprinose angažovanju korisnika i olakšavaju navigaciju kroz web stranicu.

  1. 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.

  1. 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.

selector {
  /* Deklaracija */
  /* svojstvo: vrijednost; */
  property: "value";
}

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.

/* CSS reset upotrebom univerzalnog selektora */
* {
  margin: 0;
  padding: 0;
  border: 0;
  box-sizing: inherit;
}

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.

/* Stilizovanje linka koji nije posjećen */
element:link {
  /* style */
}
/* Stilizovanje posjećenog linka */
element:visited {
  /* style */
}
/* Stil koji se aktivira kada korisnik pređe mišem preko linka  */
element:hover {
  /* style */
}
/* Stil koji se primjenjuje kada korisnik klikne na link  */
element:active {
  /* style */
}

: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.

input:focus {
  /* style */
}

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:

/* Selektovanje svakog child elementa koji zadovoljava n parametar. N može biti broj, ključna riječ ili formula (an + b) */
element:nth-child(n)
    /* selektovanje svakog drugog child elementa */
    element:nth-child(2n) {
  /* style */
}
/* počevši od trećeg elementa selektuj svaki drugi sledeći element */
element:nth-child(2n + 3) {
  /* style */
}
/* selektuj sve elemente sa neparnim indeksom, even za parne */
element:nth-child(odd) {
  /* style */
}
element:nth-child(even) {
  /* style */
}
 
/* :first-child i :last-child selektuju prvi i poslednji element unutar roditeljskog elementa */
div:first-child {
  /* style */
}
 
/* :nth-of-type(n) cilja elemente sa specifičnim tipom, baziranim na njihovoj poziciji unutar parent elementa */
div p:nth-of-type(2n) {
  /* style */
} /* selektuj svaki drugi p element unutar div 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.

/* Primijeni stil na sve dive elemente osim na onaj sa klasom .special */
div:not(.special) {
  /* style */
}

: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.

/* Elementi div, section i header će imati širinu 100% */
:is(div, section, header) {
  width: 100%;
}
 
/* Kombinovanje sa drugim selektorima. Stilizovanje button elementa unutar nav elementa */
nav :is(button) {
  padding: 20px 40px;
}

: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.

/* Dodaje gornju marginu na section element bez uticaja na specifičnost */
:where(section) {
  margin-top: 50px;
}

Pseudo elementi

Pseudo elementi omogućavaju kreiranje i stilizaciju dijela elemenata koji ne postoje u HTML strukturi. Označavaju se sa dvije tačke.

element::before {
  /* content svojstvo je obavezno */
  content: "";
  width: 50px;
  height: 50px;
  margin: auto;
}
 
element::after {
  content: "____";
  color: "blue";
}
p::first-line {
  font-weight: bold;
}
 
p::first-letter {
  font-size: 30px;
}
input::placeholder {
  color: slategray;
}

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:

<style>
  p {
    color: red;
  }
  h1 {
    border: 1px solid black;
  }
</style>
 
<p>Paragraph <em>value</em></p>
<!-- Riječ unutar oznake em biće obojena crveno pošto je oznaka em naslijedila vrijednost od p elementa. Neće dobiti početnu vrijednost svojstva (vrednost koja se koristi za osnovni element kada stranica ne definiše boju)-->
<h1>Heading <em>value</em></h1>
<!-- Em ne nasleđuje border svojstvo -->