Class ve Id Farkı Nedir?

Web sayfalarımız da artık yaygınlaşan teknolojiyle birlikte tablosuz tasarım adını verdiğimiz teknelojiye yani cssli tasarımlara doğru yönelmeye başladık.
Ama her yeni teknoloji gibi Cssde de çıkan sorunlar bizi yormaya başladı.
Aslında bu dersimizde Css sorunlarından değilde Css de bulunan iki önemli başlıktan bahs edicez.Bu başlıklarımız ID ve Class başlıklarıdır.
Öncelikle ID başlığını açıklıyarak başlıyalım.
ID :IDyi class css elementinden ayıran en önemli özellik tek bir defa bir
<div>’e eklenebilmesidir.
ID şu şekilde de ele alına bilir ID bir kimlik numarasıdır ve bir kişiye aittir.
Class ise bir sınıfdır ve birden çok kişiye aittir.
ID classlardan simgesel olarakda ayrılmaktadır.ID lerde # kullanılırken classlarda . kullanılmaktadır.
Html Kodu

<div id="kutu">Haberler</div>

Css (Stil Kodu)

#kutu{
background-color: #f0f;
}

 
Class :Classlarda yukarıda belirttiğim gibi ID lerden ayıran en önemli özelliği birden çok noktada kullanılmasıdır.
Tam olarak açıklarsak aynı örnekle class bir sınıfda herkes buraya atanan değrleri kullanabilir.
Classları IDlerden ayıran simgesel özellik ise .dır.Idlerde # kullanılırken Classlarda . kullanılmaktadır.
Örnek Vermek Gerekirse:

<style>
.ali {
background-color: red;
}
.veli {
background-color: blue;
}
.kerim {
background-images:bg.png;
}
</style>

 

More Articles for You

2014 Ajanda Tasarımı (INDD)

Merhabalar arkadaşlar, az once yabancı kaynaklı bir internet sitesinden bularak sizlere sunuyorum bunu. 2014 Ajandası hazır tasarımdır. Tamamiyle ingilizceydi Türkçeleştirme …

“Hediyem İstanbul” Desen Tasarımı Yarışması

Yarışma Amacı: “Hediyem İstanbul”un kurumsal yapısını ve konseptini temsil edecek “özgün” DESEN tasarımları ortaya çıkarmak üzere düzenlenen bir yarışmadır. İstanbul …

En Hızlı İnternete Sahip Ülkeler

Dünya nüfusunun 3’te 1’inin hızlı internet erişimine sahip olduğu günümüzde en hızlı kullanım oranları Asya ve Avrupa ülkelerinde. İnternetin doğduğu …

29 Ekim Cumhuriyet Bayramı Doodle

Google 29 Ekim Cumhuriyet bayramımızı unutmadı. Çok hoş bir görselle anlattı. Google uzun süredir bu tür olayları ve sanatçılarla ilgili …

Metrica for Apps

Yandex, ücretsiz internet ölçümleme servisiYandex.Metrica‘nın mobil uygulama geliştiricilerine özel sürümü olan Metrica for Apps‘i kullanıma sundu. iOS, Android ve Windows Phone …

Css Gradient Kodları

Merhaba arkadaşlar, css3’ün nimetleri saymakla bitmiyor. Bu dersimizde Gradient yani renk geçiş efekti koduna bakacağız. Normalde bu tarz renk geçişleri …