AnasayfaCssCss Link Biçimlendirmesi Nasıl Yapılır ?
25

Css Link Biçimlendirmesi Nasıl Yapılır ?

nhtctn nhtctn
13 Haziran 2020 Css

Html de link kullanımını iki şekilde görebilirsiniz. <a> veya <button> etiketleri sayesinde kolaylıkla link oluşturulabilir. Color, background-color, font-family, text-decoration, padding gibi özellikler eklenerek linklerimizi daha güzel bir hale getirebiliriz.

a etiketiyle link oluşturma

   <a href="#">Anasayfa</a>
    <a href="#">Hakkımızda</a>
    <a href="#">İletişim</a>
       a {
            text-decoration: none;
            color: green;
        }

Yukarıdaki örneğimizi biraz daha css ile özelleştirirsek daha güzel bir görüntü elde edebiliriz.

a {
            text-decoration: none;
            color: green;
            font-size: 20px;
            background-color: deeppink;
            padding: 15px 15px;
            display: inline-block;
            margin-top: 10px;
        }

Link görünümü, tıklandığında, üzerine geldiğimizde, ziyaret edildiğinedeki özellikler aşağıdaki gibidir.

/* 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;
}

Aşağıda olduğu gibi bir kullanım yapılabilir.

  a:link, a:visited {

            text-decoration: none;
            color: green;
            font-size: 20px;
            background-color: deeppink;
            padding: 15px 15px;
            display: inline-block;
            margin-top: 10px;
            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.

Yorum yazın

BENZER YAZILAR