Yükleniyor...

CSS Sözdizimi

CSS Sözdizimi, web sayfalarına görsel stil kazandırmak için kullanılan temel yapıdır. Bir web sayfasını bir ev inşa etmek (building a house) gibi düşünürsek, HTML bu evin duvarları ve çatısıdır, CSS ise odaları dekore etmek (decorating a room) gibidir. Yazı tiplerini, renkleri, arka planları ve boşlukları ayarlayarak sitenize görsel bir kimlik kazandırır.
CSS sözdizimi üç ana bileşenden oluşur: seçici (selector), özellik (property) ve değer (value).

  • Seçici, hangi HTML öğesine stil uygulanacağını belirtir.
  • Özellik, hangi görsel özelliğin değiştirileceğini tanımlar.

  • Değer, bu özelliğin yeni görünümünü belirler.
    CSS, kişisel web sitesi, blog, e-ticaret sitesi veya haber sitesinde farklı amaçlar için kullanılır:

  • Kişisel web sitesi: Portföyünüzü estetik bir şekilde sunar.

  • Blog: Yazıların okunabilirliğini artırır.
  • E-ticaret sitesi: Butonları ve ürünleri dikkat çekici hale getirir.
  • Haber sitesi: Başlık ve kategorileri düzenli gösterir.
    Bu rehberde CSS sözdiziminin temel yapısını öğrenecek, kendi sitenizde çalışacak basit ve pratik örneklerle uygulama yapabileceksiniz. Doğru sözdizimi kullanmak, tıpkı bir mektubu düzgün yazmak (writing a letter) gibi önemlidir; aksi halde tarayıcı stilinizi anlamaz.

Temel Örnek

css
CSS Code 
/* Make all paragraph text red */
p {
color: red; /* Paragraph text becomes red */
}

Yukarıdaki örnek, CSS sözdiziminin en basit halini gösterir. Adım adım inceleyelim:

  1. Seçici (p): p etiketi tüm paragraf öğelerini hedefler. Bu, "hangi öğeye stil uygulanacak?" sorusunun cevabıdır.
  2. Açma ve kapama süslü parantezler { }: Stil tanımlarının tamamını içerir. Her stil bloğu bu parantezler içinde yer alır.
  3. Özellik (color): Paragrafın hangi özelliğini değiştireceğimizi belirtir. Burada renk seçtik.
  4. Değer (red): Özelliğin yeni değeridir; burada metin kırmızı olacaktır.
  5. Noktalı virgül (;): Her özellik-değer çiftini ayırır. Tek bir stil olsa bile kullanmak iyi bir alışkanlıktır.
    Gerçek hayatta bu örneği şu şekilde kullanabilirsiniz:
  • Blogunuzda alıntı metinlerini kırmızı göstermek için.
  • Haber sitenizde önemli uyarıları vurgulamak için.
  • Kişisel sitenizde başlık altındaki kısa açıklamalara renk katmak için.
    Yeni başlayanların en sık yaptığı hata, süslü parantezi veya noktalı virgülü unutmak ya da yanlış yerleştirmektir. Tarayıcı sözdizimi hatalı olan stilleri uygulamaz.

Pratik Örnek

css
CSS Code 
/* E-ticaret sitesinde satın al butonuna stil */
button.satinAl {
background-color: green; /* Yeşil arka plan dikkat çeker */
color: white; /* Beyaz yazı kontrast sağlar */
padding: 10px 20px; /* İç boşluk ekler */
border-radius: 5px; /* Köşeleri yuvarlatır */
}

En İyi Uygulamalar ve Yaygın Hatalar
En İyi Uygulamalar:

  1. Mobil öncelikli tasarım (mobile-first design): Önce küçük ekranları tasarlayın, sonra genişletin.
  2. Bakımı kolay kod: Açıklayıcı sınıf adları kullanın ve benzer stilleri gruplayın.
  3. Performans optimizasyonu: Gereksiz karmaşık seçicilerden kaçının.

  4. Tarayıcı testi: Stilinizin farklı tarayıcılarda aynı göründüğünden emin olun.
    Yaygın Hatalar:

  5. Spesifiklik çakışmaları (specificity conflicts): Aynı öğeye farklı kuralların uygulanması.

  6. Yanlış responsive tasarım: Media query kullanılmaması sonucu mobilde bozuk görünüm.
  7. Gereksiz !important kullanımı: Kodun bakımını zorlaştırır.
  8. Noktalı virgül veya süslü parantez eksikliği: Stillerin çalışmamasına yol açar.
    Hata Ayıklama İpuçları:
  • Tarayıcı geliştirici araçlarını kullanın.
  • Şüpheli satırları yorum satırı yaparak test edin.
  • CSS dosyanızı düzenli ve kısa tutun.

📊 Hızlı Referans

Property/Method Description Example
color Metin rengini değiştirir p { color: blue; }
background-color Arka plan rengini değiştirir div { background-color: yellow; }
font-size Yazı boyutunu belirler h1 { font-size: 24px; }
margin Dış boşluk ekler div { margin: 10px; }
padding İç boşluk ekler button { padding: 5px; }

Özet ve Sonraki Adımlar
Bu derste, CSS sözdiziminin temel yapısını öğrendiniz: seçici, özellik ve değer. Doğru yazılmış sözdizimi, sitenizin görsel olarak istenen şekilde görünmesini sağlar.
CSS, HTML ile birlikte çalışarak yapıyı şekillendirir ve JavaScript ile birleştiğinde dinamik etkileşimler eklemenize imkan verir.
Sonraki Adımlar:

  1. İleri seviye seçicileri öğrenin (örn: sınıf, ID, pseudo-class).
  2. Kutu modeli (Box Model) mantığını kavrayın.
  3. Responsive tasarım için media query kullanmayı deneyin.
    Pratik yapmaya devam edin: Renkleri, yazı tiplerini ve boşlukları değiştirin. Bir süre sonra sayfalarınız düzenli bir oda (decorating room) gibi göze hitap edecek.

🧠 Bilginizi Test Edin

Başlamaya Hazır

Bilginizi Test Edin

Bu konudaki anlayışınızı pratik sorularla test edin.

❓
3
Sorular
🎯
70%
Geçmek İçin
♾️
∞
Süre
🔄
∞
Deneme

📝 Talimatlar

  • Her soruyu dikkatle okuyun
  • Her soru için en iyi cevabı seçin
  • Quiz'i istediğiniz kadar tekrar alabilirsiniz
  • İlerlemeniz üstte gösterilecek
Konu 2 / 15
Css Ders