HTML'deki Bağlantılardan Alt Çizgileri Çıkarmanın Kolay Yolu Öğrenin

Farkında olmak için metin bağlantılarından alt çizgi çıkarma adımları ve sorunları

Varsayılan olarak, veya "anchor" öğesini kullanarak HTML'ye bağlı metin içeriği bir alt çizgi ile biçimlendirilir. Çoğu zaman, web tasarımcıları alt çizgiyi kaldırarak bu varsayılan stili kaldırmayı tercih eder.

Pek çok tasarımcı, özellikle çok sayıda bağlantıya sahip yoğun içerik bloklarında altı çizili metnin görünümünü almaz. Altını çizen sözcüklerin tümü, bir belgenin okuma akışını gerçekten kırabilir. Birçoğu, bu alt çizgilerin aslında, doğal harf biçimlerini değiştirmenin altını çizdiği için, ayırt etmek ve okumak için kelimeleri daha zor hale getirdiğini ileri sürmektedir.

Bununla birlikte, bu alt çizgilerin metin bağlantılarında saklanması için yasal faydalar vardır. Örneğin, büyük metin bloklarına göz atarken, doğru renk kontrastı ile birleştirilen altı çizili bağlantılar, okuyucuların bir sayfayı anında taramasını ve bağlantıların nerede olduğunu görmesini kolaylaştırır. About.com'daki web tasarım makalelerine ve sitedeki diğer makalelere bakarsanız, altı çizili bağlantıların bu stilini yerinde göreceksiniz.

Metinlerden bağlantıları kaldırmaya karar verirseniz (kısa bir süre içinde ele alacağımız basit bir süreç), bu metnin, metnin düz metinden bir bağlantı olduğunu hâlâ ayırt etmenin yollarını bulmaya çalışın. Bu genellikle daha önce belirtilen renk kontrastı ile yapılır, ancak renk tek başına renk körlüğü gibi görme bozukluğu olan ziyaretçiler için bir sorun oluşturabilir. Renk körlüğünün özel biçimine bağlı olarak, kontrast tamamen üzerinde kaybolmuş olabilir; böylece, bağlantılı ve bağlanmamış metin arasındaki farkı görmelerini engelleyebilir. Bu nedenle altı çizili metin hala bağlantıları göstermenin en iyi yolu olarak kabul edilir.

Öyleyse hala yapmak istiyorsan bir alt çizgiyi nasıl kapatıyorsun? Bu bizim görsel bir özellik olduğu için, web sitemizin her türlü görsel işleyişine - CSS - yöneleceğiz.

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

Çoğu durumda, yalnızca bir metin bağlantısında bir alt çizgi açmak istemiyorsunuz. Bunun yerine, tasarım stiliniz muhtemelen tüm linklerden alt çizgilerin kaldırılmasını gerektirir. Bunu, harici stil sayfanıza stilleri ekleyerek yaparsınız.

bir {text-decoration: none; }

Bu kadar! CSS'nin bu basit bir çizgisi, tüm linklerde altyazıyı (aslında “text-decoration” için CSS özelliğini kullanan) altüst eder.

Ayrıca bu tarzla daha spesifik olabilirsiniz. Örneğin, yalnızca "nav" öğesinin alt çizgisini veya bağlantılarını kapatmak isterseniz, şunları yazabilirsiniz:

nav a {text-decoration: none; }

Şimdi, sayfadaki metin bağlantıları varsayılan alt çizgiyi alacaktı, ancak nav'dakiler kaldırılacaktı.

Birçok web tasarımcıları yapmayı tercih ettikleri şey, biri metnin üzerine geldiğinde bağlantıyı "açık" duruma getirmektir. Bu aşağıdaki kullanılarak yapılır: hover CSS sözde sınıf, bunun gibi:

bir {text-decoration: none; } a: hover {text-decoration: alt çizgi; }

Inline CSS'yi kullanma

Harici bir stil sayfasına değişiklik yapmaya alternatif olarak, stilleri doğrudan HTML'deki öğeye de ekleyebilirsiniz.

bu bağlantının alt çizgisi yoktur

Bu yöntemdeki sorun, HTML yapınızın içine stil bilgilerini yerleştirmesidir ki 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 bağlantı bilgisini tek tek her bağlantıya eklemek, sitenizin koduna fazladan bir ek işaret eklenmesi anlamına gelir. Bu sayfa bloat bir sitenin yükleme süresini yavaşlatır ve genel sayfa yönetimini daha zor hale getirebilir. Bu nedenlerden ötürü, tüm sayfa stili ihtiyaçları için her zaman harici bir stil sayfasına dönülmesi tercih edilir.

Kapanışta

Bir web sayfasının metin bağlantılarından alt çizgiyi kaldırmak kadar kolay, bunu yapmanın sonuçlarına dikkat etmelisiniz. Bir sayfanın görünümünü gerçekten temizlerken, genel kullanılabilirlik pahasına yapabilir. Bir sayfanın "metin dekorasyonunu" özelliklerini değiştirmeyi düşündüğünüzde bunu dikkate alın.

Jennifer Krynin tarafından yazılmış orijinal makale. Jeremy Girard tarafından 9/19/16 tarihinde düzenlenmiştir