Katmanlara Stil Ekleme
CSS kurallarını @layer bloklarını ve içe aktarılan stil sayfalarını kullanarak belirli katmanlara atayın.
Katmanlara Stil Ekleme, CoddyKit'te ücretsiz bir CSS Academy dersidir. Bu, 4 dersinin 2. 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.
Katmanlara Stil Eklemenin İki Yolu
Bir katmana stilleri doğrudan (bir @layer bloğunun içinde) veya @import aracılığıyla (içe aktarılan bir stil dosyasını bir katmana atamak için) ekleyebilirsiniz.
Satır İçi @layer Bloğu
Kuralları, katman adını içeren bir @layer bloğuna sarın:
<button class="button">Layered button</button>Mevcut Bir Katmana Ekleme
Bir katmana birden çok ayrı @layer bloğunda ekleme yapabilirsiniz. Tüm bildirimler katmanda birleştirilir:
<button class="button">Button</button>
<input class="input" placeholder="Input" />Adsız Katmanlar
Adsız bir @layer bloğu anonim bir katman oluşturur. Anonim katmanlara sonradan yeni stiller eklenemez ve göründükleri konumda bulunurlar:
<p style="margin: 24px; border: 1px dashed #999;">Normal paragraph (default margin)</p>
<p class="reset" style="border: 1px dashed #999;">Reset paragraph (anonymous layer sets margin: 0)</p>@import ile @layer
İçe aktarılan bir stil dosyasının tamamını bir katmana atayın:
<p>This scene assigns whole imported stylesheets to layers — see the CSS panel.</p>Bileşen CSS'ini Dosyalara Bölme
Modüler bir projede her bileşen dosyası bileşenler katmanına ekleme yapar:
<button class="button">Button</button>
<div class="card">Card</div>Katmanlar ve PostCSS/Sass
Hem Sass hem de PostCSS, @layer ile birlikte çalışır. Katmanları ana giriş dosyanızda tanımlayabilir ve bu katmanlara ekleme yapan bileşen parçalarını dahil etmek için @use veya @import kullanabilirsiniz.
Satır İçi Stiller ve Katmanlar
Satır içi stiller (style="" özniteliği) katmanlardan etkilenmez; herhangi bir katmanın stillerine her zaman üstün gelir. Yalnızca stil dosyası kuralları ( <style> blokları dahil) katmanlara yerleştirilebilir.
DevTools'ta Katmanlarda Hata Ayıklama
Chrome DevTools, Styles panelinde katman sınırlarını gösterir. Daha yüksek öncelikli bir katman tarafından geçersiz kılınan daha düşük öncelikli katmandaki kuralların üstü çizili gösterilir ve kazanan katman belirtilir.
Geriye Dönük Uyumluluk
@layer desteği olmayan tarayıcılar, tüm @layer bloklarını standart CSS blokları olarak değerlendirir (her şeyi görüntüler). Basamaklandırma davranışı farklıdır, ancak stiller kaybolmaz. Güvenlik için özelliğe bağlı kodu @supports (@layer selector) içine sarın.
Mevcut CSS'yi Katmanlara Taşıma
Taşıma stratejisi:
- Katmanları ana CSS dosyanızın en üstünde bildirin
- Mevcut her CSS bölümünü ilgili katman bloğuna sarın
- Ortaya çıkan öncelik sorunlarını sınayın ve düzeltin
- Zamanla gereksiz yüksek özgüllüklü seçicileri kaldırın
Hızlı Kontrol
Birden çok ayrı @layer bloğundaki stilleri aynı adlı katmana nasıl eklersiniz?
Özet
Stilleri, dosyalara bölünebilen ve tümü birleştirilen adlandırılmış @layer name { } bloklarını kullanarak katmanlara ekleyin. İçe aktarılan stil dosyalarını @import layer() ile katmanlara atayın. Anonim katmanlar yeniden açılamaz. Satır içi stiller, katmanlarda bildirilen stilleri her zaman geçersiz kılar.
Sıkça Sorulan Sorular
“Katmanlara Stil Ekleme” dersi ücretsiz mi?
Evet — “Katmanlara Stil Ekleme” 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.
“Katmanlara Stil Ekleme” dersinde ne öğreneceğim?
CSS kurallarını @layer bloklarını ve içe aktarılan stil sayfalarını kullanarak belirli katmanlara atayı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 2. dersidir.
“Katmanlara Stil Ekleme” 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
- @layer Bildirimi ve Sıralaması
- Katmanlara Stil Ekleme
- Katman Önceliği ve !important Etkileşimi
- Üçüncü Taraf Kodlarında Katmanlar