A etiketinin css ile kullanımı:
A etiketi ile oluşturduğumuz linkler, tarayıcıda kendiliğinden mavi renkte ve altı çizili olarak görüntülenirler. Ayrıca ziyaret edilmiş olanlar mor renkte görünürler. Bu durumu değiştirmek için Pseude sınıfları kullanmalı ve linklerin farklı durumları için şablonlar oluşturmalıyız.
Pseudo Sınıfları
Pseudo sınıfları, bir elementi farklı sınıflara böler. Örneğin link (a) elemanını visited, active, hover, link sınıflarına böler.
a etiketinin :link sınıfı, linklerin normaldeki görünümlerini düzenlememizi sağlar.
:hover sınıfı, linklerin üzerine gelindiğindeki görünümlerini düzenlememizi sağlar. Örneğin üstüne gelinen linkin renk değiştirmesi gibi.
:active sınıfı, linklerin tıklandığı andaki, yani fare tuşu basılı olduğu andaki görünümünü düzenlememizi sağlar.
:visited sınıfı ise daha önce tıklanmış linklerin görünümlerini değiştirmemizi sağlar.
Not: Durum belirtmeden a etiketine css uyguladığımızda yazdığımız stiller linklerin tüm hallerine uygulanır.
Yukarıdaki gibi bir kullanımda linkler her durumda yeşil renkte olacaktır.
Eğer linklerin üstüne gelindiğinde farklı, normalde farklı vb görünmesini istiyorsak, a etiketinin sınıflarını ayrı ayrı biçimlendirmemiz gerekir.
Linklerin her durumunu farklı biçimlendiren bir örnek:
a:link{ color:red;
text-decoration:none; } //Linklerin ilk halidir.
a:visited{ color:red;
text-decoration:none; } //Linklerin ziyaret edildikten sonraki halidir.
a:hover{ color:red;
text-decoration:none; } //Mouse linkin üzerine geldiğindeki halidir.
a:active{ color:red;
text-decoration:none; } //Mouse ile linke tıklandığı andaki halidir.
ÖNEMLİ UYARI: Sınıflara ayrı ayrı css uygulanacağı zaman yukarıdaki sıra ile yazılmalıdır. Aksi halde tarayıcıda bazı durumlar farklı görünebilir.
İleriki konularımızda linkleri biçimlendirmeyle ilgili daha ayrıntılı örnekler ve menü yapımı mevcuttur.
Pseudo sınıflarını “Link pseudo sınıfları” ve “Dinamik pseudo sınıfları” şeklinde ikiye ayırabiliriz.
Link Pseudo Sınıfları
Yalnızca linklere uygulanabilirler. Bunlar :link ve :visited sınıflarıdır.
Dinamik Pseudo Sınıfları
Bu sınıfa giren çok sayıda pseudo sınıfı bulunmaktadır ve her birinin farklı kullanım alanları vardır. Bununla beraber en çok kullanılanları :hover, :active ve :focus sınıflarıdır.
:hover ve :active sınıfları linklerde de anlatılığı gibi çalışmaktadır.
:focus bir nesneye odaklanıldığı zamanki halidir. Örneğin bir metin kutusu normalde siyah renk kenarlığa sahipken, tıklanarak odaklanıldığında kenarlık rengi değiştirilebilir.
Örnek:
.kutu1 {border: 1px solid black;} //Burada kutu1 isminde bir class tanımladım ve bunu istediğim metin kutularına uyguladım. Bu metin kutularının kenarlıkları ilk anda siyah renkte olacaktır.
.kutu1:focus {border: 1px solid red;} //Burada ise kutu1 isimli sınıfın uygulandığı elemanların, odaklanıldıklarındaki kenarlık rengini kırmızı yaptım.
html linkler istediğim gibi görünmüyor, linklerin üstüne gelindiğinde, a etiketine css uygulama, pseudo sınıfları, :focus kullanımı, :hover, :active , :visited
KONU İLE İLGİLİ ÖRNEKLER
a:link {
color: #000;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #000;
}
a:hover {
text-decoration: underline;
color: #F00;
}
a:active {
text-decoration: none;
color: #FF0;
}
18275 kez okundu.