Skip to content

HTML’deki Bağlantılardan Alt Çizgileri Kaldırmanın Kolay Bir Yolunu Öğrenin

7 de Mayıs de 2021

Varsayılan olarak, veya “bağlantı” öğesi kullanılarak HTML’ye bağlanan metin içeriği bir alt çizgi ile stilize edilir. Çoğu zaman, web tasarımcıları alt çizgiyi kaldırarak bu varsayılan stili kaldırmayı seçerler.

Alt Çizginin Sebepleri ve Karşıtlığı

Çoğu tasarımcı, özellikle çok sayıda bağlantı içeren yoğun içerik bloklarında altı çizili metinlerin görünümünü önemsemez. Altı çizili kelimelerin tümü, bir belgenin okuma akışını gerçekten bozabilir. Birçoğu, altını çizmenin doğal harf biçimlerini değiştirmesi nedeniyle, bu alt çizgilerin aslında kelimeleri ayırt etmeyi ve daha hızlı okumayı zorlaştırdığını iddia etti. Bununla birlikte, bu alt çizgileri metin bağlantılarında tutmanın meşru faydaları vardır. Örneğin, büyük metin bloklarına göz attığınızda, uygun renk kontrastıyla birleştirilmiş altı çizili bağlantılar, okuyucuların bir sayfayı hemen taramasını ve bağlantıların nerede olduğunu görmesini kolaylaştırır. Metinden bağlantıları kaldırmaya karar verirseniz (kısaca ele alacağımız basit bir işlem), bağlantının ne olduğunu düz metinden ayırmak için o metne stil vermenin yollarını bulduğunuzdan emin olun. Bu genellikle renk kontrastı ile yapılır, ancak renk tek başına renk körlüğü gibi görme engelli ziyaretçiler için sorun oluşturabilir. Renk körlüğünün belirli biçimine bağlı olarak, kontrast tamamen kaybolabilir ve bağlantılı olan ve olmayan metin arasındaki farkı görmelerini engelleyebilir. Bu nedenle altı çizili metin bağlantıları göstermenin en iyi yolu olarak kabul edilmektedir. Öyleyse, yine de yapmak istiyorsan bir alt çizgiyi nasıl kapatırsın? Bu ilgilendiğimiz görsel bir özellik olduğu için, web sitemizin görsel olan her şeyi ele alan kısmına – CSS’ye döneceğiz.

Bağlardaki Alt Çizgileri Kapatmak için Basamaklı Stil Sayfalarını Kullanın

Çoğu durumda, yalnızca bir metin bağlantısında alt çizgiyi kapatmak istemezsiniz. Bunun yerine, tasarım stiliniz muhtemelen tüm bağlantılardan alt çizgileri kaldırmanızı gerektirir. Bunu, harici stil sayfanıza stiller ekleyerek yaparsınız. a {
metin dekorasyonu: yok;
}

Bu kadar! Bu basit bir CSS satırı, tüm bağlantılarda alt çizgiyi (aslında “metin dekorasyonu” için CSS özelliğini kullanır) kapatır. Bu stille daha spesifik de olabilirsiniz. Örneğin, “nav” öğesinin yalnızca alt çizgisini veya içindeki bağlantıları kapatmak istiyorsanız, şunu yazabilirsiniz: nav a {
metin dekorasyonu: yok;
}

Şimdi, sayfadaki metin bağlantıları varsayılan alt çizgiyi alacaktı, ancak gezinti içerisindekiler bunu kaldıracaktı. Birçok web tasarımcısının yapmayı tercih ettiği bir şey, birisi metnin üzerine geldiğinde bağlantıyı tekrar “açık” hale getirmektir. Bu, şu şekilde: hover CSS sahte sınıfı kullanılarak yapılır: a {
metin dekorasyonu: yok;
}
a: hover {
metin süsleme: altı çizili;
}

Satır İçi CSS Kullanma

Harici bir stil sayfasında değişiklik yapmaya alternatif olarak, stilleri doğrudan HTML’deki öğenin kendisine de ekleyebilirsiniz. Bu yöntemin sorunu, stil bilgilerini HTML yapınızın içine yerleştirmesidir, bu en iyi uygulama değildir. Stil (CSS) ve yapı (HTML) ayrı tutulmalıdır. Bir sitenin tüm metin bağlantılarının alt çizginin kaldırılmasını istiyorsanız, bu stil bilgisini her bağlantıya ayrı ayrı eklemek, sitenizin koduna makul miktarda fazladan biçimlendirme eklenmesi anlamına gelir. Bu sayfa şişmesi, bir sitenin yükleme süresini yavaşlatabilir ve genel sayfa yönetimini çok daha zor hale getirebilir. Bu nedenlerden dolayı, tüm sayfa şekillendirme ihtiyaçları için her zaman harici bir stil sayfasına başvurmak tercih edilir.

Kapanışta

Alt çizgiyi bir web sayfasının metin bağlantılarından kaldırmak kadar kolay, bunu yapmanın sonuçlarına da dikkat etmelisiniz. Bir sayfanın görünümünü gerçekten temizlese de, bunu genel kullanılabilirlik pahasına yapabilir. Bir sonraki sefer bir sayfanın “metin süsleme” özelliklerini değiştirmeyi düşündüğünüzde bunu göz önünde bulundurun.