- Konu sahibi
- #1
CSS
En küçük çalışan örnek aşağıdaki gibidir:
Bu kod tarayıcıda ikinci paragrafın altında, üçüncü paragrafın ise ortasından geçen bir çizgi gösterir. Çizgi görünmüyorsa öncelikle seçicinin gerçekten ilgili elemana uygulandığını ve başka bir CSS kuralının daha yüksek öncelikle değeri değiştirmediğini denetleyin.
Yukarıdaki örnekte metnin altında kırmızı, dalgalı ve 2 piksel kalınlığında bir çizgi oluşur. Aynı amaç kısaltma kullanılarak da yazılabilir:
Kısaltmada değerlerin sırası genellikle okunabilirlik için çizgi türü, stil, renk ve kalınlık şeklinde yazılır. Daha ayrıntılı kontrol veya ileride yalnızca tek bir özelliği değiştirme ihtiyacı varsa uzun özellikleri kullanmak daha anlaşılırdır.
Aşağıdaki değerler farklı görsel amaçlara hizmet eder:
Tarayıcılar bağlantıları çoğunlukla varsayılan olarak altı çizili gösterir. İçerik bağlantısındaki çizgiyi koruyup etkileşimde güçlendirebilirsiniz:
Bu yaklaşım, bağlantının alt çizgisini sürekli korur; hover veya görünür odak durumunda çizgiyi kalınlaştırır. Çizgiyi tamamen kaldırıyorsanız bağlantıları yalnızca renkle ayırt etmeyin; renk görme farklılıklarında bağlantının metin içinde fark edilmesi zorlaşabilir. Alt çizgiyi korumak çoğu içerik bağlantısı için daha açık bir tercihtir.
Evet.
text-decoration, metnin altını çizme, üstünü çizme veya üzerine çizgi ekleme gibi görsel süslemeleri kontrol eden özelliktir. En yaygın kullanım alanı bağlantıların alt çizgisini yönetmektir. Örneğin text-decoration: underline; bir metnin altına çizgi ekler, text-decoration: none; ise mevcut metin dekorasyonunu kaldırır.Temel kullanım
En küçük çalışan örnek aşağıdaki gibidir:
Kod:
<p class="normal">Normal metin</p>
<p class="alt-cizgili">Altı çizili metin</p>
<p class="ustunden-cizili">Üstü çizili metin</p>
<style>
.alt-cizgili {
text-decoration: underline;
}
.ustunden-cizili {
text-decoration: line-through;
}
</style>Bu kod tarayıcıda ikinci paragrafın altında, üçüncü paragrafın ise ortasından geçen bir çizgi gösterir. Çizgi görünmüyorsa öncelikle seçicinin gerçekten ilgili elemana uygulandığını ve başka bir CSS kuralının daha yüksek öncelikle değeri değiştirmediğini denetleyin.
text-decoration nasıl çalışır?
text-decoration bir kısaltma özelliktir. Çizginin türünü, rengini, stilini ve kalınlığını tek satırda veya ayrı özelliklerle belirleyebilirsiniz:
Kod:
.uyari {
text-decoration-line: underline;
text-decoration-color: #b00020;
text-decoration-style: wavy;
text-decoration-thickness: 2px;
}Yukarıdaki örnekte metnin altında kırmızı, dalgalı ve 2 piksel kalınlığında bir çizgi oluşur. Aynı amaç kısaltma kullanılarak da yazılabilir:
Kod:
.uyari {
text-decoration: underline wavy #b00020 2px;
}Kısaltmada değerlerin sırası genellikle okunabilirlik için çizgi türü, stil, renk ve kalınlık şeklinde yazılır. Daha ayrıntılı kontrol veya ileride yalnızca tek bir özelliği değiştirme ihtiyacı varsa uzun özellikleri kullanmak daha anlaşılırdır.
Kullanılabilen çizgi türleri
Aşağıdaki değerler farklı görsel amaçlara hizmet eder:
| Değer | Sonuç | Yaygın kullanım |
|---|---|---|
| none | Dekorasyon yok | Bağlantı çizgisini kaldırma |
| underline | Metnin altında çizgi | Bağlantı ve vurgu |
| overline | Metnin üstünde çizgi | Özel görsel tasarımlar |
| line-through | Metnin ortasından çizgi | İptal edilmiş veya tamamlanmış içerik |
Bağlantılarda doğru kullanım
Tarayıcılar bağlantıları çoğunlukla varsayılan olarak altı çizili gösterir. İçerik bağlantısındaki çizgiyi koruyup etkileşimde güçlendirebilirsiniz:
Kod:
a {
text-decoration: underline;
}
a:hover,
a:focus-visible {
text-decoration-thickness: 2px;
}Bu yaklaşım, bağlantının alt çizgisini sürekli korur; hover veya görünür odak durumunda çizgiyi kalınlaştırır. Çizgiyi tamamen kaldırıyorsanız bağlantıları yalnızca renkle ayırt etmeyin; renk görme farklılıklarında bağlantının metin içinde fark edilmesi zorlaşabilir. Alt çizgiyi korumak çoğu içerik bağlantısı için daha açık bir tercihtir.
Sık yapılan hatalar
-
text-decoration: underline solid;yazıp renk veya çizgi kalınlığını kesin olarak değiştirdiğinizi varsaymak: Tarayıcı varsayılan değerleri kullanabilir. Gerekliysetext-decoration-colorvetext-decoration-thicknessdeğerlerini de belirtin. - Alt çizgiyi
border-bottomile karıştırmak:border-bottomkutunun kenarına çizgi ekler;text-decorationise metin dekorasyonudur. Satır kırılması ve çizginin metinle ilişkisi bu nedenle farklı olabilir. - Bir alt elemana
text-decoration: nonevererek üst elemana ait dekorasyonu kaldırmayı beklemek: Üst elemana uygulanan metin dekorasyonu alt içerik üzerinde de görünebilir ve alt eleman bunu her durumda iptal etmez. Dekorasyonu mümkünse onu oluşturan elemana uygulayın. - Anlamsal olarak silinen içeriği yalnızca
line-throughile göstermek: Görsel çizgi, içeriğin gerçekten silindiği anlamına gelmez. Gerekiyorsa HTML anlamını da doğru kurun.
text-decoration-line ya da kısa text-decoration kullanın. Renk, stil ve kalınlık üzerinde tasarım kontrolü gerekiyorsa uzun özellikleri ekleyin; etkileşimli bağlantılarda odak durumunu görünür bırakın.Kaynaklar
Sık sorulan sorular
text-decoration ile text-decoration-line arasındaki fark nedir?
text-decoration-line yalnızca çizginin türünü belirler. text-decoration ise çizgi türüyle birlikte renk, stil ve kalınlık gibi alt özellikleri tek bildirimde ayarlayabilen kısaltmadır.Alt çizginin rengini metinden farklı yapabilir miyim?
Evet.
text-decoration-color ile çizginin rengini ayrı belirleyebilirsiniz. Böylece metin ve alt çizgi aynı renkte olmak zorunda kalmaz.