ozan-tr
⭐Deneyimli Tasarımcı⭐
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ı bulunmaktadır. İlkönce ona değinelim.
A Etiketinin CSS İle 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.
Örnek:
HTML:
<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>
A Etiketinin CSS İle 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.
Örnek:
HTML:
<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>
