[omerbalyali]

Sayfanın belli bölümlerindeki linkler farklı olacaksa, yani kesin olarak farklı olacak linkler belli ise, sayfanın bloklarına özel tanımlamalar atayabilirsin.

Mesela bir blog düşün, 3 tane bloktan oluşuyor; header - sidebar - content.

O halde bu blokların içindeki bağları nasıl olurda farklı biçimlendirebiliriz?

CSS:

#header a {...}
#header a:hover {...}
#header a:visited {...}
#header a:visited:hover {...}

#sidebar a {...}
#sidebar a:hover {...}
#sidebar a:visited {...}
#sidebar a:visited:hover {...}

#content a {...}
#content a:hover {...}
#content a:visited {...}
#content a:visited:hover {...}

XHTML:

<div id="header">
<a href="#" title="">...</a>
</div>

<div id="sidebar">
<a href="#" title="">...</a>
</div>

<div id="content">
<a href="#" title="">...</a>
</div>

............


Diyelim ki böyle değil! Örneğin aynı paragraf içindeki bir çok link farklı farklı stil alabilecek.

Bu durumda ne yaparız?
-Bu durumda sınıfları kullanmamız gerekiyor. Bunu da şu şekilde yapabiliriz;

CSS:

.link1 {...}
.link1:hover {...}
.link1:visited {...}
.link1:visited:hover {...}
/* IE UYUMLU*/
.link1 a {...}
.link1 a:hover {...}
.link1 a:visited {...}
.link1 a:visited:hover {...}

.link2 {...}
.link2:hover {...}
.link2:visited {...}
.link2:visited:hover {...}
/* IE UYUMLU*/
.link2 a {...}
.link2 a:hover {...}
.link2 a:visited {...}
.link2 a:visited:hover {...}

XHTML:

<p>

<a href="#" title="" class="link1">...</a>
<a href="#" title="" class="link2">...</a>

</p>

................

Scud tarafından gönderilen mesaj:

<style type="text/CSS">
.BirinciLink { color:#FF0000 }
.IkinciLink { color:#0000FF }
.UcuncuLink { color:#00FF00 }
.DorduncuLink { color:#800000 }
</style>
<a class="BirinciLink" href="">Birinci Link</a><br>
<a class="IkinciLink" href="">İkinci Link</a><br>
<a class="UcuncuLink" href="">Üçüncü Link</a><br>
<a class="DorduncuLink" href="">Dördüncü Link</a>

şeklinde yapman kurallara daha uygun olacaktır. çünkü benim bildiğim aynı sayfada aynı id degerine sahip iki nesne bulunmamalı.

Eğer (x)HTML'de etiket parametresi olarak class="" kullanıyorsak buna "sınıf" denir ve bunu CSS'te .ornek diye belirleriz ve bu sınıfı istediğimiz her elemanda kullanabiliriz.

Scud'un belirttiği ise, eğer (x)HTML'de etiketlere id="" parametresi atıyorsak CSS'te #ozel olarak belirttiğimizi sadece o elemanda kullanabiliriz, başka bir elemanda kullanamayız.