Şimdi yükleniyor
HTML Kod Portalı

HTML Class Nedir?

HTML nedir

HTML’de class niteliği, bir veya birden fazla HTML öğesini aynı stil ve işlevsellik kurallarına göre gruplandırmak için kullanılır. class niteliği, CSS ve JavaScript ile birlikte çalışarak tasarım ve etkileşim özelliklerini belirlemek için oldukça kullanışlıdır.

class Niteliği Nasıl Tanımlanır?

Bir HTML etiketine class niteliği eklemek için, etiketin class özelliğini kullanarak bir isim atarız. Örneğin:

<div class="kutu"></div>
<p class="kutu">Bu bir paragraf</p>

Yukarıdaki örnekte, hem div hem de p öğesi "kutu" sınıfına atanmış, böylece her ikisine de aynı CSS veya JavaScript işlemi uygulanabilir.

Birden Fazla class Kullanımı

Bir öğeye birden fazla sınıf eklemek için class niteliğinde isimleri boşlukla ayırabiliriz. Örneğin:

<div class="kutu yuvarlak"></div>

Bu şekilde, hem kutu hem de yuvarlak sınıfları bu div öğesine uygulanacaktır.

CSS ile class Seçicilerini Kullanma

class niteliğini kullanarak belirli sınıflara CSS ile stiller uygulayabiliriz. . (nokta) işareti ile sınıf isimlerini seçeriz:

.kutu {
    width: 100px;
    height: 100px;
    background-color: lightblue;
}

.yuvarlak {
    border-radius: 50%;
}

Bu CSS örneğinde, .kutu sınıfı 100×100 piksel boyutlarında mavi bir kutu oluştururken, .yuvarlak sınıfı öğeyi yuvarlak yapar.

JavaScript ile class Kullanımı

JavaScript ile class ekleyip çıkararak sayfadaki öğelere etkileşimli işlevler kazandırabiliriz. Örneğin:

document.querySelector(".kutu").classList.add("aktif");

Bu örnek, sayfada .kutu sınıfına sahip ilk öğeye "aktif" sınıfını ekler.

class ve id Farkı

  • class: Aynı sınıfı birden çok öğeye atayabilirsiniz.
  • id: Sadece bir öğeye atanmalıdır ve sayfada benzersiz olmalıdır.

Örnek Kullanım

Aşağıda bir sınıf kullanım örneği verilmiştir:

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Class Örneği</title>
    <style>
        .kutu {
            width: 150px;
            height: 150px;
            background-color: #4CAF50;
            margin: 10px;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .yuvarlak {
            border-radius: 50%;
        }
    </style>
</head>
<body>

    <div class="kutu">Kare Kutu</div>
    <div class="kutu yuvarlak">Yuvarlak Kutu</div>

</body>
</html>

Bu örnekte, kutu sınıfı hem kare hem de yuvarlak kutuya uygulanmıştır. İkinci kutuya ayrıca yuvarlak sınıfı eklendiği için, CSS’teki border-radius özelliği devreye girer ve kutuyu yuvarlak hale getirir.

Share this content:

Göz At

Yorum gönder