Seçiciler ve Basamaklandırma
Öğe, class, ID ve öznitelik seçicileriyle öğeleri seçin. Hangi stillerin öncelik kazanacağını öngörmek için özgüllüğü, kalıtımı ve basamaklandırmayı öğrenin.
Seçiciler ve Basamaklandırma, CoddyKit'te ücretsiz bir Frontend 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, Frontend Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Frontend Academy kursu toplamda 4 dersten oluşur.
CSS Nedir?
CSS (Basamaklı Stil Sayfaları), görsel sunumu denetleyen dildir. kurallar yazarsınız — her kuralda öğeleri hedefleyen bir seçici ve özellik-değer çiftlerini içeren bir bildirim bloğu bulunur.
selector {
property: value;
another-property: value;
}Tür, Sınıf ve ID Seçicileri
Üç temel seçici vardır: tür, bir etiketin tüm öğelerini hedefler (p); sınıf, bir sınıfa sahip öğeleri hedefler (.card); ID, bir öğeyi id değerine göre hedefler (#logo). ID'ler çok yüksek özgüllüğe sahip olduğundan sınıfları tercih edin.
p { color: #333; } /* type */
.card { padding: 16px; } /* class */
#logo { width: 200px; } /* ID */Öznitelik ve Sözde Sınıf Seçicileri
[type="email"] ile öznitelik değerine göre seçim yapın. Durumlar için sözde sınıfları kullanın: :hover, :focus, :active, :checked, :nth-child(), :first-child, :last-child.
input[type="email"] { border-color: blue; }
a:hover { text-decoration: underline; }
li:nth-child(odd) { background: #f5f5f5; }Birleştiriciler
Birleştiriciler, öğeler arasındaki ilişkileri açıklar: boşluk (alt öğe), > (doğrudan alt öğe), + (bitişik kardeş), ~ (genel kardeş).
nav a { color: white; } /* descendant */
nav > ul { list-style: none; } /* child */
h2 + p { margin-top: 0; } /* adjacent sibling */Özgüllük: Hangisi Kazanır?
Birden fazla kural aynı öğeyi hedeflediğinde, hangisinin geçerli olacağını özgüllük belirler. ID seçicileri (0,1,0,0), sınıf seçicilerini (0,0,1,0); sınıf seçicileri de tür seçicilerini (0,0,0,1) geçer. Satır içi stiller hepsini geçer. !important her şeyi geçer — bunu son çare olarak kullanın.
Özgüllüğü Hesaplama
ID'leri, sınıfları/öznitelikleri/sözde sınıfları ve türleri ayrı ayrı sayın. Sütun sütun karşılaştırın. Örnek: #nav .link:hover = (0,1,1,1). .nav a = (0,0,1,1). İlk seçici kazanır.
/* Specificity: 0,0,1,1 — loses */
.nav a { color: red; }
/* Specificity: 0,1,1,1 — wins */
#nav .link:hover { color: blue; }Basamaklandırma: Sıra Önemlidir
Özgüllük eşit olduğunda, stil sayfasında daha sonra görünen kural kazanır. CSS'teki C, basamaklandırmayı ifade eder. İçe aktarma sırası ve kaynak sırası önemlidir.
Kalıtım
Bazı CSS özellikleri varsayılan olarak devralınır — alt öğeler, siz ayrıca ayarlamadan üst öğenin değerini alır. color, font-family ve line-height gibi metinle ilgili özellikler devralınır. margin gibi kutu modeli özellikleri devralınmaz.
body {
font-family: 'Inter', sans-serif; /* all text inherits this */
color: #1a202c; /* all text inherits this */
}:is() ve :where() Seçicileri
:is() ve :where(), bir listedeki değerlerden herhangi biriyle eşleşen kısa seçiciler yazmanızı sağlar. Fark şudur: :is(), bağımsız değişkenlerinin en yüksek özgüllüğünü devralır; :where() ise her zaman sıfır özgüllüğe sahiptir.
/* Instead of h1 a, h2 a, h3 a: */
:is(h1, h2, h3) a {
color: inherit;
}Evrensel Seçici *
Evrensel seçici *, her öğeyle eşleşir. CSS sıfırlamalarında yaygın olarak kullanılır: *, *::before, *::after { box-sizing: border-box; } ifadesi kutu modelini çok daha öngörülebilir hâle getirir.
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}Tarayıcının Varsayılan Stilleri
Tarayıcılar, sizin stil sayfanızdan önce kendi varsayılan stil sayfalarını (kullanıcı aracısı stil sayfası) uygular. CSS sıfırlamaları (normalize.css gibi) veya CSS katmanları, sizin biçimlendirmenizin bilinen bir temel üzerinden başlaması için bu varsayılanları etkisizleştirir.
Hızlı Kontrol
Hangi seçici en yüksek özgüllüğe sahiptir?
Özet: Seçiciler ve Basamaklandırma
Öğeleri tür, sınıf, ID, öznitelik ve sözde sınıf seçicileriyle hedefleyin. Çakışmaları özgüllük çözer (ID'ler > sınıflar > türler). Basamaklandırma, eşitlikleri kaynak sırasını kullanarak çözer. Kalıtım, metin stillerini alt öğelere otomatik olarak aktarır.
Sıkça Sorulan Sorular
“Seçiciler ve Basamaklandırma” dersi ücretsiz mi?
Evet — “Seçiciler ve Basamaklandırma” 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 Frontend Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Frontend Academy kursu toplamda 4 dersten oluşur.
“Seçiciler ve Basamaklandırma” dersinde ne öğreneceğim?
Öğe, class, ID ve öznitelik seçicileriyle öğeleri seçin. Hangi stillerin öncelik kazanacağını öngörmek için özgüllüğü, kalıtımı ve basamaklandırmayı öğrenin. Frontend 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.
Frontend Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te Frontend 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.
“Seçiciler ve Basamaklandırma” 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 Frontend Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her Frontend 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
- Seçiciler ve Basamaklandırma
- Renkler, Tipografi ve Kutu Modeli
- Display: block inline flex grid Temelleri
- Konumlandırma: relative absolute fixed sticky