CSS kural yapısı
Seçici, bildirim, özellik ve değer kavramlarını öğrenirsin.
Bir stil bloğunun yapısı
Her CSS stil bloğu üç parçadan oluşur: bir seçici, süslü parantezler içinde bir ya da birkaç bildirim, her bildirimin sonunda noktalı virgül. Örnek: body { color: #333; }.
Seçici hangi öğeyi biçimleyeceğimizi, bildirim neyi değiştireceğimizi söyler. Bu yapı tüm CSS'i oluşturan temel tuğladır.
Seçici
Seçici (selector), süslü parantezin solundaki kısımdır. Hangi HTML öğesinin biçimleneceğini söyler. body, h1, p birer tür seçicidir; etiketin adını yalın yazar.
Seçicileri ileride sınıf ve kimlik için de göreceğiz; bu derste yalnızca tür seçicileriyle yola çıkıyoruz. Şimdilik bilmen gereken: seçiciyi yaz, sonra süslü parantez aç.
Bildirim, özellik, değer
Süslü parantezin içinde her satır bir bildirimdir (declaration). Bildirim iki parçaya ayrılır: özellik (property) solunda, değer (value) sağında, arada iki nokta. Örnek: color: navy.
Bildirimin sonuna noktalı virgül konur. İkinci bir bildirim eklemek istersen aynı bölümde alt alta yazarsın: color: navy; font-size: 18px;.
Uygulama h1 bölümünü iki bildirimle yaz
Bir h1 bölümü yaz. İçinde iki bildirim olsun: color: darkblue ve font-size: 32px. Her bildirimin sonuna noktalı virgül koy.
Örnek çözümü göster
/* h1 bölümünü ekle */
h1 {
color: darkblue;
font-size: 32px;
}Çoklu bildirim ve noktalı virgül
Bir bölümde istediğin kadar bildirim yazabilirsin. Her bildirimi yeni bir satıra koyup iki boşluk girintilersen kodun okunması kolaylaşır. Son bildirimin noktalı virgülü seçimlidir ama koyman önerilir.
Noktalı virgülü unutmak yeni başlayanların en sık yaptığı hatadır. Bir bildirim bitince ; koy; sonra yenisine geç.
Kendini test et
-
Paragraf seçiciyi yaz
____ { color: #333; line-height: 1.5; }Cevabı göster
p { color: #333; line-height: 1.5; } -
color: navy bildiriminde hangisi değerdir?
h1 { color: navy; }- color
- h1
- navy
- iki nokta işareti
Cevabı göster
navy — Doğru. 'navy' değerin kendisidir; rengin adı.
-
Parçaları anlamlarıyla eşleştir
- Seçici
- Hangi öğeyi biçimleyeceğimiz
- Bildirim
- özellik: değer çifti
- Özellik
- neyi değiştireceğimiz
- Değer
- yeni değerin kendisi