HTML Sınıf (Class) Yapısı!

#HTML

html class yani sınıf özelliği kullanıldığı etiketlere diğer etiketlerden farklı stiller ve düzen vermemize yarar. Classları defalarca kullanabilirsiniz.

HTML Sınıf (Class) Özelliği Kullanma!
HTML Sınıf (Class) Özelliği Kullanma!

HTML class niteliği, aynı sınıf adına sahip öğeler için eşit stilleri tanımlamak için kullanılır.

Böylece, aynı classözniteliğe sahip tüm HTML öğeleri aynı stile sahip olur.

Buradaki örnekte <div>aynı sınıf adına işaret eden üç unsur var:

<!DOCTYPE html>
<html>
<head>
<style>
.cities {
  background-color: black;
  color: white;
  margin: 20px;
  padding: 20px;
}
</style>
</head>
<body>

<div class="cities">
  <h2>London</h2>
  <p>London is the capital of England.</p>
</div>

<div class="cities">
  <h2>Paris</h2>
  <p>Paris is the capital of France.</p>
</div>

<div class="cities">
  <h2>Tokyo</h2>
  <p>Tokyo is the capital of Japan.</p>
</div>

</body>
</html>

Çıktısı;

See the Pen html class by ArmyYazılım (@armyyazilim) on CodePen.

Satır İçi Öğelerinde Sınıf Özniteliğini Kullanma

HTML classözelliği, satır içi öğelerde de kullanılabilir:

<!DOCTYPE html>
<html>
<head>
<style>
span.note {
  font-size: 120%;
  color: red;
}
</style>
</head>
<body>

<h1>My <span class="note">Important</span> Heading</h1>
<p>This is some <span class="note">important</span> text.</p>

</body>
</html>

Çıktısı;

See the Pen html class satır içi by ArmyYazılım (@armyyazilim) on CodePen.

İpucu: Bu classözellik herhangi bir HTML öğesinde kullanılabilir.

Not: Class adı büyük / küçük harf duyarlıdır!

Belirli Bir Sınıfla Öğeleri Seçme

CSS’de, belirli bir sınıfa sahip öğeleri seçmek için, bir nokta (.) Karakteri ve ardından sınıfın adını yazın:

<style>
.city {
  background-color: tomato;
  color: white;
  padding: 10px;
}
</style>

<h2 class="city">London</h2>
<p>London is the capital of England.</p>

<h2 class="city">Paris</h2>
<p>Paris is the capital of France.</p>

<h2 class="city">Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>

See the Pen html classlar by ArmyYazılım (@armyyazilim) on CodePen.

Birden çok sınıf

HTML öğelerinin birden fazla sınıf adı olabilir, her sınıf adı bir boşlukla ayrılmalıdır.

Örnek;

“city” sınıfına sahip stil elemanları, ayrıca “main” sınıfına sahip stil elemanları almış olabilir burada görüldüğü gibi:

<h2 class="city main">London</h2>
<h2 class="city">Paris</h2>
<h2 class="city">Tokyo</h2>

Yukarıdaki örnekte, ilk <h2>öğesi hem “city” sınıfına hem de “main” sınıfına aittir.

Farklı Etiketler Aynı Sınıfı Paylaşabilir

<h2>ve <p> gibi farklı etiketler aynı sınıf adına sahip ve böylece aynı stili paylaşabilir:

<h2 class="city">Paris</h2>
<p class="city">Paris is the capital of France</p>

JavaScript’te Sınıf Özniteliğini Kullanma

Sınıf adı ayrıca, belirtilen sınıf adına sahip öğeler için belirli görevleri gerçekleştirmek için JavaScript tarafından da kullanılabilir.

JavaScript, getElementsByClassName()yöntemi kullanarak belirtilen sınıf adındaki öğelere erişebilir :

Örnek

Bu örnekte bir kullanıcı bir düğmeye tıkladığında, “city” sınıf adındaki tüm öğeleri gizler:

<script>
function myFunction() {
  var x = document.getElementsByClassName("city");
  for (var i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
}
</script>

Çıktısı;

See the Pen html javascript by ArmyYazılım (@armyyazilim) on CodePen.

Yukarıdaki örnekteki kodu anlamadıysanız endişelenmeyin.

HTML JavaScript bölümümüzde JavaScript hakkında daha fazla bilgi edinebilir veya JavaScript Eğitimimizi inceleyebilirsiniz .

İlginizi çekebilir…

WordPress Kişisel Blog Temaları! (Ücretli – Ücretsiz)

Bu makaleyi beğendiyseniz, lütfen WordPress video eğiticileri için YouTube Kanalımıza abone olun . Bizi Twitter ve İnstagram‘da da bulabilirsiniz …


Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

İçerik Metası
İbrahim Bozkurt /////