CSS ile “link” Stilleme

Bu yazımızda, web sayfalarında sıklıkla kullanılan bağlantıları (link) CSS ile nasıl stilize edebileceğimizi inceleyeceğiz.

CSS’de bağlantıları stilize etmek için kullanılan özellikleri anlamadan önce, bağlantının ne olduğuna ve nasıl temsil edildiğine dikkat edelim.

Bağlantılar, bir web sayfasında başka bir sayfaya veya dış bir adrese yönlendiren elemanlardır. HTML’de bağlantılar <a> etiketi ile temsil edilir. Bu ise “anchor” (çapa) kelimesinin kısaltmasıdır. Etiketimiz genellikle bir href özelliği (value) ile birlikte gelir, fakat başka özellikler de alabilir. Bakınız:

1. href: Bağlantının göstereceği URL’yi belirtir.
2. target: Bağlantının nerede açılacağını belirtir (örneğin, _blank yeni bir pencerede açar).
3. download: Bağlantıya tıklandığında belirtilen kaynağın indirilmesini sağlar.
4. rel: Bağlantı ile ilgili ek bilgi sağlar (örneğin, nofollow bağlantının arama motorları tarafından takip edilmemesi gerektiğini belirtir).
5. type: Bağlantının içeriğinin MIME tipini belirtir.

<a href="https://www.example.com" target="_blank" rel="noopener">Ziyaret Et</a>

Yukarıdaki örnek, example.com adresine yeni bir pencerede bağlantı sağlar ve rel="noopener" özelliği, performans ve güvenlik için kullanılır.

Web tarayıcıları, bağlantıları belirli bir renkte (genellikle mavi) ve altı çizili olarak görüntüler. Ancak, sayfamızın genel tasarımı ile uyumlu hale getirmek için bu varsayılan stilleri de değiştirmek isteyebiliriz. İşte burada imdadımızda CSS yetişir.

CSS, bağlantılar için bir dizi özellik sunar, böylece onları kişiselleştirebilir ve sayfamızın genel tasarımına uygun hale getirebiliriz. Özellikle, metin rengi, alt çizgi, font ağırlığı ve mouse üzerine gelindiğinde (hover) olan tepkisi gibi bağlantının çeşitli yönlerini sözde sınıflar (pseudo-class) ile ayarlamamıza imkan tanır. Genellikle dört farklı link durumu için farklı stiller uygulanır. Bunlar sırasıyla aşağıdaki gibidir:

• :link: Bu sözde sınıf, henüz ziyaret edilmemiş bir bağlantıyı seçer. Kullanıcının daha önce tıklamadığı bağlantılar için stiller tanımlamamıza yarar.
• :visited: Kullanıcının daha önce ziyaret ettiği bağlantıları seçer. Tıklanmış ve ziyaret edilmiş linklere farklı bir stil vermek için kullanılır.
• :hover: Bağlantının üzerine fareyle gelindiğinde uygulanan stili tanımlar. Linkin üzerindeyken belirgin bir görsel geri dönüş sağlamak için kullanılır.
• :active: Bağlantıya tıklanırken uygulanan stili tanımlar. Linkin tıklama anında farklı bir stil göstermesini sağlamak için kullanılır.
• :focus: Bağlantı üzerine klavye veya başka bir giriş yöntemiyle odaklandığında uygulanan stil. Klavye kullanıcıları için görsel bir geri dönüş sağlar.

/* Henüz ziyaret edilmemiş linkler mavi olacak */
a:link {
    color: blue;
}

/* Daha önce ziyaret edilmiş linkler mor olacak */
a:visited {
    color: purple;
}

/* Fareyle üzerine gelindiğinde linkler kırmızı olacak */
a:hover {
    color: red;
}

/* Tıklanırken linkler yeşil olacak */
a:active {
    color: green;
}

/* Odaklandığında linkler turuncu olacak */
a:focus {
    color: orange;
}

See the Pen CSS link by 1kodum (@1kodum) on CodePen.

Ayrıca aşağıda, yaygın olarak link etiketi ile kullanılan CSS özellikleri gösterilmiştir:

• color: Bağlantının rengini belirler.
• text-decoration: Bağlantının altındaki çizgiyi kontrol eder.
• font-weight: Bağlantının yazı tipi kalınlığını belirler.
• background-color: Bağlantının arkaplan rengini belirler.
• border: Bağlantının etrafına bir sınır ekler.
• padding ve margin: Bağlantının iç ve dış boşluklarını belirler.
• font-size: Bağlantının yazı boyutunu belirler.
• font-style: Bağlantının yazı tipi stilini belirler (örn. italik).
• text-transform: Bağlantıdaki metni değiştirir (örn. büyük harf, küçük harf).
• letter-spacing: Bağlantıdaki harf aralığını ayarlar.
• transition: Bağlantı üzerindeki stil değişikliklerini animasyonla geçiş yaparak uygular.

a {
    color: blue;
    text-decoration: none;
    font-weight: bold;
    background-color: #f5f5f5;
    border: 1px solid gray;
    padding: 5px;
    margin: 10px;
    font-size: 16px;
    font-style: italic;
    text-transform: uppercase;
    letter-spacing: 2px;
    transition: color 0.3s;
}