CSS’ de ID Ve Class Kullanımı

 CSS’ de ID Ve Class Kullanımı
Okunuyor CSS’ de ID Ve Class Kullanımı

CSS’ de Class Kullanımı

Genel olarak bir HTML koduna baktığımızda element biçiminde class=”stiller” özelliğini belirttiğini görebilirsiniz.Neden bir class seçimine gerek duymuş olabilirler sizce ? Örnek kodu inceleyelim:

<div class="webstili">Sitemize Hoş Geldiniz..</div>

Yukarıdaki div özelliği içinde yer alan class=”webstili”, o div elementi için CSS özellikleri belirtmemizi sağlayan bir yöntemdir. CSS kodumuzda şu şekilde ifadeler bulunuyorsa:

.webstili {
font: 20px Tahoma, Verdana;
color: red;
}

Nokta (.) kullanarak bir sınıf oluşturduk ve ismini biz atadık.Bu şu anlama geliyor class=”webstili” bulunduran tüm elementler 20 px boyutunda, Tahoma yazı biçiminde ve kırmızı bir yazı tipine sahip olucak.Eğer istersek ki bu tek bir elementte geçerli olsun diye onuda şöyle sağlıyoruz:

div.webstili { 
font: 20px Tahoma, Verdana; 
color: red; 
}

“.stil” yani seçim ismimizin başına div getirmemiz yeterli olacaktır. Bu özellik sayesinde bu CSS kodu sadece DIV elementlerinde geçerli olacaktır.

CLASS Özelliği Kullanmanın Bazı Avantajları:

•Bir stili birden fazla elementte bulundurabilmek

•Kendimizin adlandırdığı özel stiller oluşturup kullanmak

•Stillere CSS de yer verip HTML kodlarımızı sürekli tekrarlanan uzun CSS kodlarından kurtarmak

CSS ID ve Class

CSS’ de ID Kullanımı

<div id="webstili">Sitemize Hoş Geldiniz...</div>

Yukarıda ki örnek kod da ID değeri “webstili” olan bir element bulunuyor.CSS kodlarımızı oluştururken ID’leri şu şekilde çağırmaktayız:

#webstili { 
font: 20px Tahoma, Verdana; 
color: red;
}

Bu sefer ki örnekte ise ID’imizi diyez (#) işareti ile çağırmış olduk.ID’ yi burda kullanma amacımız sadece o belirtiğimiz elemente stil vermesini sağlamaktı.

ID Seçiminde ki Bazı Kurallar!

•ID ye isim verirken rakamları kullanmamamız gerekir.
•ID sadece bir elemente verilen özel bir addır o yüzden her elemente aynı ID’ yi veremeyiz.

ID’ yi Class’ dan Ayıran İki Önemli Özellik

•ID sadece tek bir elementte verilebilir.
•Class ise birden çok elemente verilebilir.

•ID’ de stilleme yaparken diyez (#)
•Class stilleme yaparken ise (.) kullanırız

Bir önceki yazımızda ise size CSS’ in genel kod yapısından bahsetmiştik, o yazımıza ise buradan ulaşabilirsiniz.

Umarım bloğumuzu faydalı bulmuşsunuzdur bugün sizlere CSS’ de ID ve Class kullanımını kısaca anlatmaya çalıştık alakalı elimizden geldiğince bilgi vermeye çalıştık sürçü lisan ettiysek affola diyerek cümlemize son noktayı koyuyoruz.

Yapılan Yorumlar
Bir Yorum Yapın