Kapat

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>

Bir önceki yazımız olan css- seçiciler başlıklı makalemizde css, css 3 ve css dersleri hakkında bilgiler verilmektedir.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

*

code


Kapat