CSS'de "text-decoration" özelliği ve TailwindCSS Sınıf Karşılığı

css
tailwind

Doğuhan ELMA tarafından Typography yayınlanma tarihi Mart 19

72 görünüm

CSS'de "text-decoration" özelliği, metnin nasıl görüneceğini belirlemek için kullanılır. Bu özellik, metin üzerinde çizgi çekme, altını çizme, üstünü çizme ve çizgi tarzını değiştirme gibi çeşitli dekorasyonlar uygulamanıza olanak tanır. "text-decoration" özelliği genellikle metin bağlantılarının görünümünü özelleştirmek için kullanılır, ancak herhangi bir metin üzerinde de kullanılabilir.

"text-decoration" özelliği aşağıdaki alt özellikleri içerebilir:

text-decoration-line: Bu alt özellik, dekorasyonun hangi türde olacağını belirler (örneğin, "underline" altını çizer, "line-through" üstünü çizer, "overline" üst çizgi ekler).

text-decoration-color: Dekorasyonun rengini belirler.

text-decoration-style: Dekorasyon çizgisinin tarzını belirler (örneğin, "solid", "dotted", "dashed", "double", "wavy").

text-decoration-thickness: Dekorasyon çizgisinin kalınlığını belirler.

Bir örnekle açıklamak gerekirse:

p {
  text-decoration-line: underline;
  text-decoration-color: red;
  text-decoration-style: dashed;
}

Bu CSS kodu, <p> etiketi ile işaretlenmiş paragrafların altının kırmızı ve kesik çizgilerle çizilmesini sağlar.

"text-decoration" özelliği kısa bir yazım biçimi olarak da kullanılabilir, böylece tek bir deyimde birden fazla alt özellik belirtilebilir. Örneğin:

a:hover {
  text-decoration: underline dashed red;
}

TailwinCSS:

Text Decoration

Class	Properties
underline	text-decoration-line: underline;
overline	text-decoration-line: overline;
line-through	text-decoration-line: line-through;
no-underline	text-decoration-line: none;

Text Decoration Color:

decoration-inherit	text-decoration-color: inherit;
decoration-current	text-decoration-color: currentColor;
decoration-transparent	text-decoration-color: transparent;
decoration-black	text-decoration-color: #000;
decoration-white	text-decoration-color: #fff;
decoration-slate-50	text-decoration-color: #f8fafc;
decoration-slate-100	text-decoration-color: #f1f5f9;
decoration-slate-200	text-decoration-color: #e2e8f0;

... devamı var..

Text Decoration Style:

decoration-solid	text-decoration-style: solid;
decoration-double	text-decoration-style: double;
decoration-dotted	text-decoration-style: dotted;
decoration-dashed	text-decoration-style: dashed;
decoration-wavy	text-decoration-style: wavy;

Text Decoration Thickness:

Class	Properties
decoration-auto	text-decoration-thickness: auto;
decoration-from-font	text-decoration-thickness: from-font;
decoration-0	text-decoration-thickness: 0px;
decoration-1	text-decoration-thickness: 1px;
decoration-2	text-decoration-thickness: 2px;
decoration-4	text-decoration-thickness: 4px;
decoration-8	text-decoration-thickness: 8px;

Text Underline Offset:

Class	Properties
underline-offset-auto	text-underline-offset: auto;
underline-offset-0	text-underline-offset: 0px;
underline-offset-1	text-underline-offset: 1px;
underline-offset-2	text-underline-offset: 2px;
underline-offset-4	text-underline-offset: 4px;
underline-offset-8	text-underline-offset: 8px;