CSS Nedir? Nasıl Kullanılır?
4. GENEL KULLANIM ŞEKİLLERİ
Css’i Html üzerinde kullanmak için 3 yöntem (yerel-global-bağlantılı) olduğunu daha önce belirtmiştik. Şimdi ise komple bir css dosyasını Html üzerinde nasıl kullanacağımız görelim. Fakat öncelikle Html’deki a etiketinin diğer etiketlerden farklı olarak bir kullanım tarzı bulunmakta. İlkönce ona değinelim. .
A etiketinin Css ile kullanımı
Bildiğiniz üzere A etiketi Html’e çok büyük bir özellik katan link etiketidir. Bu etiket ile diğer bir web sayfasına veya bir mail adresine gönderme yapabiliriz. Bu etiketin belli durumlarda aldığı değişik değerler vardır. Yani link tıklandığında etiket artık visited (ziyaret edilmiş) pozisyonuna geçecektir. Biz Css yardımıyla A etiketinin aldığı posizyonlara istediğimiz biçimi verebiliriz. Şimdi A etiketinin aldığı pozisyonları görelim :
İlk poziyon linke herhangi bir tıklama olmadığındadır. Bu değer linkin sayfada görülecek ilk halidir.
Visited : Bu pozisyon link tıklandığından sonra etiketin aldığı değerdir.
Active : Bu pozisyon linkin aktif olduğu durumdur. Yani imleç linkin tıklandığı andaki durumdur.
Hover : Bu pozisyon Linkin üzerine gelindiği durumdur. Yani linkin üzerine gelindiğinde nasıl bir biçimde olması isteniyorsa stil o şekilde verilir.
Şimdi A etiketi için bir stil dosyası yapalım.
| <html> <head> <title>Css</title> <style type="text/css"> <!- A.normal { background-color:white; color:blue; } A.ziyaret:visited { background-color:white; color:maroon; font-weight:normal; } A.aktif:active { background-color:white; color:red; font-weight:normal; } A.degisken:hover { background-color:blue; color:white; font-weight:bold; } --> </style> </head> <body> <a href=”#” class=”normal”>Linkin normal durumu</a><br> <a href=”#” class=”ziyaret”>Linki tıklayın ve değiştiğini görün</a><br> <a href=”#” class=”aktif”>Linkin aktif durumu</a><br> <a href=”#” class=”degisken”>Linkin üzerine geldiğinde stil değişecek</a><br> </body> </html> |
renegadealien-www.tahribat.com-Her hakkı saklıdır.
Hit: 5637
Yazar: renegadealien