Bilmeniz Gereken Css Anahtar Kelimeleri

CSS'te tüm özelliklere atanan 4 değer vardır. Intial, inherit, unset, revert

Bilmeniz Gereken Css Anahtar Kelimeler

CSS'te tüm özelliklere atanan 4 değer vardır. 

• initial
• inherit
• unset
• revert

1- INTIAL(BAŞLANGIÇ)

intial değeri tarayıcıların atadığı başlangıç değerini ifade eder. Atandığı elemanın özelliğinin değerini tarayıcının belirlediği değere döndürür.

Tarayıcılar HTML elemanlarını yorumlarken belirli başlangıç değerleri kabul ederek yorumlar. Her tarayıcının kendine özel UA (User Agent Stil) stilleri vardır. CSS3 ile gelen initial değeri ile başlangıç değerine döndürebiliyoruz.

<div>
<p>Neos Yazılım Akademi</p>
<p>Neos Yazılım Akademi</p>
</div>

div{
  color:red;
}

div > p:first-child{
  color:initial;
}

 

 

Ekran Çıktısı

Neos Yazılım Akademi

Neos Yazılım Akademi

2- INHERIT

Inherit değeri ebeveyn elemanların alttaki elemanlara aktardığı değeri gösterir. Ebeveyn elemanda bir tanım yoksa revert gibi davranır. Atandığı elemanın özelliğinin değerini varsa ebeveyninde bulunan değere döndürür.

<div class="icerik">
   Neos Yazılım Akademi
  <div class="bilgi"> 
    Neos Yazılım Akademi
  </div>
</div>

.icerik {
  color:red;
}

.bilgi {
  border: inherit;
}

 

Ekran Çıktısı

Neos Yazılım Akademi

Neos Yazılım Akademi

3- UNSET (SIFIRLAMA)

Unset değeri atanan bir özellik eğer kalıtsal bir değer alıyorsa kalıtsal değerine döndürür, kalıtsal değeri yoksa başlangıç değerine döndüren bir kısayoldur.

<div class="dunya">
  <p class="turkiye">
    <span class="istanbul">
      <strong class="bakırköy">
        <button class="deneme button">Neos Yazılım Akademi</button></strong>
    </span>
    
  </p>
</div>

.dunya { color: red; font-size: 44px; margin: 40px;}
.turkiye { font-size: 32px; color: blue; }

.button {
  border: 3px solid red;
  background: yellow;
  font-size: 40px;
  color: pink;
  padding: 40px;
  display: block;
}

.deneme { all: unset; color: pink; }

Ekran Çıktısı

Neos Yazılım Akademi

4-REVERT(GERİ ALMA)

Bir elemana revert değeri atandığında geliştiricinin atadığı değerleri geri alır.

Unset ve Revert Değerlerinin Farkı:

Unset hem browser'ın hem de browser'ın hem de geliştiricinin atadığı değeri sıfırlarken, revert ise sadece geliştiricinin atamalarını sıfırlar.