Bir Web Sayfasında HTML Bağlantı Alt Çizgileri Nasıl Değiştirilir

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 CSS stilleri belirli HTML öğelerine uygulandığını gösterir. Sitenizin kendi stil sayfalarını bu varsayılanların üzerine yazmazsanız, varsayılanlar geçerli olur. İçin köprüler, 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 { metin-dekorasyon: yok; }

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 olsa da (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üşü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ı, bağlantı olmayan metnin altını vurgulamanın bir yolu olarak vurgulamayın. İnsanlar altı çizili metnin bir bağlantı olmasını beklemeye başladılar, bu nedenle eklemek için içeriğin altını çizerseniz vurgu (kalın veya italik yapmak yerine), yanlış mesajı gönderirsiniz ve siteyi karıştırırsınız kullanıcılar.

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 { metin-dekorasyon: yok; kenarlık-alt: 1 piksel 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 { metin-dekorasyon: yok; sınır-alt: 1 piksel 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 bedeninize uyduğundan emin olun. renk uyumu.

a { metin-dekorasyon: yok; kenarlık-alt: 1 piksel 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; }

Noktalı çizgilerden biri gibi diğer özelliklerle çift alt çizgi yapmak için mevcut alt çizgiyi de kullanabilirsiniz:

a { border-bottom: 1 piksel çift; }

Bağlantı Durumlarını Unutma

Bağlantılarınıza :hover, :active veya :visited gibi farklı durumlarda border-bottom stilini ekleyebilirsiniz. Bu, "vurgulu" sözde sınıfı kullandığınızda, ziyaretçiler için güzel bir "devir" stili deneyimi yaratabilir. Bağlantının üzerine geldiğinizde ikinci bir noktalı alt çizginin görünmesini sağlamak için:

a { metin-dekorasyon: yok; }
a: üzerine gelin { border-bottom: 1px noktalı; }