Css Link Biçimlendirmesi - Css Dersleri

[VexraDev]

ROHAN2 WORLD 1-120 TR TİPİ OFFICIAL YOHARA, BALATHOR VE AMON! 80. GÜNÜNDE! +10.000 ONLİNE! HİLE VE BOT %100 ENGELLİ HEMEN TIKLA!

Css link özellikleri nelerdir ve link görünümlerini nasıl ekleriz ?

Html sayfalarında link etiketlerimiz yani <a> ya da <button> etiketleri için kullanacağımız color, background-color, font-family, text-decoration, padding vb. css özellikleriyle çok güzel css linkleri ve butonları oluşturabiliriz.

En basitiyle bir <a> etiketi için bir css kodunu aşağıdaki gibi uygulayabiliriz.

a {
   text-decoration:none;
   color:red;   
}

Örneğimizde, link için yazı rengini kırmızı ve tarayıcı varsayılanı olan text-decoration:underline; özelliğini yani alt çizgi özelliğini kaldırmak için text-decoration:none; css kodunu ekliyoruz.

Örneğimizi biraz daha geliştirip daha güzel görüntüler elde edebiliriz.

a {
    background-color: #f44336;
    color: #fff;
    padding: 14px 25px;
    text-decoration: none;
    font-size: 16px;
}

Örneğimizde;

** <a> etiketi için bir arkaplan rengi veriyoruz. (#f44336)

** Kırmızı zemin rengi üzerinde beyaz yazı için #fff renk kodunu kullanıyoruz.

** Her nesnenin etrafında bir kutu olduğunu css box model dersinde söylemiştik. Bu kutu ile yazı arasındaki mesafeyi ayarlamak için üst ve alttan 14px ' lik bir padding değeri ve aynı şekilde sağ ve soldan 25px' lik bir padding değeri ile boşluk bırakıyoruz.

** text-decoration:none; diyerek link yazısı altındaki altçizgiyi kaldırıyoruz.

** font büyüklüğü olarak 16px' lik bir değer veriyoruz.

Peki link üzerine geldiğimizde ya da linke tıkadığımızda bir efekti nasıl oluşturuyoruz ?

Linklere efekt eklemek için pseudo class özelliklerini kullanmalıyız. Bu konuyu daha Css Selectors dersimizde görmüştük.

/* ziyaret edilmemiş link için eklenecek css kodları */
a:link {
    color: red;
}

/* ziyaret edilmiş link için eklenecek css kodları */
a:visited {
    color: green;
}

/* link üzerine geldiğimiz anda eklenecek css kodları */
a:hover {
    color: hotpink;
}

/* linke tıkladığımız anda eklenecek css kodları */
a:active {
    color: blue;
}

Yukarıdaki örneğimizde <a> etiketi için farklı durumlar gösterilmiştir. Buradaki durumları iyi öğrenmemiz gerekiyor.

a:link => ziyaret edilmemiş link için eklenecek css kodları :link pseudo class' ı ile eklenir.

a:visited => ziyaret edilmiş link için eklenecek css kodları a:visited pseudo class' ı ile eklenir.

a:hover => link üzerine geldiğimiz anda eklenecek css kodları a:hover pseudo class' ı ile eklenir.

a:active => linke tıkladığımız anda eklenecek css kodları a:active pseudo class' ı ile eklenir.

a:link, a:visited {
    background-color: #f44336; 
    color: #fff; 
    padding: 14px 25px; 
    text-decoration: none; 
    font-size: 16px;
    opacity: 0.9;
}
a:hover, a:active {
    opacity: 1;
}

** Css Opacity özelliği saydamlık ile alakalı bir özelliktir. Yani 1 olduğundan tamamen orjinal görüntü, 0 olduğunda ise tamamen sayfam bir görüntü elde ederiz. Eğer 0.5 'e getirirsek %50 sayfam bir görüntüye sahip oluruz.

Örneğimizde a:link ve a:visited pseudo class' lari ile iki durumu birleştirdik yani linkin ziyaret edilmemiş ve edilmiş halini grupladık ve aynı css kodlarını ekledik.

Daha sonra a:hover ve a:active pseudo class 'ları ile gene iki durumu gruplayıp opacity özelliğini 1 ' e getirdik. Yani kullanıcı link üzerine mouse ile geldiğinde ya da linke tıkladığında tek değişen css özelliği opacity' nin 0.9dan 1 'e gelmesidir. Dolayısıyla burada soluk bir zemin renginden rengin orjinaline bir geçiş efekti eklemiş oluyoruz.