Öğretmenler Forumu

Lütfen giriş yapın veya üye olun.

Kullanıcı adınızı, şifrenizi ve aktif kalma süresini giriniz
Gelişmiş Arama  

Haberler:

Gönderen Konu: Css ile linklere farklı özellikler  (Okunma sayısı 7453 defa)

Rindâne

  • Y
  • Tam
  • *****
  • Çevrimdışı Çevrimdışı
  • İleti: 228
    • Öğretmenler Forumu
Css ile linklere farklı özellikler
« : 25 Kasım 2009, 19:24:50 »

 Bazı web sayfalarında görmüşsünüzdür, bazı linkler diğer linklerden farklı bir görünüme sahiptir, bunu biz de yapabiliriz.

  Daha önce Css dosyamızda link tanımlamalarını nasıl yapmıştık?

a:link {text-decoration: none;  font-weight: bold}
a:visited {text-decoration: none;  font-weight: bold}
a:active {text-decoration: none;  font-weight: bold}
a:hover {text-decoration: underline; font-weight: bold}


şeklindeydi, şimdi farklı bir link tanımlaması daha yapaım, bu defa linklerimize bir isim vereceğiz. Örnek olarak linkimizin ismine ali diyelim, Türkçe karakter kullanmadığımız sürece istediğimiz ismi verebiliriz. bukalemun.css dosyamızı açıyoruz veee

a.ali:link {color: #000000; text-decoration: underline;  font-weight: bold}
a.ali:visited {color: #000000; text-decoration: underline;  font-weight: bold}
a.ali:active {color: #000000; text-decoration: underline;  font-weight: bold}
a.ali:hover {color: #000000; text-decoration: underline; font-weight: bold}


ali adını verdiğimiz linklerimizin kodlarını ekliyoruz. Linkimizi altı çizgili ve siyah olarak ayarladık, bu arada #000000 siyah rengin kodlarıdır.

 Ancak tabii ki iş bununla bitmiyor, index.html sayfamızı açıp ali adını verdiğimiz linkimizi yazıyoruz

<a class="ali" href="http://www.google.com">Google</a>, dikkat ettiyseniz link kodlarımıza class="ali" diye bir kod ekledik, buna sınıf adı veriliyor, yani linkimize bir sınıf atadık, kullandığımız linklerde class="ali" kodunu yazarsak demek ki o linklerimiz siyah olacak.

Html <p> </p> (paragraf) etiketi kullanımı
Kayıtlı
Öğretmenler, yeni nesil sizlerin eseri olacaktır.
Mustafa Kemal ATATÜRK