HTML sınıfı özelliği, bir HTML öğesi için bir sınıf belirtmek için kullanılır.
Birden fazla HTML öğesi aynı sınıfı paylaşabilir. Bu sınıflar kullanılarak toplu CSS düzenlemesi yapılabilir.
HTML class Özelliğini Kullanma
Class, genellikle stil sayfasındaki bir sınıf adına işaret etmek için kullanılabilir. Belirli sınıf adına sahip öğelere erişmek ve bunları değiştirmek için bir JavaScript tarafından da kullanılabilir.
Aşağıdaki örnekte sehir değerine sahip bir class ögesi mevcut. Bu değer <div> etiketine verilmiştir. Head bölümünde yapacağımız .sehir sınıfının (class) düzeltilmesiyle bütün bu sınıfı içeren alanlarda düzenleme yapılacaktır.
<!DOCTYPE html>
<html>
<head>
<style>
.sehir {
background-color: tomato;
color: white;
border: 2px solid black;
margin: 20px;
padding: 20px;
}
</style>
</head>
<body>
<div class="sehir">
<h2>İstanbul</h2>
<p>En Kalabalık Şehirdir.</p>
</div>
<div class="sehir">
<h2>Ankara</h2>
<p>Türkiye'nin Başkentidir.</p>
</div>
<div class="sehir">
<h2>Hatay</h2>
<p>Sınır şehridir.</p>
</div>
</body>
</html>
Aşağıdaki örnekte not değerine sahip sınıf iki <span> etiketini etkilemektedir.
<!DOCTYPE html>
<html>
<head>
<style>
.bicim {
font-size: 120%;
color: red;
}
</style>
</head>
<body>
<h1>Türkiye'nin Başkenti <span class="bicim">Ankara</span> şehridir.</h1>
<p>Türkiye'nin En Kalabalık Yeri <span class="bicim">İstanbul</span> şehridir.</p>
</body>
</html>
Not : Class niteliği herhangi bir HTML ögesinde kullanılabilir.
Not : Class isimleri büyük harf / küçük harf duyarlıdır.
HTML Class Syntax
Class oluşturmak için sabit bir sözdizimi vardır. Nokta (.) ve bir sınıf adı, süslü küme parantezi ile CSS özelliği oluşturulmaktadır.
Aşağıdaki örnekte sehir adlı sınıfı görebilirsiniz.
<!DOCTYPE html>
<html>
<head>
<style>
.sehir {
background-color: tomato;
color: white;
border: 2px solid black;
margin: 20px;
padding: 20px;
}
</style>
</head>
<body>
<div class="sehir">
<h2>İstanbul</h2>
<p>En Kalabalık Şehirdir.</p>
</div>
<div class="sehir">
<h2>Ankara</h2>
<p>Türkiye'nin Başkentidir.</p>
</div>
<div class="sehir">
<h2>Hatay</h2>
<p>Sınır şehridir.</p>
</div>
</body>
</html>Çoklu Sınıflar
HTML ögeleri birden fazla sınıfa sahip olabilir. Birden fazla sınıf tanımlamak için sınıflar arasında boşluk bırakmak gerekir. İlgili etiket her iki sınıfın özelliklerini taşıyacaktır.
<!DOCTYPE html>
<html>
<head>
<style>
.sehir {
background-color: tomato;
color: white;
padding: 10px;
}
.ortala {
text-align: center;
}
</style>
</head>
<body>
<h2 class="sehir ortala">Ankara</h2>
<h2 class="sehir">İstanbul</h2>
<h2 class="sehir">Hatay</h2>
</body>
</html>
Farklı Ögeler Aynı Sınıfı Paylaşabilir
Farklı etiketlerin aynı sınıfı paylaşması mümkündür. Aşağıdaki örnekte <h2> ve <p> sehir sınıfını paylaşmaktadır.
<!DOCTYPE html>
<html>
<head>
<style>
.sehir {
background-color: tomato;
color: white;
padding: 10px;
}
</style>
</head>
<body>
<h2 class="sehir">Ankara</h2>
<p class="sehir">İstanbul</h2>
</body>
</html>
Javascript Sınıf Kullanımı
Class, JavaScript tarafından belirli öğelere erişmek için de kullanılır.
JavaScript, getElementsByClassName() yöntemiyle belirli bir sınıf adına sahip öğelere erişebilir:
Aşağıdaki örnekte sehir Class’ına sahip bütün etiketleri gizleme örneği yer almaktadır. İlerleyen JavaScript eğitimi derslerinde bunlara daha detaylı değineceğiz.
<!DOCTYPE html>
<html>
<body>
<button onclick="fonksiyonCalistir()">Şehir İsimlerini Gizle</button>
<h2 class="sehir">Hatay</h2>
<p>Türkiye'de Bir Şehir.</p>
<h2 class="sehir">Ankara</h2>
<p>Türkiye'de Bir Şehir.</p>
<h2 class="sehir">İstanbul</h2>
<p>Türkiye'de Bir Şehir.</p>
<script>
function fonksiyonCalistir() {
var x = document.getElementsByClassName("sehir");
for (var i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
}
</script>
</body>
</html>
Örnek içerisinde javascript fonksiyonu yer aldığı için anlamamanız normal. Dediğimiz gibi, merak etmeyin javascript dersleri bölümünde bunlara detaylı yer vereceğiz.
