CSS ile Biçimlendirme

Bilişim Teknolojileri · 11. Sınıf · HTML ve CSS

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. 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…

CSS ile Biçimlendirme Kazanımları

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.

Örnek Sorular ve Çözümleri

Örnek Soru 1 kolay

Aşağıdaki seçicilerden hangisi öncelik bakımından en yüksek ağırlığa sahiptir?

A) h1 etiket seçicisi
B) .kart sınıf seçicisi
C) #menu id seçicisi
D) * evrensel seçicisi

Doğru cevap: C) #menu id seçicisi

Öncelik sırasında id seçicisi (0.100) sınıf (0.010) ve etiket (0.001) seçicilerinden ağırlıklıdır; en yüksek basamak satır içi stildir.

Örnek Soru 2 orta

300 piksel genişlik, 20 piksel padding ve 2 piksel kenarlıklı kutunun (varsayılan box-sizing) dış genişliği kaç pikseldir?

A) 300 piksel
B) 344 piksel
C) 320 piksel
D) 342 piksel

Doğru cevap: B) 344 piksel

İçerik kutusunda dış genişlik = 300 + 2 × 20 + 2 × 2 = 344 piksel olarak hesaplanır.

Örnek Soru 3 zor

!important bildiriminin temel sakıncası nedir?

A) Rengi otomatik koyulaştırır
B) Öncelik sırasını bozar ve kuralı ezmenin tek yolu hâline gelir
C) Sayfayı belirgin biçimde yavaşlatır
D) CSS değişkenlerini devre dışı bırakır

Doğru cevap: B) Öncelik sırasını bozar ve kuralı ezmenin tek yolu hâline gelir

!important normal öncelik basamaklarını atladığı için sonraki düzeltmeleri imkânsızlaştırır ve dosyanın bakımını zorlaştırır.

Konu Anlatımının Tamamı

CSS ile Biçimlendirme konu anlatımını açÇözümlü örnekler, formüller, ipuçları ve tüm sorular · 11. Sınıf Bilişim Teknolojileri

Bu sayfa CSS ile Biçimlendirme konusu için hazırlanmış kısa bir özetdir. Tam içerik için ders sayfasını açabilir, DersTeders ana sayfasından diğer konulara geçebilirsin.