CSS Academy · Ders

Özel Özellikleri Tanımlama ve Kullanma

CSS özel özelliklerini -- ön ekiyle tanımlayın ve var() işleviyle kullanın.

Özel Özellikleri Tanımlama ve Kullanma, CoddyKit'te ücretsiz bir CSS Academy dersidir. Bu, 4 dersinin 1. 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.

CSS Özel Özellikleri Nedir

CSS özel özellikleri (CSS değişkenleri olarak da adlandırılır), yeniden kullanılabilir bir değeri bir kez tanımlamanıza ve bu değeri stil sayfanızın tamamında kullanmanıza olanak tanır. --name: value sözdizimini kullanırlar.

Özel Özellikleri Tanımlama

Özel özellikleri herhangi bir öğede tanımlayın. :root üzerinde tanımlamak, bunları genel olarak kullanılabilir hâle getirir:

<div class="demo">Custom properties declared on :root</div>

var() İşlevini Kullanma

Bir özel özelliğe var() işleviyle başvurun:

<button>Styled Button</button>

Özel Özellikler Devralınır

Özel özellikler normal CSS devralma kurallarını izler. Bir üst öğede tanımlanan özellik, üzerine yazılmadığı sürece tüm alt öğelerinde kullanılabilir.

<div class="card">
  <div class="card__body">Inherits --card-bg from .card</div>
</div>

Geçersiz Özel Özellik Değerleri

Düzenli CSS özelliklerinin aksine, geçersiz bir özel özellik değeri bildirimin yok sayılmasına neden olmaz; değişken olduğu gibi kendi değerine çözümlenir. Ardından bu değeri kullanan özellik, değerin geçerli olup olmadığını belirler.

CSS Özel Özellikleri ve Sass Değişkenleri

Temel farklar:

CSS özel özellikleri tarayıcıda canlıdır; dinamik olarak güncellenir
Sass değişkenleri derleme zamanında ortadan kalkar
Özel özellikler JavaScript ile değiştirilebilir
Özel özellikler basamaklandırma ve devralma kurallarına uyar

Adlandırma Kuralları

Özel özellikleri görsel değerlerine göre değil, anlamsal olarak adlandırın. Böylece daha sonra güncellemeleri kolaylaşır:

<p class="demo">Named --color-primary, --color-text, --size-spacing-sm</p>

Genel ve Bileşen Kapsamı

Genel belirteçleri :root içinde, bileşene özel değerleri ise bileşenin kök sınıfında tanımlayın:

<div class="card">Global font-size-base + component-scoped card vars</div>

calc() İçinde Özel Özellikler

Özel özellikler calc() içinde çalışır; boyut hesaplamalarında kullanılıyorsa birim içermelidir:

<div class="nav">Navbar (var(--nav-height))</div>
<div class="main-content">Main content fills the rest via calc()</div>

Uyarlanabilir Özel Özellikler

Uyarlanabilir belirteç sistemleri için medya sorguları içinde özel özellik değerlerini değiştirin:

<div class="section">Padding grows to 6rem on wide screens</div>

Animasyonlar için Özel Özellikler

Birden çok ayrı özelliği değiştirmek yerine bir özel özelliği (çoğunlukla JavaScript aracılığıyla) değiştirerek öğeleri canlandırın:

<div class="progress-track">
  <div class="progress"></div>
</div>

Hızlı Kontrol

--accent adlı genel bir CSS özel özelliğini nasıl tanımlarsınız?

Özet

CSS özel özellikleri --name: value ile tanımlanır ve var(--name) ile kullanılır. Genel belirteçleri :root üzerinde tanımlayın; bileşen değerlerinin kapsamını bileşen seçicileriyle sınırlandırın. Bu özellikler canlıdır, basamaklandırmayı dikkate alır ve JavaScript ile değiştirilebilir; bu da onları Sass değişkenlerinden çok daha güçlü kılar.

Sıkça Sorulan Sorular

“Özel Özellikleri Tanımlama ve Kullanma” dersi ücretsiz mi?

Evet — “Özel Özellikleri Tanımlama ve Kullanma” 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.

“Özel Özellikleri Tanımlama ve Kullanma” dersinde ne öğreneceğim?

CSS özel özelliklerini -- ön ekiyle tanımlayın ve var() işleviyle 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 1. dersidir.

“Özel Özellikleri Tanımlama ve Kullanma” 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

← CSS Academy Sayfasına Dön