Css Ders 1 – Css Nedir ve Temel Css Kavramları

CSS Nedir?

  • HTML ile İlişkisi: HTML, web sayfasının yapısını oluşturur, yani içeriğini tanımlar. Başlıklar, paragraflar, resimler gibi öğeleri belirler. Ancak HTML, bu öğelerin nasıl görüneceği hakkında bilgi vermez.
  • CSS’in Rolü: CSS (Cascading Style Sheets), web sayfasının nasıl sunulduğunu kontrol eder. Renkleri, yazı tiplerini, düzeni ve diğer görsel özellikleri belirler.
  • Sunum Katmanının Ayrılması: HTML yapıyı, CSS ise sunumu yönettiği için bu iki katmanın ayrılması prensibi önemlidir. Bu, kodun daha okunabilir, bakımı kolay ve yeniden kullanılabilir olmasını sağlar.
  • Web Tasarımındaki Önemi: CSS olmadan web sayfaları sıkıcı ve tutarsız görünür. CSS sayesinde görsel olarak çekici, kullanıcı dostu ve markaya uygun web siteleri oluşturulabilir.

CSS Sözdizimi

  • Temel Yapı: Bir CSS kuralının temel yapısı: selector { property: value; }
    • Seçici (Selector): Hangi HTML öğesinin stilinin değiştirileceğini belirtir. 
    • Özellik (Property): Değiştirilecek olan stili tanımlar (örneğin, color, font-size).
    • Değer (Value): Özelliğin alacağı değeri belirtir (örneğin, blue, 16px).
  • Yorum Satırları: Kodun anlaşılabilirliğini artırmak için yorum satırları kullanılır. Css’te tek satırlı ve çok satırlı yorumlar aynı işaretlerle belirtilir:
    • Tek satırlı yorumlar: /* Bu bir yorumdur */
    • Çok satırlı yorumlar: /* Birden fazla satırı kapsayan yorum */
  • Noktalı Virgül (;) Kullanımı: Her özelliğin ardından noktalı virgül kullanımı önemlidir. Noktalı virgül, özellikleri ayırır ve CSS motorunun kodu doğru şekilde işlemesini sağlar.
  • Büyük/Küçük Harf Duyarlılığı: CSS özelliklerinin ve değerlerinin genellikle büyük/küçük harf duyarlığı yoktur  (ancak bazı durumlarda duyarlı olabilir). Fakat seçicilerde dikkatli olunması gereklidir.
  • Örnek:
    • p { color: red; font-size: 14px; } (Tüm paragrafların rengini kırmızı ve yazı boyutunu 14px yapar.)
    • h1 { text-align: center; } (Tüm başlıkların metnini ortalar.)

CSS’i HTML’e Uygulama Yöntemleri

Inline Stiller:

  • HTML öğesi içinde style özniteliği kullanılarak stil tanımlama: <p style=”color: blue;”>Bu bir paragraftır.</p>
  • Avantajları: Hızlı ve basit.
  • Dezavantajları: Kodun dağınıklığına yol açar, yeniden kullanılabilirlik düşüktür, bakımı zordur. Sadece çok özel durumlarda (örneğin, JavaScript ile dinamik olarak değişen stiller) kullanılmalıdır.

Internal Stiller:

  • HTML belgesi içinde <style> etiketi kullanılarak CSS tanımlama:
HTML
<head>
  <title>Sayfa Başlığı</title>
  <style>
    p { color: green; }
  </style>
</head>
  • Avantajları: Belirli bir sayfaya özel stil tanımlamak için kullanışlıdır.
  • Dezavantajları: Birden fazla sayfada aynı stilleri kullanmak zordur, kodun okunabilirliğini azaltabilir.

External Stil Sayfaları:

  • Ayrı bir .css uzantılı dosya oluşturma (örneğin, styles.css).
  • HTML belgesinde <link> etiketi ile CSS dosyasını bağlama:
HTML
<head>
  <title>Sayfa Başlığı</title>
  <link rel="stylesheet" href="styles.css">
</head>
  • Avantajları: En iyi uygulama! Kodun düzenli ve bakımı kolay olmasını sağlar, stilleri birden fazla sayfada yeniden kullanılabilir hale getirir.
  • Dezavantajları: Ek bir dosya yönetmek gerekir.

CSS Önceliği (Specificity)

Öncelik Sırası:

  • Inline Stiller: En yüksek önceliğe sahiptir.
  • Internal Stiller: Inline stillerden sonra gelir.
  • External Stiller: En düşük önceliğe sahiptir (ancak inline ve internal stiller tarafından geçersiz kılınabilir).

!important İfadesi: Bir stilin diğer tüm stilleri geçersiz kılabileceğini belirtmek için !important ifadesi kullanılır. Ancak, bu ifadenin aşırı kullanımından kaçınılması gereklidir, çünkü kodun anlaşılmasını ve bakımını zorlaştırabilir.

Kaynak: https://developer.mozilla.org/en-US/docs/Web/CSS

Etiketler