CSS ile Biçimlendirme

Konu Anlatımı

CSS ile Biçimlendirme

CSS, HTML'nin kurduğu anlam katmanına görünümü verir; renk, boşluk, tipografi ve düzen bu dilde tanımlanır. 11. sınıf seviyesinde asıl mesele kuralı yazmak değil, hangi kuralın ne zaman uygulanacağını bilmektir: seçici önceliği, kutu ölçüsü, değişkenler ve medya sorguları bir arada çalışmadan modern bir sayfa tutarlı görünmez. Bu konuda önce çatışma kuralları, sonra ölçü hesabı, en sonda duyarlı düzen ele alınır.

1. Seçiciler ve Öncelik Sırası

Her CSS kuralı seçici ile başlar; aynı özelliğe iki kural yazıldığında hangisinin kazanacağı üç basamakla belirlenir: satır içi stil, id seçicisi, sınıf seçicisi, etiket seçicisi. Bu ağırlığa specificity denir ve (id, sınıf, etiket) sayımı olarak okunur; ağırlıklar eşitse kaynak kodda son yazılan kural geçerlidir.

Bir boşluk ile her seviye alt, > işareti ile doğrudan alt eleman seçilir. !important bu basamakların hepsini atlar; ancak kuralı okunmaz hâle getirdiği için yalnız son çare olarak kullanılır.

2. Kutu Modeli ve Ölçü Hesabı

Her öğe kutu modelinden oluşur: içerik, iç dolgu (padding), kenarlık (border), dış boşluk (margin). Varsayılan content-box kuralında width değeri yalnız içeriği kapsar; dış ölçüsünü bulmak için padding ve border eklenir. Örneğin 300 piksel genişlik, 20 piksel padding ve 2 piksel kenarlığın dış genişliği 300 + 2 × 20 + 2 × 2 = 344 piksel olur. box-sizing: border-box ile width; padding ve border'ı içine alır, böylece yazılan ölçü dış ölçü olur ve sütunlar taşmaz. Pratik kural, sayfa başında tüm öğeler için bu değeri açmaktır.

Bitişik kutuların dikey dış boşlukları birbirine değer; aradaki mesafe en büyük değere eşitlenir. Yan yana kutularda ise değerler toplanır ve boşluk ayrıca gap ile tanımlanır.

3. Değişkenler ve Tekrar Önleme

Renk ve boşluk değerleri dosyanın her yerinde tekrarlanırsa tema değişimi hata kaynağına dönüşür. CSS değişkenleri bu sorunu çözer: :root içinde --ana-renk gibi isimler tanımlanır, her yerde var(--ana-renk) ile okunur. Değişken tanımlanmamışsa var(--yok, #333333) biçiminde ikinci değer devreye girer. Değişkenler alt elemanlara miras kaldığı için tek bir sınıf değiştirmek tüm sayfanın temasını dönüştürür; koyu tema böylece yeni bir dosya yazmadan kurulur.

4. Duyarlı Düzen, Durumlar ve Medya Sorguları

Duyarlı tasarım mobil öncelikle yazılır: önce küçük ekran için tek sütun kurulur, @media (min-width: 768px) ile geniş ekranlara sütun eklenir. Ölçü birimi seçimi de en az kural kadar önemlidir: piksel sabit boyut, yüzde oransal genişlik, rem ise kök yazı boyuna göre hesaplanır; varsayılan 16 pikselde 1,5 rem 24 piksel eder. Etkileşimli öğelerde :hover fareyi, :focus-visible klavye odağını, :active basılı hâli, :disabled kullanılamayan hâli gösterir. Form alanlarında :valid ve :invalid ile geri bildirim hem renk hem metinle verilir; yalnız kırmızıya güvenmek renk körü kullanıcıya hiçbir şey anlatmaz. Yazdırma çıktısında gezi menüsü gizlenir, bağlantı adresleri metin olarak eklenebilir.

5. Sınav Odaklı Özet

Sınavda üç hesap sık çıkar: öncelik basamağını okumak, kutu modelinin dış ölçüsünü bulmak ve rem'i piksele çevirmek. Öncelik sorusunda önce id, sonra sınıf, en sonda etiket sayılır; eşitlikte son yazılan kazanır. Kutuda varsayılan content-box unutulursa 344 piksel yerine 300 piksel sanılır. Medya sorgularında koşul yönü ters okunursa kural yanlış ekranda devreye girer: max-width dar ekranda, min-width geniş ekranda çalışır.

Ne Öğreneceğiz

CSS değişkenleri, öncelik sırası, kutu modeli ve medya sorgularıyla duyarlı biçimlendirmeyi kapsar. Bu konuda ögrenme çıktıları:

• CSS seçicilerinin öncelik sırasını hesaplayarak çakışan kuralları çözer.
• Kutu modelini box-sizing ayarıyla birlikte piksel cinsinden hesaplar.
• CSS değişkenleri kullanarak tutarlı renk, boşluk ve tipografi tanımlar.
• Medya sorguları ile farklı ekran genişliklerine uyum sağlayan düzen kurar.
• Durum seçicileriyle etkileşimli bileşen görünümleri ve geri bildirim oluşturur.

Ön Bilgi

Bu konuya başlamadan önce temel kavram ve ön koşulları kavramanız yardımcı olacaktır. Konunun çerçevesinde şu kavramlar dikkat ister:

• Öncelik çakışmaları id yerine sınıfla çözülür; satır içi stil son çaredir.
• Duyarlı projede kutu ölçüsünü doğru vermek için box-sizing: border-box açıktır.
• Bitişik kutularda dikey marjlar birleşir, aradaki mesafe en büyük değerdir.
• Mobil öncelikle yazılır; geniş ekran kuralı min-width koşuluyla eklenir.
• Durum geri bildirimi yalnız renkle değil metin veya ikonla da verilir.
• rem ve yüzde ölçüler, sabit pikselden daha taşınabilir sonuç verir.

Basit Örnek ve Günlük Yaşam

Günlük yaşamda ve mesleki bağlamda bir uygulama:

Soru: Aynı başlığın rengini değiştiren iki kural vardır: biri.baslik sınıfı, diğeri #ust-baslik id'sidir. Sınıf kuralı çalışmamaktadır. Neden çözülür?

1. Adım 1: Her iki seçicinin ağırlığı sayılır: #ust-baslik için 0.100,.baslik için 0.010 bulunur.
2. Adım 2: Ağırlıklar karşılaştırılır; id kuralı sınıf kuralını ezdiği için renk id kuralından gelir.
3. Adım 3: Kuralların hangi dosyada ve hangi sırada olduğu, yani kaynak sırası kontrol edilir.
4. Adım 4: Gereksiz id seçicisi kaldırılır ya da kural sınıf üzerinden yeniden yazılır.

Sonuç/cevap: Id kuralı daha ağır olduğu için kazanmıştır; kural sınıfa taşındığında öncelik dengelenir ve istenen değer uygulanır.

Adım Adım Çözülmüş Örnek

Örnek 1: Öncelik Çakışmasının Çözülmesi konusunun adımları:

1. Adım 1: Her iki seçicinin ağırlığı sayılır: #ust-baslik için 0.100,.baslik için 0.010 bulunur.
2. Adım 2: Ağırlıklar karşılaştırılır; id kuralı sınıf kuralını ezdiği için renk id kuralından gelir.
3. Adım 3: Kuralların hangi dosyada ve hangi sırada olduğu, yani kaynak sırası kontrol edilir.
4. Adım 4: Gereksiz id seçicisi kaldırılır ya da kural sınıf üzerinden yeniden yazılır.

Karşılaştırma Tablosu

Sık Yapılan Hatalar

Önceliği ezmeden id ile yazmak: Id seçicisinin ağırlığı sınıfı geçer; gereksiz id kullanmak sonradan kuralı çökertir.

İç kutu ölçüsünü dış sanmak: Varsayılanda width yalnız içeriği kapsar; padding ve border eklenmeden dış ölçü bulunamaz.

Geniş ekrandan başlayıp dar ekranda kırpmak: Mobil öncelik terk edilirse küçük ekranda taşma ve yatay kaydırma kaçınılmaz olur.

Uyarıyı yalnız renkle vermek: Kırmızıya dayalı hata, renk körü kullanıcıya ulaşmaz; metin veya ikon zorunludur.

Her kurala!important eklemek: Öncelik sırası bozulur, sonraki düzeltmeler uygulanmaz hâle gelir.

Kendini Dene

Soru: Yönerge: Farklı ekran genişliklerinde çalışan bir bilgi kartı için CSS tasarımı yaz. Tasarımda kutu ölçüsünü border-box ile almayı, ölçüleri rem ve yüzdeye çevirmeyi, 768 piksellik medya sorgusunu, çakışan kurallarda izlenecek öncelik stratejisini ve klavye kullanıcısı için odak durumunu belirt; ardından 24 piksel kök yazı boyunda 1,5 rem değerinin kaç piksel olduğunu hesapla.

Örnek cevap: Puanlama anahtarı: box-sizing border-box tanımının yazılması 3 puan; rem ve yüzde kullanımı gerekçesiyle yazılması 3 puan; 768 piksel medya sorgusunun ne zaman çalıştığının yazılması 3 puan; öncelik çakışmalarında id yerine sınıf kullanacağının yazılması 3 puan; odak durumunun focus-visible ile gösterileceğinin yazılması 3 puan; 1,5 rem hesabının 1,5 × 24 = 36 piksel olarak yapılması 3 puan; ölçülerin birim tutarlılığı 2 puan. Toplam 20 puan. Model cevap: Kutu border-box ile ölçülür, ölçüler rem ve yüzdeye çevrilir, 768 pikselde kural devreye girer, çakışmada sınıf kullanılır, odak focus-visible ile görünür olur; 1,5 rem 36 pikseldir.