http://www.evalotta.net/ sitedeki uygulamayı görünce çok hoş bir şey olduğu aklıma geldi. Bende bu konuda bir şeyler yazmalıyım diye not ettim. Nasip bu güneymiş.

İnternet tarayıcıları daha önce ziyaret ettiğimiz sayfa bağlantılarını ön belleğinde tutar. Biz ön belleği silmediğimiz müddetçe hafızasında kalır. CSS bize daha önce ziyaret ettiğimiz sayfa bağlantılarının stilini değiştirme imkanı sunar, böylece kullanıcıya sen burayı daha önce ziyaret etmiştin bilgisini verebiliriz. İnternet tarayıcıları ziyaret edilmiş bağlantılara kendileri standart bir stil atarlar. Mesela Firefox altını çizili ve mor renkli yapıyor.

Tarayıcılar bize bu ayrımı gösterir, tabi biz bağlantı tanımları değiştirmediğimiz müddetçe. Biz bağlantıya genel tanım yaptığımızda bu özellik bir bakıma göz ardı edilecektir. Bir çok projede bu tanımlamayı yazpıyoruz.

a{color:#f00;}

Yukarıdaki tanımlama tüm bağlantı tipleri için genel bir tanımdır ve ziyaret edilmiş sayfa stilinide belirler.

Bizim amacımız ziyaret edilmiş bağlantıları farklı stil ile belirterek ayrımı göstermek. Bir çok yerde  yazı üstünü çizerek belirlenir.

a:visited { text-decoration: line-through; }

Örneği görmek için tıklayınız.

Diğer bir yöntemde ardalan resmi koymak. Bu yöntem ile hoş bir görüntüde sağlamış oluyoruz. http://www.evalotta.net/ sitesi buna çok güzel bir örnek.

a:visited {
    padding-right:20px;
    background:url(images/ziyaret_edilmis_baglanti.gif) right top no-repeat;
    color:#666;
    text-decoration:none;
}

Örneği görmek için tıklayınız.

Benzer yöntemlerle birçok alternatif oluşturulabilir. Ayrıca :before ve :after ile oluşturulan örnekler var ama hala ie6 hayatta olduğu için ve :before ve :after özelliklerini desteklemediği için pek kullanma taraftarı değilim.

Kaynak

• http://9lessons.blogspot.com/2009/06/css-visited-tips-strike-out.html
• http://webdesign.maratz.com/lab/visited_links_styling/
• http://www.webmonkey.com/tutorial/Control_Visited_Link_Colors_With_CSS
• http://css-tricks.com/put-checkmarks-next-to-visted-links-with-pure-css/
• http://www.westciv.com/style_master/house/tutorials/quick/visited_links/index.html
• http://onemarco.com/2007/06/06/better-visited-links/
• http://www.sitepoint.com/blogs/2004/05/23/getting-creative-with-visited-links/
• http://www.useit.com/alertbox/20040510.html

Pseudo sınıfına örnek:

a:visited {
	color: red;
}

Pseudo elementine örnek:

p:first-line  {
	font-weight: bold;
}

Pseudo sınıf ve elemtleri HTML class özelliği olarak belirtilmemiştir. Normal sınıflar pseudo sınıf ve elementleri ile kullanılabilir.

a.disariyalinkller:link, a.disariyalinkller:visited {
	color: maroon;
}

Aynı şekilde id seçicileri ile birlikte de kullanılabilirler

a#altkisim:link{
	font-weight: bold;
}

Pseudo sınıflarını da ikiye ayıra biliriz. Link Pseduo Sınıfıları ve Dinamik Pseudo Sınıfları

Link Pseudo sınıfı

Yanlızca linklere uygulanan iki Link Pseduo sınıfı vardır. :link ve :visited

:link – Ziyaret edilmemiş sayfanın linkine stil tanımlaması yapmak için kullanılır. Ancak bir çok web tarayıcısı yapılan stil tanımlarını ziyaret edilmiş sayfa linklerine de uygular.

:visited - Henüz ziyaret edilmiş sayfa linklerine stil tanımlaması yapmak için kullanılır.

a:link {
	color: blue;
}
a:visited {
	color: red;
}

Bunun yerine genelde aşağıdaki gibi bir kod da kullanılır

a {
	color: blue;
}
a:visited {
	color: red;
}

Bu kodlama ile kullanıcaya ziyaret ettiği sayfa linkleri farklı renkte gösterilerek içeriksel bir bilgi görsel olarak verilebilir.

Dinamik Pseudo Sınıfları

Dinamik Pseudo Sınıfları sayfa görünümüne çok büyük katkılar yapabilir. Bu sınıflar genelde linklere uygulanır ancak bir çok kullanım alanları vardır. tanedir :focus, :active ve :hover

:focus - Odaklanan elemente stil tanımlası yapmak için kullanılır Örn: input alanına içerik girerken

:active – Aktif olan elemente stil atamak için kullanılır.

:hover - Bir elementin üzerine Farenin imleci geldiğinde yapılacak tanımlama için Örn: bir linkin üzerine fare ile geldiğimizde renk değiştirmesini sağlamak için

Linkler için genel kullanım

a:link {
	color: navy;
}
a:visited {
	color: gray;
}
a:hover {
	color: red;
}
a:active {
	color: yellow;
}

:focus için bir örnek verecek olursak

input:focus {
	background: silver;
    font-weight: bold;
}

İlk Çocuk Elementi seçmek

Diğer bir pseudo sınıfımız :first-child‘dır.

first:child: Belirtilen elementin ilk Çocuk Elementine stil atamak için kullanılır.

p:first-child {
	font-weight: bold;
}
li:first-child {
	color:#f00;
}

<div>
    <p>Bu paragraf ilk çocuk elementidir ve sonuç olarak kalın olacaktır</p>
    <ul>
        <li>Bu liste ilk çocuk elementidir ve font rengi kırmızı olacak</li>
        <li>Bu <strong>çocuk element </strong>değil</li>
        <li>Bu da değil</li>
    </ul>
    <p>Bu pragraf <em>bir</em> çocuk element değil.</p>
</div>

:lang Pseudo Sınıfı

Lang pseudo sınıfı içerikteki bir elemente farklı bir dil de yazmamızı sağlar.

Atanabilecek dil listesi ve kullanılacak kısaltmalara ISO 639 and RFC 1776 standards erişebilirsiniz.

<html>
<head>
<title>lang test</title>
<style type="text/css">
p:lang(fr) {
	color: red;
}
</style>
</head><body>
<p lang="fr">Bonjour le monde!</p>
</body>
</html>

Pseudo Sınıflarını birleştirmek

CSS2.1 ile birlikte aynı seçiciye ait pseudo elemntlerini birleştirme özelliği de gelmiştir. Örneğin ziyaret edilmiş linklerin hover özelliği ile ziyaret edilmemiş linklerin hover özelliğini farklı atamak istesek

a:link:hover {
	color: red;
}
a:visited:hover {
	color: pink;
}

Sıralama önemli değildir.

Pseudo Element Seçicileri

Bu elementler hayali elementlerdir. (X)HTML hiyerarşisi içinde bu elemntlere yoktur. CSS2.1 de Dört adet Pseudo Element Seçicisi vardır: first-letter, first-line, before ve after

first-letter (ilk harf)

Bir blok-level elementin ilk harfine stil tanımlması yapmak için kullanılır. Örnek verecek olursak h1 elementinin baş harfinin büyük olması için :

h1:first-letter {
	font-size: 200%;
}

<h1>Bu büyük bir başlık</h1>

first-line (ilk satır)

Bir metnin ilk elementine stil atamak için kullanılır. Örneğin paragraflarınızın ilk satırlarını renklendirmek isitiyorsunuz.

p:first-line {
	color: red;
}

before ve after elementleri

Bir elementin öncesine ve sonrasına bir içerik veya özellik eklemek için kullanılır.

Notlarımızın başına otomatik oalrak Not yazmak için

P.not:before {
	content: "Not."
}

kodu yeterlidir. Aynı şekilde paragraflarımzın sonuna otomatik bitti yazıp nokta koymak istersek

body:after {
	content: "  Bitti.";
}

yeterlidir.