Bilinmesi gereken
- Yazarak CSS özelliği metin dekorasyonu ile metin bağlantılarındaki alt çizgiyi kaldırın a { metin-dekorasyon: yok; }.
- Alt çizgiyi border-bottom stil özelliği ile noktalara değiştirin a { metin-dekorasyon: yok; kenarlık-alt:1px noktalı; }.
- Yazarak alt çizgi rengini değiştirin a { metin-dekorasyon: yok; kenarlık-alt:1px düz kırmızı; }. Sabit kırmızıyı değiştir başka bir renkle.
Bu makale, alt çizgiyi kaldırarak, noktalı bir çizgiyle değiştirerek veya rengini değiştirerek web sayfanızdaki metin bağlantılarının varsayılan görünümünü değiştirmek için CSS’yi kullanmanın birkaç yolunu açıklar. Alt çizgiyi kesikli çizgiye veya çift alt çizgiye değiştirmek için ek bilgiler dahildir.
Metin Bağlantılarındaki Alt Çizgi Nasıl Kaldırılır
Varsayılan olarak, web tarayıcılarının belirli HTML öğelerine uyguladıkları belirli CSS stilleri vardır. Sitenizin kendi stil sayfalarını bu varsayılanların üzerine yazmazsanız, varsayılanlar geçerli olur. Köprüler için varsayılan görüntüleme stili, bağlantılı metinlerin mavi ve altı çizili olmasıdır. Dilerseniz bu alt çizgilerin görünümünü değiştirebilir veya web sayfanızdan tamamen kaldırabilirsiniz. Metin bağlantılarından alt çizgileri kaldırmak için metin-dekorasyon CSS özelliğini kullanırsınız. Bunu yapmak için yazdığınız CSS: a { text-decoration: none; }
class=”ql-syntax”> Bu tek CSS satırıyla, web sayfanızdaki tüm metin bağlantılarından alt çizgiyi kaldırırsınız. Bu çok genel bir stil olmasına rağmen (bir öğe seçici kullanır), yine de varsayılan tarayıcı stillerinden daha fazla özgüllüğe sahiptir. Bu varsayılan stiller, başlangıçta alt çizgileri oluşturan şeydir, üzerine yazmanız gereken şey budur.
Alt Çizgilerin Kaldırılmasına İlişkin Bir Dikkat
Görsel olarak, alt çizgilerin kaldırılması tam olarak başarmak istediğiniz şey olabilir, ancak bunu yaparken de dikkatli olmalısınız. Altı çizili bağlantıların görünümünü beğenseniz de beğenmeseniz de, bunların hangi metnin bağlantılı olup hangilerinin olmadığını açıkça ortaya koyduklarını iddia edemezsiniz. Alt çizgileri kaldırırsanız veya bu varsayılan mavi bağlantı rengini değiştirirseniz, bunları bağlantılı metnin öne çıkmasına izin veren stiller ile değiştirdiğinizden emin olmalısınız. Bu, sitenizin ziyaretçileri için daha sezgisel bir deneyim sağlayacaktır.
Bağlantı Olmayanların Altını Çizmeyin
Bağlantılar ve alt çizgilerle ilgili bir diğer uyarı, vurgulamanın bir yolu olarak bağlantı olmayan metnin altını çizmeyin. İnsanlar altı çizili metnin bir bağlantı olmasını bekler hale geldi, bu nedenle vurgu eklemek için içeriğin altını çizerseniz (onu kalın veya italik yapmak yerine), yanlış mesaj gönderirsiniz ve site kullanıcılarının kafasını karıştırırsınız.
Alt Çizili Noktalara veya Kısa Çizgilere Nasıl Değiştirilir
Metin bağlantınızın altı çizili kalmasını istiyorsanız, ancak bu alt çizginin stilini “düz” bir çizgi olan varsayılan görünümden değiştirmek istiyorsanız, bunu da yapabilirsiniz. Bu düz çizgi yerine, bağlantılarınızın altını çizmek için noktalar kullanabilirsiniz. Bunu yapmak için, yine de alt çizgiyi kaldıracaksınız, ancak onu border-bottom style özelliği ile değiştireceksiniz: a { text-decoration: none; border-bottom: 1px noktalı; }
Standart alt çizgiyi kaldırdığınız için, görünen tek nokta noktalı olandır. Aynı şeyi tire almak için de yapabilirsiniz. Sadece kenarlık-alt stilini kesikli olarak değiştirin: a { text-decoration: none; kenarlık-alt:1px kesikli; }
Alt Çizgi Rengi Nasıl Değiştirilir
Bağlantılarınıza dikkat çekmenin bir başka yolu da alt çizginin rengini değiştirmektir. Sadece rengin renk düzeninize uyduğundan emin olun. a { metin-dekorasyon: yok; kenarlık-alt:1px düz kırmızı; }
Çift Alt Çizgi
Çift alt çizgi kullanmanın püf noktası, kenarlığın genişliğini değiştirmeniz gerektiğidir. 1 piksel genişliğinde bir kenarlık oluşturursanız, tek bir alt çizgiye benzeyen çift bir alt çizgi elde edersiniz. a { metin-dekorasyon: yok; kenarlık-alt:3 piksel çift; }
Mevcut alt çizgiyi, noktalı çizgilerden biri gibi diğer özelliklerle çift alt çizgi yapmak için de kullanabilirsiniz: a { border-bottom:1px double; }
Bağlantı Durumlarını Unutma
Bağlantılarınıza :hover, :active veya :visited gibi farklı durumlarda kenarlık-alt stili ekleyebilirsiniz. Bu, “vurgulu” sözde sınıfını kullandığınızda, ziyaretçiler için güzel bir “rollover” stili deneyimi yaratabilir. Bağlantının üzerine geldiğinizde ikinci bir noktalı alt çizginin görünmesini sağlamak için: a { text-decoration: none; }
a:hover { border-bottom:1px noktalı; }
mla apa chicago Alıntınızı Biçimlendirin
Kyrin, Jennifer. “Bir Web Sayfasındaki Bağlantı Alt Çizgileri Nasıl Değiştirilir.” ThoughtCo, Mayıs. 14, 2021, thinkco.com/change-link-underlines-3466397.
Kyrnin, Jennifer. (2021, 14 Mayıs). Bir Web Sayfasındaki Bağlantı Alt Çizgileri Nasıl Değiştirilir. https://www.thinktco.com/change-link-underlines-3466397 adresinden alındı
Kyrnin, Jennifer. “Bir Web Sayfasındaki Bağlantı Alt Çizgileri Nasıl Değiştirilir.” Düşünce Şirketi https://www.thinktco.com/change-link-underlines-3466397 (31 Mayıs 2021’de erişildi).
