Öneri ve Hata Raporu



Günün Sözü Asla yalnız yürümeyeceksin

kategori CSS
oylama 3.1/5 yorum 2 yorum yazar Hakan Taşan tarih 24 Kasım 2013

CSS'de oldukça kafa karıştıran bir konudur ID ve class. Bazen hangisini nerede kullanacağınızı kestiremeyebilirsiniz o yüzden rastgele kullanmışlarınız vardır aranızda. Aslında arasında devasa bir fark yoktur, sadece kullanım yerleri başkadır. Bu kullanım yerlerini de World Wide Web Consortium (W3C) belirler. Dolayısıyla biz de onlara uymak zorundayız çünkü yarın bir gün class'ı ID yerine kullanamazsınız dediklerinde bütün tasarımı değiştirmek gerekecektir. Sadece bu durum için değil her zaman bu kurallara uymak bizim avantajımızadır. Şimdi ID ve class arasındaki farka ve kullanımlarına gelelim.

ID Nedir?

ID ingilizce "Identity" kelimesinin kısaltılmışıdır ve Türkçe "Kimlik" anlamına gelmektedir. Tek bir varlığı tanımlar. Örneğin; hepimizin bir kimlik numarası vardır ve hiçbiri aynı değildir. HTML'de ID, tek bir element için kullanılır. Genellikle header, footer, navbar, sidebar gibi tekrar etmeyen alanları tanımlamak için kullanılır. Her sayfada ortak olarak kullanılan ID olabilir (header, footer, ...) ancak tek sayfada aynı isimde birden fazla ID olmamalıdır. Çünkü hem W3C kurallarına uymaz hem de Javascript kullanacağımız zaman aynı isimde ID varsa karışıklığa yol açar.

document.getElementById("id")

 

Ayrıca bir elemente ID tanımladık varsayalım, aynı sayfanın herhangi yerinde o ID'ye link verilmişse, linke tıklandığında otomatik olarak sayfa tanımlanmış ID'ye kayacaktır. Aşağıda İçeriğe git linkine tıklandığında sayfa, ID'si content olana kayar.

<div id="content">İçerik</div>

<a href="#content">İçeriğe git</a>

 

CSS'de # (diyez) işareti ile kullanılır.

#idismi
{
    position:absolute;
    left:25px;
    top:25px;
    width:150px;
}

 

Class Nedir?

Class'larda ID'lere benzer lakin amaçları farklıdır. ID'nin aksine tek sayfa içerisinde birçok kez tanımlanabilir. Sayfa içerisinde aynı özellikleri taşıyan yerler varsa özellikle yazı stilleri gibi (örneğin; başlıkların aynı renkte ya da boyutta olduğu yerler) Class kullanılmalıdır. Class'lar ID'de olduğu gibi Javascript içinde de olabilir. CSS'de . (nokta) işareti ile kullanılır.

.menu 
{
    font-size:14px;
    color:#ff0000;
}

 

Nerede Class Nerede ID Kullanmalıyım?

Bunu örnekle açıklamak istiyorum. Varsayalım kütüphane açacağız. Öncelikle kitaplarımızı felsefe, psikoloji, polisiye ... gibi kategorilere bölmemiz gerekir ve kütüphanemizde bu kitaplara özel raflar oluşturmalıyız. İşte kitaplara özel oluşturulan bu raflara ID diyoruz. Her kitabın sayfa sayısı, yazı büyüklüğü, ebatları farklıdır. Değişik kitaplar aynı rafta toplanmıştır ve bu işleme de Class diyoruz.

HTML Kodu

<div id="sidemenu">
    <div class="menu">
        <p class="birinci_yazi">Birinci yazı</p>
        <p>İkinci yazı</p>  
        <p>Üçüncü yazı</p>  
    </div>
</div>

 

CSS Kodu

div#sidemenu
{
    position:absolute;
    left:25px;
    top:25px;
    width:150px;
}
div.menu 
{
    font-size:14px;
    color:#ff0000;
    border:2px solid #7FC07F;
}
p.birinci_yazi 
{
    font-size:24px;
    color:#ff0000;
}

 

paylaş Paylaş
oylama yap Oyla

makale yorumları YORUMLAR

2 Yorum


yorum

os_lnx

09 Nisan 2017 19:05


Çok sade ve anlaşılır güzel bir anlatım olmuş. Teşekkürler.

yorum

Sinan Taş

14 Ekim 2020 19:09


Pek açıklayıcı bir anlatım olmamış...