PricingLoginStart free
CSS Academy · Ders

Kalıtım ve all Özelliği

CSS kalıtım kurallarını anlayın ve devralınan stilleri sıfırlamak için all özelliğini kullanın.

4. ders / 413 adım

Kalıtım ve all Özelliği, CoddyKit'te ücretsiz bir CSS Academy dersidir. Bu, 4 dersinin 4. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, CSS Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. CSS Academy kursu toplamda 4 dersten oluşur.

Kalıtım Nedir?

Bazı CSS özellikleri, hesaplanmış değerlerini alt öğelere otomatik olarak aktarır. Buna kalıtım denir. Bu, bir bileşendeki her öğe için aynı kuralı yazma gereğini ortadan kaldırır.

Miras Alınan Özellikler

Genellikle miras alınanlar: tipografi ve metin özellikleri:

  • font-family, font-size, font-weight, font-style
  • color
  • line-height
  • letter-spacing
  • text-align
  • visibility
  • CSS özel özellikleri

Miras Alınmayan Özellikler

Genellikle miras alınmayanlar: kutu modeli ve yerleşim özellikleri:

  • margin, padding, border
  • width, height
  • background
  • display, position
  • box-shadow, transform

inherit Anahtar Sözcüğü

inherit anahtar sözcüğüyle kalıtımı açıkça zorlayın; bu, varsayılan olarak yazı tipini miras almayan form öğeleri için kullanışlıdır:

<div style="font-family: Georgia, serif; font-size: 20px; color: darkred;">
  <input type="text" placeholder="Inherits font/color" />
  <button>Button inherits too</button>
  <textarea>Inherits</textarea>
  <select><option>Option A</option></select>
</div>

initial Anahtar Sözcüğü

initial anahtar sözcüğü, bir özelliği CSS belirtiminde tanımlanan tarayıcının varsayılan ilk değerine sıfırlar; kalıtımı ve kullanıcı aracısı stillerini yok sayar.

<div style="font-size: 30px; color: tomato;">
  <p>Normal text inherits large tomato-colored style from its parent.</p>
  <p class="reset-text">This text resets to browser defaults (initial) — medium size, black color.</p>
</div>

unset Anahtar Sözcüğü

unset bağlama duyarlıdır:

  • Miras alınan özelliklerde: inherit gibi davranır
  • Miras alınmayan özelliklerde: initial gibi davranır

Bir özelliği doğal durumuna etkili bir şekilde "temizler".

<div style="color: tomato;">
  <p style="margin: 40px;">Normal paragraph — keeps its large margin, inherits tomato color.</p>
  <p class="clear-styles" style="margin: 40px;">Unset paragraph — color unset (still inherits tomato), margin unset (resets to 0).</p>
</div>

revert Anahtar Sözcüğü

revert, tarayıcının kullanıcı aracısı stil sayfasındaki değere geri döner; yazar stilleri olmadan tarayıcının varsayılan olarak göstereceği durumu geri yükler. Gömülü üçüncü taraf bileşenleri için kullanışlıdır.

<div style="color: tomato; font-family: Georgia, serif;">
  Ancestor style is tomato serif text.
  <div class="widget">This widget uses "all: revert" to fall back to the browser's user-agent defaults, undoing author styles.</div>
</div>

all Özelliği

all özelliği, direction ve unicode-bidi dışındaki her CSS özelliğine aynı anda bir anahtar sözcük uygulayan bir kısaltmadır.

<div style="color: tomato; font-family: Georgia, serif; padding: 12px; background: #eee;">
  <div class="isolated-widget">all: initial — resets everything to spec defaults</div>
  <div class="scoped-component">all: revert — resets to browser UA defaults</div>
</div>

all: initial ile Pratik Kullanım

Global veya üst öğe stillerinden etkilenmeyen, tamamen yalıtılmış bir bileşen oluşturmanız gerektiğinde all: initial kullanın:

<div style="color: tomato; font-family: Georgia, serif; font-size: 28px;">
  Page context — large serif tomato text
  <div class="email-template-preview">Email preview — isolated with all: initial, then restyled with Arial 14px.</div>
</div>

all: unset Deseni

İlgili tüm özellikleri bilmenize gerek kalmadan özel düğmeler için tarayıcı düğmesi stillerini kaldırın:

<button class="custom-btn">Custom button styled from scratch using all: unset</button>
<button>Default browser button for comparison</button>

Kalıtım ve Özel Özellikler

CSS özel özellikleri varsayılan olarak kalıtılır. Bunları güçlü kılan da budur — :root üzerinde ayarlanan bir değişken her yerde kullanılabilir. Bir özel özelliğin kalıtılmamasını sağlamak için @property { inherits: false } kullanın.

Hızlı Kontrol

Bir özelliği, CSS belirtimindeki başlangıç değeri yerine tarayıcının kullanıcı aracısı varsayılanına sıfırlayan anahtar sözcük hangisidir?

İnteraktif derste cevapla

Özet

Kalıtılan özellikler değerleri alt öğelere aktarır; kalıtılmayan özellikler aktarmaz. inherit, initial, unset ve revert anahtar sözcükleri açık denetim sağlar. all özelliği tüm özellikleri tek seferde sıfırlar — yalıtılmış bileşenler ve özel form öğeleri için güçlü bir araçtır.

Başlamak ücretsiz

Yapay zeka eğitmeniyle CSS öğren — ücretsiz

Tarayıcında gerçek kod yaz ve çalıştır, 7/24 yapay zeka eğitmeninden anında yardım al; web'de ya da uygulamada kaldığın yerden devam et.

Kurslar
40
Dersler
159
Ücretsiz öğrenmeye başlaTüm kursu görüntüle

Sıkça Sorulan Sorular

“Kalıtım ve all Özelliği” dersi ücretsiz mi?

Evet — “Kalıtım ve all Özelliği” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve CSS Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. CSS Academy kursu toplamda 4 dersten oluşur.

“Kalıtım ve all Özelliği” dersinde ne öğreneceğim?

CSS kalıtım kurallarını anlayın ve devralınan stilleri sıfırlamak için all özelliğini kullanın. CSS Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

CSS Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te CSS Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 4. dersidir.

“Kalıtım ve all Özelliği” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu CSS Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her CSS Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

  1. Özgüllük Hesaplama: Satır İçi Stil, ID, Class, Öge
  2. Kaskat: Kaynak ve Sıra
  3. !important: Ne Zaman ve Neden Kullanılmamalı
  4. Kalıtım ve all Özelliği
← CSS Academy Sayfasına Dön