Bağlantı Altındaki Çizgileri Kaldır veya Kesik Noktalı veya Çift Altı Çizgili Bağlantıları Oluştur
Varsayılan olarak, web tarayıcıları belirli HTML öğelerine uyguladıkları belirli CSS stillerini içerir. Bu varsayılanların üzerine sitenizin kendi stil sayfalarını yazmazsanız, varsayılan değerler uygulanır. Köprüler için varsayılan görüntü stili, bağlantılı metinlerin mavi ve altı çizili olmasıdır. Tarayıcı bunu yapar, böylece bir sitenin ziyaretçileri hangi metnin bağlantılı olduğunu kolayca görebilirler. Birçok web tasarımcıları, özellikle bu altı çizili olan bu varsayılan stilleri umursamıyor. Neyse ki, CSS bu alt çizgilerin görünümünü değiştirmeyi veya tamamen kaldırmayı kolaylaştırır.
Metin Bağlantılarındaki Alt Çizgiyi Çıkarma
Altı çizili metin, altı çizili olmayan metni okumak için daha zor olabilir. Ayrıca, birçok tasarımcı sadece altı çizili metin bağlantılarının görünümünü umursamıyor. Bu durumlarda, muhtemelen bu alt çizgileri tamamen kaldırmak isteyeceksiniz.
Alt çizgileri metin bağlantılarından kaldırmak için CSS özelliği metin dekorasyonunu kullanacaksınız. Bunu yapmak için yazacağınız CSS:
bir {text-decoration: none; }
Bu bir CSS çizgisiyle, alt çizgiyi tüm metin bağlantılarından kaldırırdınız. Bu çok genel bir stil olmasına rağmen (bir eleman seçici kullanır), yine de varsayılan tarayıcı stilleri daha özgüdür. Bu varsayılan stiller, başlangıç için alt çizgileri oluşturan şey olduğundan, bunun üzerine yazmanız gereken şey budur.
Alt Çizgileri Çıkarmaya İlişkin Bir Dikkat
Görsel olarak, alt çizgilerin kaldırılması, tam olarak gerçekleştirmek istediğiniz şey olabilir, ancak bunu yaparken de dikkatli olmalısınız. Altı çizili bağlantıların görüntüsünü beğenip beğenmediğinizde, hangi metnin bağlantılı ve hangilerine bağlı olmadığını açıkça ortaya koyamazsınız. Alt çizgileri aldığınızda veya varsayılan mavi renkli bağlantı rengini değiştirirseniz, bunların yerine, bağlantılı metnin göze çarpmasına izin veren stille değiştirdiğinizden emin olmalısınız. Bu, sitenizin ziyaretçileri için daha sezgisel bir deneyim sağlayacaktır.
Olmayan Linklerin Altını Çizmeyin
Linkler ve alt çizgilerle ilgili bir başka dikkat, metni vurgulamanın bir yolu olmayan bir metnin altını çizmez. İnsanlar, altı çizili metnin bir bağlantı olmasını beklemeye başladılar. Bu nedenle, vurgu eklemek için içeriğin altını çizerseniz (onu kalınlaştırmak veya italik yapmak yerine), yanlış mesaj gönderirsiniz ve site kullanıcılarını karıştırırsınız.
Alt çizgiyi Nokta veya Tire olarak değiştirin
Metin bağlantınızın altını çizmek istiyorsanız, ancak "alt çizgi" olan varsayılan görünümdeki alt çizginin stilini değiştirirseniz, bunu da yapabilirsiniz. Bu katı çizginin yerine, bağlantılarınızın altını çizmek için noktaları kullanabilirsiniz. Bunu yapmak için alt çizgiyi kaldırmaya devam edersiniz, ancak bunu alt-kenar stili özelliğiyle değiştireceksiniz:
bir {text-decoration: none; kenar-alt: 1px noktalı; }Standart alt çizgiyi kaldırdığınızdan, noktalı olan, görünen tek sayıdır.
Çizgi çekmek için aynı şeyi yapabilirsin. Kenarlık stilini kesikli olarak değiştirin:
bir {text-decoration: none; kenar-alt: 1px kesik; }Alt Çizgi Rengi Değiştirme
Bağlantılarınıza dikkat çekmek için bir başka yol da alt çizginin rengini değiştirmektir. Sadece rengin renk düzeninize uyduğundan emin olun.
bir {text-decoration: none; kenar-alt: 1px katı kırmızı; }Çift Altı Çizgiler
Çift alt çizgileri kullanmanın hilesi, sınırın genişliğini değiştirmek zorunda olmanızdır. 1px geniş bir kenarlık oluşturursanız, tek bir alt çizgiye benzeyen çift alt çizgiyle sonuçlanırsınız.
bir {text-decoration: none; kenar-alt: 3px çift; }Mevcut alt çizgiyi, noktalı çizgilerden biri gibi diğer özelliklerle çift alt çizgi yapmak için de kullanabilirsiniz:
bir {border-bottom: 1px double; }Link Durumlarını Unutmayın
Kenarlık stilini bağlantılarınıza, örneğin: hover,: active veya: visit gibi farklı eyaletlerde ekleyebilirsiniz. Bu, "hover" sözde sınıfını kullandığınızda ziyaretçiler için hoş bir "rollover" stili deneyim yaratabilir. Bağlantının üzerine geldiğinizde ikinci bir noktalı alt çizgi yapmak için görünür:
bir {text-decoration: none; } a: hover {border-bottom: 1px noktalı; }Jennifer Krynin tarafından yazılmış orijinal makale. Jeremy Girard tarafından düzenlendi