CSS ile Link Düzenlemeleri Yapma (Menü Hazırlama)

27 Ocak 2008, 12:57mert

Aşağıda örnek kod ve kodun çalıştırılması sonucunda oluşacak ekran görüntüsü verilmiştir. Bu özellikler kullanılarak web sitenizde menüler hazırlayabilirsiniz.

<html><head>

<style type=”text/css”>
a.renk:link {color: #ff0000}
a.renk:visited {color: #00ddff}
a.renk:hover {color: #0000ff}

a.boyut:link {color: #ff0000}
a.boyut:visited {color: #00ddff}
a.boyut:hover {font-size: 150%}

a.zemin:link {color: #ff0000}
a.zemin:visited {color: #00ddff}
a.zemin:hover {background: #66ff66}

a.tip:link {color: #ff0000}
a.tip:visited {color: #00ddff}
a.tip:hover {font-family: monospace}

a.altciz:link {color: #ff0000; text-decoration: none}
a.altciz:visited {color: #00ddff; text-decoration: none}
a.altciz:hover {text-decoration: underline}
</style>
</head>

<body>
Fare ile linklerin üzerine gelerek değişimi görebilirsiniz. </br>

<p><b><a class=”renk” href=”http://www.sitedefteri.net” target=”_blank”>
Bu linkin rengi değişecek</a></b></p>

<p><b><a class=”boyut” href=”http://www.sitedefteri.net” target=”_blank”>
Bu linkin yazı boyutu değişecek</a></b></p>

<p><b><a class=”zemin” href=”http://www.sitedefteri.net” target=”_blank”>
Bu linkin zemin rengi değişecek</a></b></p>

<p><b><a class=”tip” href=”http://www.sitedefteri.net” target=”_blank”>
Bu linkin yazı tipi değişecek</a></b></p>

<p><b><a class=”altciz” href=”http://www.sitedefteri.net” target=”_blank”>Bu link altı çizili olacak</a></b></p>

</body></html>

Bu sayfanın ekran görüntüsü için tıklayın.

  • ID Seçiciler (ID Selectors) ve Sınıf Seçiciler (Class Selectors)
  • Açıklamalı Genel CSS Uygulama Örnekleri
  • Dreamweaver ile Açılır Menü Oluşturmak (Resimli Anlatım)
  • Dreamweaver ile CSS Kullanarak Link Düzenlemeleri Yapmak
  • Joomla Eklentisi : Joomla Tabs&Silides Menü
  • Google’da İndexli Sayfa Sayısını ve Backlink Sayısını Öğrenme
  • Joomla Site Haritası (JooMap) Oluşturmak

    • 4 yorum:

    1. emre, Çarşamba, 14 Mayıs 2008, 21:40

      Güzel olmuş. Ellerinize sağlık. Ancak dreamweavera bu kodu koyunca, sizin yi silip dreamweaverin ”
      ” kısmını sabit tutunca bu tam çalışmıyor. Hatta hiç çalışmıyor. Ama bunu not defterinde yazıp kaydedince takır takır çalışıyor. Yalnız bu sefer de sitenizdeki renklerde bilgisayardaki renkler başka başka oluyor. :)

       
    2. emre, Çarşamba, 14 Mayıs 2008, 21:41

      //
      //

      az önceki yorumumda bulunan tırnak aralığı bu. Çıkmamış nedense.

       
    3. emre, Çarşamba, 14 Mayıs 2008, 21:41

      :D:D çıkmıyor, hadi bakalım bu sefer olacak mı?
      ” DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
      <html xmlns=”http://www.w3.org/1999/xhtml “

       
    4. mert, Çarşamba, 14 Mayıs 2008, 23:11

      Dreamweaver ile çalışyorsan bu kodları elle yazmasan da olur. Bu yazıda bu işlemi dreamweaver ile nasıl yapacağın anlatılıyor.

       

    Yorum yaz: