- Konu sahibi
- #1
CSS class, HTML öğelerine bir veya daha fazla öğeyi ortak biçimde seçip stillendirmek için verilen isimdir. HTML tarafında
Aşağıdaki dosyayı
Başarılı sonuçta iki
Tarayıcı HTML içindeki
Bir öğeye birden fazla class verilebilir. Class isimleri boşlukla ayrılır:
Bu örnekte düğme iki kuralı birden alır. Böylece
Seçim yaparken temel karar aşağıdaki gibidir:
Kart, buton, menü öğesi veya uyarı kutusu gibi tekrar kullanılacak tasarımlarda class tercih edin. Aynı class'ı farklı HTML öğelerine uygulayabilirsiniz; ancak class adını öğenin görünümünü veya rolünü anlatacak şekilde seçmek bakımı kolaylaştırır.
Yazılmamalıdır.
Evet.
class niteliğiyle yazılır, CSS tarafında ise class adı başına nokta konularak seçilir. Örneğin class="kart" kullanan tüm öğeler .kart seçicisiyle aynı kurallara bağlanabilir.En küçük çalışan örnek
Aşağıdaki dosyayı
index.html adıyla kaydedip tarayıcıda açın:
HTML:
<!doctype html>
<html lang="tr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>CSS class örneği</title>
<style>
.kart {
max-width: 320px;
padding: 16px;
border: 1px solid #ccc;
border-radius: 5px;
background: #f7f7f7;
}
.kart-baslik {
color: #174ea6;
font-size: 20px;
}
</style>
</head>
<body>
<article class="kart">
<h2 class="kart-baslik">Ürün başlığı</h2>
<p>Bu içerik ortak bir CSS class ile biçimlendirildi.</p>
</article>
<article class="kart">
<h2 class="kart-baslik">Başka bir kart</h2>
<p>Aynı class, birden fazla öğede kullanılabilir.</p>
</article>
</body>
</html>Başarılı sonuçta iki
article öğesi aynı kutu görünümünü, iki h2 öğesi de aynı başlık stilini alır. Hiçbir görünüm değişmiyorsa önce HTML'deki class adının CSS'deki adla birebir aynı olduğunu, CSS kodunun <style> içinde veya doğru dosyada bulunduğunu kontrol edin.Class nasıl çalışır?
Tarayıcı HTML içindeki
class değerini okur ve CSS kurallarındaki class seçicileriyle eşleştirir. CSS seçicisinin başındaki nokta önemlidir: HTML'de class="uyari", CSS'te .uyari yazılır. Class adları büyük-küçük harfe duyarlıdır; .Uyari ile class="uyari" aynı kabul edilmez.Bir öğeye birden fazla class verilebilir. Class isimleri boşlukla ayrılır:
HTML:
<button class="buton birincil">Kaydet</button>
CSS:
.buton {
border-radius: 5px;
padding: 10px 14px;
}
.birincil {
color: white;
background: #1769aa;
}Bu örnekte düğme iki kuralı birden alır. Böylece
.buton ortak yapı ve .birincil renk gibi farklı sorumlulukları taşıyabilir.Class mı, id mi?
Seçim yaparken temel karar aşağıdaki gibidir:
| Özellik | Class | ID |
|---|---|---|
| CSS yazımı | .menu | #menu |
| Kullanım | Birçok öğede kullanılabilir | Belirli ve benzersiz öğe için kullanılır |
| Uygun tercih | Tekrarlanan bileşen ve durum stilleri | Tekil bölüm veya JavaScript bağlantısı |
Sık yapılan hatalar
- CSS'te nokta kullanmamak:
kart { ... }bir class seçicisi değildir;.kart { ... }yazılmalıdır. - Class ile ID'yi karıştırmak: HTML'de
class="kart"varsa CSS'te#kartdeğil.kartkullanılmalıdır. - İsimleri farklı yazmak:
class="kart-baslik"ile.kart-baslıkaynı değildir. - Class değerlerini virgülle ayırmak: Birden fazla class için virgül değil boşluk kullanılır. Doğru biçim
class="kart aktif"şeklindedir. - Aşırı genel isim seçmek:
.kirmiziyalnız renge bağlanır; renk değiştiğinde isim yanıltıcı olabilir..uyarigibi amaca dayalı isimler daha sürdürülebilirdir.
Styles bölümünü açın. Class kuralı görünmüyorsa seçici veya dosya bağlantısı hatalıdır; kural üstü çizili görünüyorsa başka bir CSS kuralı öncelik kazanmıştır. Bu durumda seçicinin kapsamını, kural sırasını ve gereksiz yüksek özgüllük kullanımını kontrol edin.Sık sorulan sorular
Bir HTML öğesinde aynı class iki kez yazılabilir mi?
Yazılmamalıdır.
class="kart kart" yerine class adını bir kez yazın; farklı stil gerekiyorsa ayrı bir class ekleyin.Class adı Türkçe karakter içerebilir mi?
Evet.
.başlık gibi Türkçe harf içeren geçerli CSS adları kullanılabilir. HTML ve CSS’de aynı karakterleri ve tutarlı kodlamayı koruyun. Kaçışlama ihtiyacı yalnız Türkçe harfle ilgili değildir; rakamla başlayan veya soru işareti gibi özel karakter içeren bazı adlar seçicide kaçış gerektirir. Ekipler isterse tutarlılık için .urun-karti gibi bir adlandırma kuralı seçebilir.HTML’de class sırası hangi stilin kazanacağını değiştirir mi?
class="buton birincil" yerine class="birincil buton" yazmak, CSS kural önceliğini değiştirmez. Kazanan bildirim CSS cascade kurallarıyla seçilir. Sınıf listesindeki son adı otomatik olarak daha güçlü kabul etmeyin.