CSS'deki text-decoration-thicknessözellik, bir öğedeki metinde kullanılan dekorasyon çizgisinin kontur kalınlığını ayarlar. text-decoration-lineDeğeri ihtiyaçları ya olması underline, line-throughya da overlinekalınlığı özelliği yansıtacak.
.text ( text-decoration-line: underline; text-decoration-thickness: 2px; )Sözdizimi
auto | from-font | | Değerler
auto: (Varsayılan) Tarayıcının metin süsleme çizgisi için uygun bir kalınlık belirlemesine izin verir.from-font: Kullanılabilir ilk fontta tercih edilen bir kalınlığı belirten metrikler varsa, bu kalınlığı kullanır; aksi takdirde otomatik değer gibi davranır.: Bir birimi olan herhangi bir geçerli uzunluk, metin süsleme satırlarının kalınlığını sabit bir uzunluk olarak belirtir. Bu, yazı tipindeki ve tarayıcı varsayılanındaki tüm bilgilerin yerini alır.percentage: Metin süsleme çizgilerinin kalınlığını öğenin yazı tipinde 1em yüzdesi olarak belirtir.initial: Otomatik olan özelliğin varsayılan ayarı.inherit: Ebeveynin dekorasyon kalınlığı değerini benimser.unset: Geçerli kalınlığı elemandan kaldırır.
Demo
text-decoration-thicknessÖzelliğin öğenin metin dekorasyonunu nasıl etkilediğini görmek için aşağıdaki demodaki değerini değiştirin :
Torunlar için sabittir
Bir öğe için bir dekorasyon belirledikten sonra, tüm çocukları da bu dekorasyona sahip olacak. Şimdi, çocuklardan biri için dekorasyonun kalınlığını değiştirmek istediğimizi hayal edin:
p ( text-decoration-line: underline; text-decoration-color: green; text-decoration-thickness: 0.2em; )
p span ( text-decoration-thickness: 0.1em; /* Doesn't work */ )Üst öğeler tarafından belirtilen dekorasyon kalınlığı geçersiz kılınamadığından bu işe yaramaz. Bunun işe yaraması için, öğenin kendisi için bir dekorasyon özelliğinin ayarlanması gerekir:
p ( text-decoration-line: underline; text-decoration-color: green; text-decoration-thickness: 0.2em; ) p span ( text-decoration-line: underline; text-decoration-color: green; text-decoration-thickness: 0.1em; /* It works! */ )Yüzde ve çağlayan
Bu özellik için uzunluk, sabit bir değer olarak miras alınır ve yazı tipiyle ölçeklenmez. Öte yandan, bir yüzde göreceli bir değer olarak miras alır ve bu nedenle miras aldıkça yazı tipindeki değişikliklerle ölçeklenir.
p ( text-decoration-thickness: 20%; )
p span ( font-size: 20px; text-decoration-line: underline; text-decoration-thickness: inherit; /* = 20% */ )Aşağıdaki demo, kalıtım durumunda em ve yüzde değerleri arasındaki karşılaştırmayı gösterir ve görebileceğiniz gibi, sol tarafta (em'i kullandığımız) kalıtsal değer sabit bir uzunluktadır. Bu, yazı tipindeki değişiklikle ölçeklenmediği anlamına gelir. Ancak sağ tarafta, metin göreceli bir değeri miras alır (bu durumda% 20); bu nedenle kalınlık yazı tipindeki değişiklikle ölçeklenir.
Spesifikasyonun mevcut çalışma taslağı yüzde değerlerine atıfta bulunsa da text-decoration-thickness, gerçek destek şu anda Firefox ile sınırlıdır.
İle kullanmak text-decoration
CSS Metin Dekorasyon Modülü Seviye 4 spesifikasyonunun mevcut çalışma taslağı text-decoration-thickness, text-decorationsteno özelliğinde bir değer olarak bulunur .
.link ( text-decoration: underline solid green 1px; )
/* The longhand equivalent */ .link ( text-decoration-line: underline; text-decoration-style: solid; text-decoration-color: green, text-decoration-thickness: 1px; )text-decorationİyi destekleniyor olsa da, eklenmesi için destek text-decoration-thicknessşu anda Firefox ile sınırlıdır.
Tarayıcı desteği
| Özellik | IE | Kenar | Firefox | Krom | Safari | Opera |
|---|---|---|---|---|---|---|
| Emlak | Hayır | Hayır | 70 | Hayır | 12.1 | Hayır |
| Yüzdeler | Hayır | Hayır | 76 | Hayır | Hayır | Hayır |
| Kısa gösterim | Hayır | Hayır | 70 | Hayır | Hayır | Hayır |
| Özellik | Android Chrome | Android Firefox | Android Tarayıcı | iOS Safari | Opera Mini |
|---|---|---|---|---|---|
| Emlak | Hayır | Hayır | Hayır | 12.2 | Hayır |
| Yüzdeler | Hayır | Hayır | Hayır | Hayır | Hayır |
| Kısa gösterim | Hayır | Hayır | Hayır | Hayır | Hayır |
Notlar
- Özellik eskiden çağrılıyordu
text-decoration-width, ancak CSS Metin Dekorasyon Modülü Seviye 4 spesifikasyonunun 2019 çalışma taslağında güncellendi. - Tarayıcı, minimum 1 cihaz piksel kalınlığı kullanmalıdır.