İlginizi Çekebilir

CSS Class Kullanımı

CSS Class Kullanımı

HTML kodlarımızın içerisinde CSS ile özelleştirmeler yaptığımız zaman, özelleştirme bölümlerini tanımlamak için iki tane öznitelik kullanmaktayız. Bunlardan birincisi: Class özniteliği , ikincisi: ID özniteliğidir.
Class özniteliği, bir HTML öğesi için tek veya birden fazla sınıfın adı belirtmek için kullanılabilir. Tek bir sınıf içinde kullanabiliriz, birden fazla sınıfı özelleştirmek ve düzenlemek içinde kullanabiliriz. Class özniteliği, grup halinde bulunan HTML kod bloğuna CSS kodu tanımlamak için kullanılır.

<style></style> etiketlerinin içerisinde ( . ) nokta işaretiyle belirtilir.

Birden fazla örnek ile Class kullanımının nasıl olduğuna ayrıntılı bir şekilde bakalım.
 

1Class bölümü oluşturmak ve özelleştirmek


İlk olarak body içerisinde h1 etiketiyle bir class oluşturalım.

 
Ardından CSS özelleştirmelerini yapmak için, <head></head> bölümü içerisinde
<style></style> bölümü açalım.

 
Şimdi oluşturduğumuz style bölümü içerisinde, h1 başlığımızın özelleştirmelerini yapalım.

CSS Class Kullanımı

 
 

2Birden fazla farklı etiketlere Class tanımlama


CSS ile özelleştirmeler yaparken, birbirlerinden farklı etiketleri ayrı ayrı özelleştirebiliriz. Birden fazla class bölümü oluşturarak özelleştirmelerimizi yapmak mümkündür.

Body içerisinde içeriklerimizi girdik. Şimdi bunların ayrı ayrı özelleştirmelerini yapalım.

Class Örnekleri

CSS Class Kullanımı

Merhaba burası 1. Başlığın içeriğidir. Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Vestibulum sit amet sapien vitae mi efficitur placerat. Suspendisse potenti. Morbi
accumsan, enim non malesuada blandit, metus purus interdum ex, eu facilisis risus elit non tortor.
Ut scelerisque augue ut euismod faucibus. Proin interdum at sem vel suscipit. Mauris faucibus, est.

CSS Class Kullanımı 2

Merhaba burası 2. Başlığın içeriğidir. Donec id lectus lacinia, pharetra sem ac,
aliquet felis. Mauris ac lacus vitae dolor pretium pulvinar ac eget elit. Nunc libero leo, accumsan a
tellus quis ortis dapibus eros. Pellentesque orci quam, sollicitudin vitae odio eget, finibus sagittis
ante ruen, euismod ante est, ut faucibus metus dapibus ac. Donec sollicitudin sapien vel mauris sagittis.

 
 

3Class ismi vermeden özelleştirme yapmak


Yukarıda bulunan örnekte bulunan h1 başlığında bir class ismi vermeden tanımlama yapmıştık. Etiketlere herhangi bir isim tanımlaması yapmadan sadece etiketinin belirterek özelleştirme yapabiliriz.

Bu örneğimizde ayrıca listeler de ekledik. Listelere de birer özelleştirme tanımlayacağız.

Class Örnekleri

CSS Class Kullanımı

Merhaba burası 1. Başlığın içeriğidir. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Vestibulum sit amet sapien vitae mi efficitur placerat. Suspendisse potenti. Morbi accumsan, enim
non malesuada blandit, metus purus interdum ex, eu facilisis risus elit non tortor. Ut scelerisque
augue ut euismod faucibus. Proin interdum at sem vel suscipit. Mauris faucibus, est non maximus.

CSS Class Kullanımı 2

Merhaba burası 2. Başlığın içeriğidir. Donec id lectus lacinia, pharetra sem ac, aliquet felis.
Mauris ac lacus vitae dolor pretium pulvinar ac eget elit. Nunc libero leo, accumsan a tellus quis
ortis dapibus eros. Pellentesque orci quam, sollicitudin vitae odio eget, finibus sagittis ante ruen,
euismod ante est, ut faucibus metus dapibus ac. Donec sollicitudin sapien vel mauris sagittis, feugiat

  1. Çay
  2. Kahve
  3. Su
  1. Limonata
  2. Meyve suyu
  3. Gazoz
Yorum Yap

Yorum Yap