HTML Dilinde HTML Classes Kullanımı

Sınıf adları, büyük/küçük harf duyarlıdır ve genellikle bir harfle başlamalıdır. Rakamlar, kısa çizgiler (-) ve alt çizgiler (_) içerebilirler. Sınıf adlarının anlamlı ve açıklayıcı olması, kodun okunabilirliğini ve sürdürülebilirliğini artırır.

Pratik Kullanım Örnekleri

Aşağıdaki örnekler, class niteliğinin farklı kullanım senaryolarını göstermektedir:

Örnek 1: CSS ile Stil Uygulama
Bu örnekte, iki farklı

etiketine farklı sınıflar atanmış ve bu sınıflara CSS aracılığıyla farklı stiller uygulanmıştır. Bu, aynı türdeki elementleri farklı görsel özelliklerle sunmak için yaygın bir yöntemdir.

Bu paragraf kırmızı renkte olacaktır.
Bu paragraf mavi renkte olacaktır.


.kırmızı-metin {
    color: red;
    font-weight: bold;
}

.mavi-metin {
    color: blue;
    font-style: italic;
}

Örnek 2: Birden Fazla Sınıf Kullanımı
Bir elemente birden fazla sınıf atayarak, o elementin hem uyarı hem de orta-boyut sınıflarının tanımladığı stilleri alması sağlanır. Bu, CSS kurallarını daha modüler hale getirmeye yardımcı olur.

    
Bu bir uyarı mesajıdır ve orta boyutta gösterilecektir.



.uyarı {
    border: 1px solid orange;
    background-color: #fff3cd;
    padding: 10px;
}

.orta-boyut {
    font-size: 1.2em;
}

Örnek 3: JavaScript ile Etkileşim
JavaScript, class niteliğini kullanarak belirli elementleri seçebilir ve üzerlerinde dinamik işlemler yapabilir. Aşağıdaki örnekte, gizle-goster sınıfına sahip bir butona tıklandığında, kutucuk sınıfına sahip bir

Kutucuğu Gizle/Göster

    
Bu kutucuk JavaScript ile kontrol ediliyor.



document.querySelector('.gizle-goster').addEventListener('click', function() {
    document.querySelector('.kutucuk').classList.toggle('gizli');
});

// style.css (Örnek)
.gizli {
    display: none;
}