Jump to content
Üyelik kaydınızı yaparak son yazılan içeriklerden haberdar olun! ×

CSS

  • entries
    53
  • comments
    0
  • views
    1,341

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


Doğuhan ELMA

36 views

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;

 

1.png

0 Comments


Recommended Comments

There are no comments to display.

Guest
Add a comment...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...