Yazar: Merhaba değerli arkadaşlar!
Bu yazımda sizlere html’de bildiğimiz a elementinin css’de nasıl şekillendirelebileceğimizi anlatacağım.
Html’de bağlantılarımızı oluşturduktan sonra hangi css özelliklerini kullanarak bağlantılarımızı şekillendirebiliriz bu yazımda tüm detaylarıyla sizlere anlatacağım.
Css kullanarak html sayfamızdaki bağlantıları dört farklı şekilde stil özelliği kazandırabiliriz.
Bu css özelliklerini şu şekilde sıralayabiliriz:
1. normal link görünümü.
2. a: visited ziyaret edilmiş bağlantıların görünümü.
3. a: hover mouce ile üzerine gelindiğinde oluşturulacak renk görünümü.
4. a: active tıklandığı anda oluşturulacak bağlantı görüntüsü.
Bu dört özelliği kullanarak web sayfamızdaki bağlantıları şekillendirebiliriz.
Yukarıdaki saymış olduğum özelliklerin css’de tanımlama sırası bulunmaktadır. Bu sıra dışında bir tanımlama yapılırsa bağlantı görünümleri düzgün çalışmayabilir.
a:hover her zaman a:link ve a:visited den SONRA gelmeli.
a:active her zaman a:hover dan SONRA gelmeli.
Kullanım sırası şu şekilde olmalıdır:
a:link {color:#FF0000;}
a:visited {color:#00FF00;}
a:hover {color:#FF00FF;}
a:active {color:#0000FF;}
Şimdi tüm bu özellikleri kullanarak bir örnek yapalım:
örnek:
<doctype html>
<html>
<head>
<meta charset=”utf-8″>
<title> css bağlantı özellikleri </title>
<style>
a {
color: blue;
}
a: visited {
color: red;
}
a: hover {
color: black;
}
a: active {
color: white;
}
</style>
</head>
<body>
<a href=”https://ozdogan.gen.tr”> bağlantıya tıklayın </a>
</body>
</html>
Bu örneğimizde tüm bağlantı özelliklerine farklı renk verdik.
Sizlerde css ile bağlantılarınızı bu şekilde stil özelliği kazandırabilirsiniz.
Not: Bazı tasarımlarda bu dört stil özelliğini kullanmayabilirsiniz. kesinlikle bu dört özellik kullanılacak diye bir kayde yoktur.
Css ile bu dört özelliği şu şekildede kullanabiliriz.
örnek iki:
<!doctype html>
<html>
<head>
<meta charset=”utf-8″>
<title> css ile bağlantılara stil özelliği kazandırma </title>
<style>
a {
color: #fff;
}
a: hover {
color; #ccc;
text-decoration: none;
]
a: hover {
color: #aaa;
}
a: active {
color: #181118;
text-decoration: none;
}
</style>
</head>
<body>
<a href=”https://ozdogan.gen.tr”> bağlantıya tıklayın </a>
</body>
</html>
İkinci örneğimizi görüntülediğinizde bir fark görmüş olmanız lazım.
a etiketine visited özelliği ve active özelliğini tanımlarken bağlantının altında yer alan çizginin kalktığını farketmişsinizdir. bu örneği yapmamdaki maksat sadece renk verilmediğini sizlere göstermek istedim. sizlerde bağlantılarınıza farklı özellik ekleyebilirsiniz.
Css bağlantı özellikleri ile ilgili anlatacaklarım bu kadardı, mutlaka sık sık örnek yaparak bilginizi pekiştirin. soru ve sorunlarınızı bana iletebilirsiniz. iyi bloglamalar herkese.e
Bir önceki yazımız olan css id ve class kullanımı başlıklı makalemizde css class kullanımı, css id kullanımı ve css seçiciler hakkında bilgiler verilmektedir.