CSS Sözdizimi

CSS'in HTML'e stil verdiğini artık biliyorsunuz. Bu derste bir kuralın yazım düzenine yakından bakacağız; böylece süslü parantezlerin, iki noktanın ve noktalı virgülün nereye geldiğini tahmin etmek zorunda kalmadan stil okuyup yazabileceksiniz.

CSS sözdizimi nedir?

CSS sözdizimi, bir stil kuralını yazarken izlediğimiz sabit kalıptır. Günlük işlerde yazdığınız neredeyse her kural aynı biçimdedir: neyi biçimlendireceğinizi seçersiniz (seçici), { ile bir bildirim bloğu açarsınız, bir veya birden fazla bildirim yazarsınız ve } ile kapatırsınız. Her bildirim bir özelliği bir değerle eşleştirir.

Bir CSS kuralının yapısı

Kuralı adı olan parçalara ayırın. Her parçayı adlandırabildiğinizde yazım hatalarını bulmak çok daha kolaylaşır.

Parçaları belli bir kural

İşte tüm önemli parçaların göründüğü en kısa kural. Seçicelere sonraki derslerde daha derinlemesine gireceğiz; burada amaç doğru yapıyı oturtmak.

Soldan sağa okuyun

• p — seçici (tüm paragraflar)
• { … } — bildirim bloğu
• color — özellik
• : — özelliği değerden ayırır
• teal — değer
• ; — bildirimi bitirir
  Boşluklar ve satır sonları esnektir. p{color:teal;} kuralını tek satırda da yazabilirsiniz; tarayıcı bunu aynı şekilde işler. Yine de öğrenirken ve ekip içinde çalışırken, okunaklı ve çok satırlı yazım daha iyidir.

Tek blokta birden fazla bildirim

Bir kural, aynı seçici için pek çok özellik belirleyebilir. Her bildirimi ayrı bir satıra yazın ve noktalı virgülle bitirin.

Bu neden çalışır?

• .note bir class seçicisidir (class'ları ileride daha çok çalışacağız)
• Dört bildirim tek bir bildirim bloğunu paylaşır
• Tarayıcı hepsini class="note" taşıyan öğelere uygular
• İki bildirim arasında noktalı virgül unutulursa sonraki özellik uygulanmayabilir

Seçicileri gruplamak

Birkaç seçicinin aynı stillere ihtiyacı olduğunda onları virgülle ayırarak yazın. Hepsi için tek bir bildirim bloğu yeterlidir.

Ne zaman gruplamalı?

Başlıkların (veya başka öğelerin) aynı görünümü paylaşması gerektiğinde gruplamak, kopyala-yapıştır yapmanızı önler. Daha sonra bir seçicinin kendine özgü bir stile ihtiyacı olursa, grubu şişirmek yerine ona ayrı bir kural yazın.

Noktalama kontrol listesi

Yazarken bu kısa listeyi aklınızda tutun:

• Süslü parantezler bildirim bloğunu sarar
• İki nokta, özellik ile değerin arasına gelir
• Noktalı virgül her bildirimi bitirir (bir sonraki bildirimden önce zorunludur; sonuncuda da koymak iyi bir alışkanlıktır)
• Virgüller gruplanmış seçicileri ayırır — özellikleri değil
• Özellik adları ve çoğu anahtar sözcük değeri büyük/küçük harfe duyarlı değildir, ancak gelenek olarak küçük harfle yazılır

Kendiniz deneyin

1. Bir syntax.html dosyası oluşturun; içinde <p class="note">Syntax practice</p> paragrafı ve head içinde bir <style> bloğu olsun.
2. Bu dersteki çok bildirimli .note kuralını ekleyin.
3. background-color değerini #fef3c7 yapın, kaydedin ve sayfayı yenileyin.
4. Aynı bloğun içine beşinci bildirim olarak font-size: 1.125rem; ekleyin, kaydedin ve tekrar yenileyin.
5. Hem arka planın hem de yazı boyutunun değiştiğini doğrulayın. Değişmediyse parantezleri ve noktalı virgülleri kontrol edin.

Sık yapılan hatalar

• İki nokta olmadan color teal yazmak — tarayıcı bildirimi çözümleyemez
• { veya } unutmak; bildirimler bloğun dışında kalır ve yok sayılır
• İki bildirim arasındaki noktalı virgülü atlamak; ikinci özellik hiç uygulanmaz
• Özellik ile değer arasına iki nokta yerine virgül koymak (color, teal)
• Bir özelliği seçici ve parantez olmadan tek başına yazmak — bu tam bir kural değildir

Özet

• CSS sözdizimi = seçici + bildirimlerle dolu bildirim bloğu { }
• Bildirim property: value; biçimindedir
• Bir blok, aynı seçici için pek çok bildirim içerebilir
• Virgüller, aynı stilleri paylaşan seçicileri gruplar
• Parantezlere, iki noktaya ve noktalı virgüle dikkat etmek sessiz hataları önler
• Değerleri değiştirerek ve bildirim ekleyerek çalışın, sonra sayfayı yenileyin