Opšte vrednosti CSS atributa

Kao što znamo, svaki atribut ima specifične, dozvoljene vrednosti koje mu se mogu zadati. Jeste, veliki broj atributa prihvata metrike kao vrednosti, ali npr. vrednost bold možemo zadati samo u font-weight - u nekom drugom atributu ova vrednost nema smisla.

Međutim, u CSS-u postoje neke ključne reči koje se mogu zadati kao vrednosti u svim atributima. To su vrednosti:

• inherit - nasleđivanje od nadređenog elementa
• initial - poništavanje na CSS default vrednost
• unset - poništavanje na default osim ako nije definisano nasleđivanje
• revert - vraćanje na osnovni stil web čitača

Da krenemo redom.

Inherit

Ovo je verovatno najpoznatija od svih generalnih vrednosti. Njeno značenje je da se vrednost atributa nasleđuje od nadređenog elementa. Čak iako nadređenom elementu nije eksplicitno zadata, uzima se tzv. computed, odnosno vrednost koju web browser "proračuna" za nadređeni element (svaki atribut svakog elementa uvek na kraju dobija "nešto" kao vrednost - bez obzira da li je odredio programer ili sam web browser).

Pazite - vrednost koja se nasleđuje je uvek apsolutna, ili bolje reći rezultujuća (computed). Dakle, ako nadređeni elemenat ima zadatu procentualnu ili relativnu vrednost, nasleđena vrednost neće ponovo biti relativna. Dakle, ako je vrednost u nadređenom elementu podešena na npr. 70%, inherit neće dati opet 70%, pa da bude "70% od 70%", već će vrednost biti istovetna rezultujućoj vrednosti nadređenog elementa.

<style>
  body {
    font-size: 16pt;
  }
  div {
    border: 1px solid orange;
    background-color: #ffc;
    font-size: 70%;
  }
  .prvi {
    font-size: inherit;
  }
  .drugi {
    font-size: 70%;
  }
</style>

  <p>Pasus van bloka sa originalnom veličinom teksta.</p>
  <div>
    <p>Običan pasus unutar bloka - veličina teksta je 70% od veličine na stranici.</p>
    <p class="prvi">Pasus sa nasleđenom veličinom teksta - ista kao za običan tekst u bloku.</p>
    <p class="drugi">Pasus sa veličinom teksta od opet 70% - umanjeno u odnosu na tekst bloka.</p>
  </div>

Initial

Za svaki CSS atribut postoji unapred određena vrednost (default). To je vrednost koja je podrazumevana za atribut kada ništa nije zadato. Upravo to radi vrednost initial - zadaje atributu njegovu osnovnu vrednost definisanu po CSS standardu.

E, sad, postoji jedna kvaka - predodređena vrednost atributa nije uvek ispoštovana u web čitačima. To znači da web čitači imaju neki osnovni stil kojim se prikazuju elementi na HTML stranici čak i kada ne postoji CSS. Evo očiglednog primera - default vrednost za atribut margin je 0 - znači trebalo bi da elementi sami po sebi nemaju marginu. Međutim, i kada ništa ne podesimo u CSS-u, pasusi i naslovi imaju margine. Evo još nekih dobro poznatih primera:

• naslovi i podnaslovi se prikazuju većim fontom i podebljano
• linkovi se prikazuju plavom bojom i podvučeno, a posećeni linkovi su ljubičasti
• sekcije, naslovi, pasusi i <div> elementi se prikazuju kao blokovi
• <b> i <strong> elementi se prikazuju podebljano
• <i> i <em> elementi se prikazuju kurzivno
• <mark> elemenat se prikazuje sa žutom pozadinom

Kada zadamo vrednost initial tada atribut obavezno dobija vrednost definisanu standardom, a ne ono što je predodređeno u web čitaču. Dakle, display bi uvek dobio vrednost inline, margin bi uvek bio sveden na 0.

<style>
  div {
    display: initial;
  }
</style>

  <div>Ovo je prvi blok.</div>
  <div>Ovo je drugi blok. Normalno se prikazuju jedan ispod drugog.</div>

Unset

Treća "generalna" vrednost koja se može zadati svakom atributu je unset, koja funkconiše kao kombinacija initial i inherit. Slično kao initial, "resetuje" atribut uz jednu značajnu razliku - za sve elemente podešava default vrednost po CSS standardu, osim za one za koje web čitač podrazumeva nasleđenu vrednost.

O čemu se radi? Do sada smo shvatili da svaki atribut ima default vrednost definisanu standardom. Takođe smo shvatili i da web čitači mogu HTML elementima da zadaju neko osnovno formatiranje. Takođe, saznali smo na početku ovog teksta da se vrednosti mogu naslediti od nadređenog elementa, ako se atributu zada vrednost inherit.

Sada treba da naučimo još jednu stvar - neki CSS atributi imaju definisano nasleđivanje. Dakle, kod tih atributa, bez obzira kakva im je default CSS vrednost, oni će uvek inicijalno naslediti vrednost od nadređenog elementa, ako im se ne zada nešto drugo. Ovo je za te atribute u stvari toliko logično ponašanje, da bi nam verovatno bilo jako čudno da nije tako.

Da pomenemo neke - boja teksta color, atributi fonta (font, font-family, font-weight, ...), atributi teksta (text-align, text-decoration, text-shadow, ...), kontrola preloma i ispisa (word-wrap, letter-spacing, ...) - svi su oni inicijalno nasleđeni. Šta to znači? Razmislite - ako definišemo boju teksta za neki blok i unutar tog bloka imamo pasuse, logično je da tekst u tim pasusima bude one boje koja je definisana u nadređenom bloku, osim ako za pasuse ne zadamo drugu boju.

Sa druge strane, za neke atribute jednostavno nije normalno da inicijalno budu nasleđeni. Zamislite da napravite okvir oko bloka i da onda svi pasusi unutar bloka dobiju svaki svoj okvir. To bi se desilo ako bi border atributi inicijalno bili nasleđeni.

Znači - vrednost unset upravo radi tako da atributu postavlja default vrednost (kao da smo mu zadali initial), osim u slučaju da atribut inicijalno nasleđuje vrednost, kada se ponaša kao da smo mu zadali vrednost inherit.

<style>
  div {
    color: blue;
    border: 2px solid red;
  }
  p {
    color: green;
    border: 1px dashed orange;
  }
  .prvi {
    color: initial;
    border: initial;
  }
  .drugi {
    color: inherit;
    border: inherit;
  }
  .treci {
    color: unset;
    border: unset;
  }
</style>

  <div>
    <p>Ovo je sasvim običan pasus - boja pasusa je zelena a border isprekidan i narandžast.</p>
    <p class="prvi">Pasus klase PRVI sa INITIAL vrednostima - boja teksta i border su poništeni na CSS default.</p>
    <p class="drugi">Pasus klase DRUGI sa INHERIT vrednostima - boja i border su nasleđeni.</p>
    <p class="treci">Pasus klase TRECI sa UNSET vrednostima - boja je nasleđena, border poništen.</p>
  </div>

Revert

Konačno dolazimo do vrednosti revert, koja atributu vraća početnu vrednost, prema stilu web čitača za određeni element. To bi bio slučaj kada bi npr. atribut color: revert za linkove vratio plavu boju, kako je uobičajeno kad nije ništa zadato.