HTML Dersleri 11 – Sınıflar (Classes)


Merhaba değerli Kodlama Vakti okuyucuları , geçen dersimizde Bloglar ve Div Kullanımı adlı yazımızda  HTML’de Div ve Span etiketlerinin kullanımını öğrenmiştik. Önceki dersimizi incelemediyseniz HTML Dersleri 10 – Bloklar ve Div Kullanımı linkine tıklayarak ulaşabilirsiniz. Bu dersimizde HTML Sınıflar (Classes) konusuna gözatıp, HTML’de etiketlerin sınıflarını inceleyip , css ile şekillendirmeler yapacağız. 

HTML'de sınıf tanımı, eklendiği HTML etiketinin özelliklerini belirler. Yani canlılardan örnek vermek gerekirse , aslanlar yırtıcı sınıfına aittir yani , yırtıcı diye tanımlanmış bir yapının tüm özelliklerine sahiptir. HTML'de de aynı bu şekilde çalışmaktadır , önceden tanımladığımız özellikleri istediğimiz etikete atamamızı sağlar sınıflar.

Genel bir tanım yapmak gerekirse , HTML sınıfları , aynı sınıf adına sahip öğeler için eşit stiller tanımlamak için kullanılır. Dolayısıyla , aynı sınıf niteliğine sahip tüm HTML etiketleri aynı biçime ve stile sahip olurlar.

Sınıflar html etiketleri içerisinde "class" parametresi ile tanımlanır. İstediğimiz her HTML etiketine sınıf verebiliriz. Bu etiketlere birden fazla sınıfta verilebilir bir sınırlama söz konusu değil.

Örnek kullanım ;

<p class="ornek"> Lorem ipsum </p>

Html etiketini sınıflandırmayı öğrendik , şimdi bu sınıfları nasıl özelleştireceğiz ? Sınıfları aslında bir çok dil üzerinde kullanmak mümkün , CSS ve Javascript bunların en yaygın kullanım alanlarıdır. Sınıf verdiğimiz bir etiketi ihtiyacımıza göre şekillendirmek mümkündür. Bu dersimizde biz sınıfları stiller üzerinden göstereceğiz.

CSS'de sınıflar başında nokta (.) ile tanımlanır ve sonrasında öğrendiğimiz gibi stil şablonu üzerinde yazılır.

ÖRNEK KULLANIM

Elimizde 3 adet div elementi olduğunu düşünelim ve bu 3 div etiketini de aynı özellikleri verelim ;

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

<div class="baskent">
  <h2>Ankara</h2>
  <p>Ankara Türkiye'nin Başkentidir.</p>
</div>

<div class="baskent">
  <h2>Paris</h2>
  <p>Paris Fransa'nın Başkentidir.</p>
</div>

<div class="baskent">
  <h2>Tokyo</h2>
  <p>Tokyo Japonya'nın başkentidir.</p>
</div>

</body>
</html>

Görüldüğü üzere style etiketleri içerisinde .baskent adında bir stil tanımladık. Başında nokta olduğu için bir class (sınıf) tanımlamış olduk. Bu sınıfları ise div etiketlerinin class parametrelerine, başlarında nokta olmadan tam ismi ile yazdık. Böylelikle 3 div etiketinin arkaplanları beyaz , yazı renkleri ise siyah olmuş oldu.

Tebrikler! Bu derste  HTML’de Sınıflar (Classes) kullanımını, Sınıf kavramını , HTML'de sınıf kullanımını , CSS'de sınıf kullanımını öğrendik.Kodlama Vakti ile kodlama hiç bu kadar kolay olmamıştı.

HTML Derslerinin onbirinci kısmı olan dersimizde , HTML’de Sınıflar (Classes) Kullanımı konusunu öğrendik. Ders sonunda ki testimize katılarak öğrendiklerinizi pekiştirebilirsiniz. Derslerimiz hoşunuza gittiyse eğer paylaş butonlarından sevdiklerinizle paylaşabilirsiniz !

Test’e katıl öğrendiklerini pekiştir !

TESTE BAŞLAMAK İÇİN TIKLAYINIZ!

Bir sonraki derse  “HTML Dersleri 12 – ID KULLANIMI” geçmek için tıklayınız !

 

Bu içeriği beğendiyseniz paylaşarak destek olabilirsiniz!


Eğitim İçeriği

Eğitim HTML Dersleri
Kategori Web Programlama
Ders Adeti 19 Ders
Dil Türkçe
Güncelleme 12/2020
  • HTML Dersleri

    HTML Dersleri Sıfırdan İleri Seviyeye

    Kategori Web Programlama
    Ders Süresi 19 Ders
    Dil Türkçe
    Güncelleme 12/2020
    Derse Başla
  • Java Dersleri

    Java Dersleri ve Nesne Yönelimli Programlama

    Kategori Programlama Dili
    Ders Süresi 125 Ders
    Dil Türkçe
    Güncelleme 09/2020
    Derse Başla
  • CSS Dersleri

    CSS Dersleri Başlangıçtan İleri Seviyeye

    Kategori Web Programlama
    Ders Süresi 41 Ders
    Dil Türkçe
    Güncelleme 10/2021
    Derse Başla