HTML class özniteliği

Tanım ve Kullanım

class Öznitelik, elemanın sınıf adını (classname) belirler.

class Özellik genellikle stil tablosundaki sınıflara (class) işaret etmek için kullanılır. Ancak, JavaScript (HTML DOM) ile belirli bir sınıfa sahip HTML elemanlarını değiştirmek için de kullanılabilir.

Ayrıca bkz:

HTML eğitim:HTML özellikleri

CSS eğitim:CSS语法

CSS referans el kitabı:CSS .class seçicisi

HTML DOM referans el kitabı:HTML DOM getElementsByClassName() metodu

HTML DOM referans el kitabı:HTML DOM className özelliği

HTML DOM referans el kitabı:HTML DOM classList özelliği

HTML DOM referans el kitabı:HTML DOM Style nesnesi

Örnek

Örnek 1

HTML belgesinde class özelliğini kullanın:

<html>
<head>
<style>
h1.intro {
  color: blue;
}
p.important {
  color: green;
}
</style>
</head>
<body>
<h1 class="intro">Header 1</h1>
<p>A paragraph.</p>
<p class="important">Lütfen dikkat edin, bu önemli bir paragraftır。:）</p>
</body>
</html>

Kişisel olarak deneyin

Sayfa altında daha fazla örnek bulunmaktadır。

Gramer

<element class="classname">

Özellik değeri

Değer Açıklama
classname

Bir elemente bir veya daha fazla sınıf adı belirleyin。

Birden fazla sınıf belirlemek için sınıf adlarını boşluk ile ayırabilirsiniz.

Bu, bir HTML elementine birden fazla CSS sınıfı eklemenize olanak tanır.

Örneğin:<span class="left important">

Adlandırma kuralları:

  • A-Z veya a-z ile başlamalıdır
  • Ardına gelebilir: harf (A-Za-z), rakam (0-9), tire ("-") ve alt çizgi ("_")

Daha fazla örnek

Örnek 2

Bir HTML elementine çoklu sınıf ekleyin:

<!DOCTYPE html>
<html>
<head>
<style>
h1.intro {
  color: blue;
  text-align: center;
}
.important {
  background-color: yellow;
}
</style>
</head>
<body>
<h1 class="intro important">Başlık 1</h1>
<p>Bir paragraf.</p>
</body>
</html>

Kişisel olarak deneyin

Örnek 3

JavaScript kullanarak ilk class="example" elementine (sıra 0) sarı arka plan rengi ekleyin。

let x = document.getElementsByClassName("example");
x[0].style.backgroundColor = "yellow";

Kişisel olarak deneyin

Örnek 4

"mystyle" sınıfını id'si "myDIV" olan öğeye JavaScript ile ekleyin:

document.getElementById("myDIV").classList.add("mystyle");

Kişisel olarak deneyin

Tarayıcı desteği

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Destek Destek Destek Destek Destek