Skip to Content
Anasayfa » Tema Kullanım ve Geliştirme » Temel CSS konuları

CSS: class ve id kavramları

etcetera9, Cuma, 13/11/2009 - 13:10 tarihinde.

CSS dosyalarındaki stillerin etki edeceği elemanlar, HTML'deki "element"ler, "classlar" veya "id"lerdir.

Elementler, tanımlı HTML kodlarıdır. Örneğin a, h1, body, div, p... Bu elementlere etki edecek CSS kodları ise şu şekilde tanımlanır:

        div {..............;}
        p {............;}
        body {..............;}

Örneğin body için yazılan CSS kodu, body altındaki herşeyi etkiler.

"class" ve "id" tanımları, kullanım açısından aslında hiç farklı değildir. Ancak tanımları farklıdır. Aynı "class", aynı sayfa içinde birden çok elemente verilebilir. Ancak "id" her eleman için farklıdır, aynı sayfada aynı id'ye sahip iki eleman olamaz. class ve id isimleri HTML kodunda tanımlanır. Örnek:

        <p class="paragraph">................</p>
        <div id="header">................</div>

CSS dosyasında bir classa etki edecek kodu yazmak için başa nokta (.) işareti koyulur. Örnek:

        .paragraph {................;}

CSS dosyasında bir idye etki edecek kodu yazmak için başa diyez (#) işareti koyulur. Örnek:

        #header {................;}

Bildiğiniz gibi HTML kodu içindeki elementler birbirinin içine girmiş halde bulunuyor. Bu sıralama, CSS'de istenilen elementi, classı veya idyi seçebilmek için kullanılır. Örneğin HTML kodumuz:

        <div id="header">
         <div class="box">
                <img class="lightbox">............</img>
         </div>
        </div>

ise bu, lightbox box'un içinde, box da header'in içinde demektir. Bu kodda lightbox classına ulaşmak için gerekli CSS kodu:
        #header .box .lightbox {.........;}

şeklindedir. Aynı ögeye:
        #header .box img {.........;}

şeklinde de ulaşılabilir.

Son olarak bazı zamanlar, sadece belli bir elemente etki eden classa ulaşmak gerekebilir. Örnek:

        <img class="lightbox">............</img>
        <a class="lightbox">............</a>

bu sayfa için yalnızca img elementine ulaşmak istiyorsak, CSS'de element ile class arasında boşluk bırakmıyoruz:
        img.lightbox {........;}

macrotus, Cmt, 14/11/2009 - 00:00 tarihinde.

Güzel bir makale olmuş. Zira css'in bu özelliğini bilmiyordum, iyi oldu keza. Teşekkürler.

selamkamil, Per, 14/01/2010 - 21:56 tarihinde.

güzel anlatım olmuş hocam. yalnız bir de css geliştirirken özelikle position: relative ve position: absolute tanımlamaları yapılırken div katmanlarına da ulaşıp müdahale etmek gerekebilyor bu konuda da bilginiz varsa paylaşırsanız drupalde en azından benim için bazı sınırların daha ortadan kalkmasını sağlamış olursunuz.

emrahozcelik, Sal, 15/06/2010 - 14:48 tarihinde.

http://www.fatihhayrioglu.com/ sitesinde çok geniş ve tüm ayrıntılarıyla css anlatımı yapmış, ayrıca pdf formatında kitapları indirelebiliyor.

captix, Pzt, 04/10/2010 - 23:48 tarihinde.

ne kadar dolaşsamda yine bu siteye dönüyorum. Googleda ararken ddoda buldum :)