CSS - Gradivni blokovi

Gradivni blokovi su osnovne komponente CSS-a koje omogućavaju organizaciju i primjenu stilova na HTML elemente. Svaki od gradivnih blokova ima važnu funkciju u oblikovanju konačnog dizajna web stranice.

Glavne komponente CSS-a

1. Selektori

Selektori su ključne komponente CSS-a koje se koriste za određivanje na koje HTML elemente će se primijeniti određeni stilovi. Postoje različiti tipovi selektora, kao što su element selektori, klasni selektori, ID selektori, pseudo-selektori i mnogi drugi, koji omogućavaju precizno određivanje ciljanih elemenata.

/* element selektor */
div {
}
 
/* class selektor */
.className {
}
 
/* id selektor */
#idName {
}
 
/* selektovanje atributa */
p[title] {
}
div[class="block"] {
}
 
/* pseudo klase - selector:pseudoClass */
a:hover {
}
 
/* pseudo elelement - selector::pseudoElement */
div::after {
}

2. Deklaracije i svojstva

Deklaracije definišu konkretne stilove koji će se primijeniti na odabrane HTML elemente. Svaka deklaracija se sastoji od svojstva (npr. color, font-size) i vrijednosti (npr. blue, 16px), čime se definiše izgled i ponašanje elemenata. Svojstva i vrijednosti određuju vizuelni izgled i ponašanje izabranog elementa.

/* deklaracija */
width: 100%; /* širina od 100% u odnosu na roditeljski element */

3. Box model

Box model je ključna komponenta CSS-a koja definiše način na koji se prostor oko HTML elementa organizuje. Box model se sastoji od sadržaja elementa, padding-a, border-a i margin-e, što omogućava precizno upravljanje prostorom oko elemenata.

4. Pozicioniranje

Pozicioniranje u CSS-u omogućava kontrolu rasporeda i pozicije HTML elemenata na web stranici. Glavne tehnike pozicioniranja uključuju static, relative, absolute i fixed poziciju, kao i float i flexbox modele.

5. Media Queries

Media queries omogućavaju prilagođavanje stilova na osnovu karakteristika uređaja, kao što su veličina ekrana, orijentacija i rezolucija. Ovo je ključno za postizanje responsivnog dizajna web stranica.

Specifičnost i kaskada

Specifičnost u CSS-u se može okarakterisati kao ključni koncept koji određuje redosled primjene stilova na HTML elemente kada postoji više stilova koji se međusobno sukobljavaju.

Svaki selektor ima određenu specifičnost koja se koristi za rješavanje sukoba između stilova i određivanje konačnog izgleda elemenata na web stranici.

Kako se specifičnost primjenjuje

Kaskada se odnosi na način upravljanja primjenom CSS stila na HTML, kao i na to kako se razrješavaju određeni konflikti. U svom najosnovnijem obliku, ukazuje na to da je redosled u kome se CSS pravila implementiraju važan.

p {
  font-size: 33px;
}
p {
  /* Definisani stil posjeduje veću specifičnost od prethodnog
    jer dolazi poslije njega */
  font-size: 21px;
}