CSS’de Pseudo sınıflarının Anchor <a> etiketine ait olanlarını daha önceki yazımızda incelemiştik.
Şimdi bu sınıfları kullanılarak standart olarak linklerin altını çizen html kodlarının görünümünü nasıl değiştireceğimize bakacağız. Yani linklerimizin altı artık istediğimiz zaman çizili olacak. J
Daha önceki yazımızda kullandığımız ornek.css dosyasına bir güncelleme yapacağız.
/*links isimli css sınıfı – linklerin gösteriminde kullanılacak */
.links{
.links{
color:#2F4F4F;
text-decoration:none; /*linkler her zaman altı çizili oluyor bunu önlemek için yapıldı */
}
/* a etiketli psuedo kodları */
a:hover {text-decoration:underline} /* ziyaret edilmeyen link – üzerine geldiğinde altını çiz*/
a:active {color:#0000FF} /* seçili link */
Yorum satırlarından anlaşılacağı gibi linklerin her zaman altının çizilmesini önledik şöyle; psuedo kodları ile yaptığımız yalnızca linklerin üzerine gelindiğinde yazının altını çiz komutu verdik.
Şimdi bu yazdığımız css dosyasını web sitemizde nasıl kullanacağımıza bakalım.
<!--html’de
css dosyası kullanımı-->
|
<html>
<head>
<link rel="stylesheet" type="text/css"
href="ornek.css" /> <!--css dosyasını sayfaya yükleme-->
</head>
<body>
<p>Sayın ziyaretçi, <a class="links"
href="baglanti.html" >Lütfen linke tıklayınız.
</a></p> <!--link oluşturma-->
</body>
</html>
|
Bu yazımızda CSS ile linklerin kontrolünü elimize aldık. Siz de CSS (Cascading Style Sheets) sınıfları ile dinamik web sitesi temaları geliştirebilirsiniz. Hepinize mutlu günler dilerim. J
