Merhaba arkadaşlar bu yazımda, başlıktan da anlaşılacağı üzere içinde kullanılan harf ya da kelimelere göre farklı stiller verebilmeyi göreceğiz. Yalnız hatırlatmakta fayda var bu özelliği henüz Internet Explorerdesteklemiyor.

Peki bu özellik ne işimize yarayacak? Hatırlarsanız şu yazımdasizlere bir sayfada birden çok link sitilinin nasıl olacağını anlatmıştım ancak bu arada her bir linkin hangi stilde olacağını ayrı ayrı belirtiyorduk. Burada ise bir kere stilleri tanımlıyoruz ve artık linkler belirtilen şartlara uyduğu takdirde kendiliğinden o stili alıyorlar.

Şimdi isterseniz başlayalım

</pre>
<style type="text/css">
<!--
a:link {
 color: #6633CC;
}
a:visited {
 color: #6633CC;
}
a:hover {
 color: #99CC33;
}
a:active {
 color: #99CC33;
}
<pre>

Yukarıda görüldüğü gibi önce kendimize bir link stili tanımladık. Şimdide belli koşullarda farklı görünecek link stillerini tanımlıyoruz. Önce içinde google geçen linkler için bir stil tanımlamakla işe başlayalım

a[href*="google"] {
background-color:#000000;
}

Şimdi de com ile biten linklere stil verelim

a[href$="com"] {
background-color:#000000;
}

Şimdi de yeşillik olsun diye www ile başlayan linklere şekil verelim ki linklerin çoğu www ile başladığı için sayfada en çok bu stili göreceğiz

a[href^="www"] {
background-color:#ccc;
}

Şimdi de bunları deneyeceğimiz linkleri verelim

<p><a href="https://www.hayaletinyeri.com">www.hayaletinyeri.com</a></p>
<p><a href="www.google.com">www.google.com</a></p>

Sonuç olarak kodumuzun tamamı aşağıdaki gibi olacak

<style type="text/css">
<!--
a:link {
 color: #6633CC;
}
a:visited {
 color: #6633CC;
}
a:hover {
 color: #99CC33;
}
a:active {
 color: #99CC33;
}
a[href*="google"] {
background-color:#000000;
}

a[href$="com"] {
background-color:#000000;
}

a[href^="www"] {
background-color:#ccc;
}
-->
</style>
<p><a href="https://www.hayaletinyeri.com">www.hayaletinyeri.com</a></p>
<p><a href="www.google.com">www.google.com</a></p>

Görüntü de aşağıdaki gibi olacak

Bunların dışında bir kaç örnek daha var ama bence gereksiz olduğu için bahsetmedim örneğin a[href!="hayalet"] ile içinde hayalet geçmeyen linklere stil verebiliyoruz.

Bu derslikte bu kadar hoşçakalın