class Özelliği

class özelliği, bir elemente (element ile kastedilen etikettir) bir veya daha fazla sınıf atar.

Bu, daha sonra aynı sınıfa sahip element grubuna CSS üzerinden erişip belirli özellikleri uygulamak içindir (örneğin, metin rengini, yazı tipi boyutunu değiştirmek gibi).

Ayrıca, HTML sayfasındaki elementleri seçmeye yarayan, class özelliğine benzer şekilde çalışan bir id özelliği de vardır.

class özelliği ile id özelliği arasındaki fark şudur: class bir grup elementi seçer (sadece bir elemente verilmiş olsa bile daha sonra başka bir elemente de verilebilir), id ise benzersiz bir elementi seçer (sitede aynı id'ye sahip başka bir element olmamalıdır, aksi takdirde çakışma olur).

Bir elemente class mı yoksa id mi verileceği nasıl anlaşılır? Class, site sayfalarında tekrarlanan elementlere verilir (aynı CSS kodunu defalarca yazmamak için). Şu an için elinizdeki element tek olsa bile, ileride benzer elementlerin çıkabileceğini hissediyorsanız - bu elemente class verin. Eğer böyle bir elementin benzersiz olduğundan eminiseniz - o zaman ona id verin. Her ne kadar günümüzde tüm elementlere class verip id'yi JavaScript için bırakma eğilimi olsa da, bu genel kabul görmüş değildir.

Bir elemente birden fazla sınıf verilebilir, bu durumda sınıflar boşlukla ayrılarak listelenmelidir.

Sınıf isimleri İngilizce harfler, rakamlar, boşluksuz olarak yazılmalıdır (boşluk sınıfları birbirinden ayırır, onun yerine alt çizgi veya tire kullanılabilir). Sınıflar rakamla başlamamalıdır (HTML5'te artıl mümkün olsa da eski tarayıcılarda çalışmaz).

Sınıflara İngilizce dilinde isimler verilmelidir (Rusça değil, sadece İngilizce harflerle değil!). İsimler anlamlı, sınıfın özünü yansıtır olmalıdır.

Örnek

test sınıfına sahip tüm paragraflara kırmızı metin rengi verelim:

<p class="test">test sınıfına sahip paragraf.</p>
<p>Sınıfı olmayan kontrol paragrafı.</p>

.test {
	color: red;
}

Örnek . Element için Birden Fazla Sınıf

Burada ise ilk paragrafa birden fazla sınıf verelim - test1 ve test2 (aralarına boşluk koyarak yazalım). test1 sınıfı kırmızı metin rengi verir, test2 sınıfı ise yazı tipi boyutunu 20px yapar. İkinci paragrafa sadece test1 sınıfı verilmiştir (bu paragraf kırmızı olur), üçüncü paragrafa ise test2 sınıfı verilmiştir (bu paragrafın yazı tipi boyutu 20px olur). İki sınıfa sahip olan ilk paragraf, aynı anda hem kırmızı renge hem de 20px yazı tipi boyutuna sahip olacaktır:

<p class="test1 test2">test1 ve test2 olmak üzere iki sınıfa sahip paragraf.</p>
<p class="test1">test1 sınıfına sahip paragraf.</p>
<p class="test2">test2 sınıfına sahip paragraf.</p>
<p>Sınıfı olmayan kontrol paragrafı.</p>

.test1 {
	color: red;
}
.test2 {
	font-size: 20px;
}

Ayrıca Bakınız

elementlere benzersiz kimlikler atayan id özelliği,