آموزش تزئین متن(Text Decoration) در CSS

در این مقاله، به آموزش ویژگی های زیر در CSS می پردازیم:

1. text-decoration-line
2. text-decoration-color
3. text-decoration-style
4. text-decoration-thickness
5. text-decoration

اضافه کردن یک خط تزئینی(Decoration Line) به یک متن

از ویژگی text-decoration-line برای اضافه کردن خط تزئینی به یک متن استفاده می شود.

نکته: ما می توانیم بیش از یک مقدار، مانند overline یا underline استفاده کنیم تا خط بالایی، و خط زیرین را به یک متن اضافه کنیم.

h1 {
  text-decoration-line: overline;
}

h2 {
  text-decoration-line: line-through;
}

h3 {
  text-decoration-line: underline;
}

p {
  text-decoration-line: overline underline;
}

 نکته: توصیه نمی شود برای یک متن که یک لینک نیست، underline ایجاد کنید. زیرا این کار باعث گیج شدن خواننده می شود. 

مشخص کردن یک رنگ برای خط تزئینی(Decoration Line)

از ویژگی text-decoration-color برای تنظیم رنگ خط تزئینی(decoration line) ستفاده می شود. منظور از خط تزئینی، خطی است که زیر یک لینک به هنگام رفتن ماوس روی آن، ایجاد می شود.

h1 {
  text-decoration-line: overline;
  text-decoration-color: red;
}

h2 {
  text-decoration-line: line-through;
  text-decoration-color: blue;
}

h3 {
  text-decoration-line: underline;
  text-decoration-color: green;
}

p {
  text-decoration-line: overline underline;
  text-decoration-color: purple;
}

مشخص کردن یک استایل برای خط تزئینی(Decoration Line)

از ویژگی text-decoration-style برای تنظیم استایل برای خط تزئینی استفاده می شود.

h1 {
  text-decoration-line: underline;
  text-decoration-style: solid;
}

h2 {
  text-decoration-line: underline;
  text-decoration-style: double;
}

h3 {
  text-decoration-line: underline;
  text-decoration-style: dotted;
}

p.ex1 {
  text-decoration-line: underline;
  text-decoration-style: dashed;
}

p.ex2 {
  text-decoration-line: underline;
  text-decoration-style: wavy;
}

p.ex3 {
  text-decoration-line: underline;
  text-decoration-color: red;
  text-decoration-style: wavy;
}

مشخص کردن ضخامت برای خط تزئینی

از ویژگی text-decoration-thickness برای تنظیم ضخامت خط تزئینی استفاده می شود.

h1 {
  text-decoration-line: underline;
  text-decoration-thickness: auto;
}

h2 {
  text-decoration-line: underline;
  text-decoration-thickness: 5px;
}

h3 {
  text-decoration-line: underline;
  text-decoration-thickness: 25%;
}

p {
  text-decoration-line: underline;
  text-decoration-color: red;
  text-decoration-style: double;
  text-decoration-thickness: 5px;
}

ویژگی خلاصه شده ی خط تزئینی

ویژگی text-decoration یک ویژگی خلاصه شده برای تمام ویژگی های زیر است:

• text-decoration-line (ضروری)
• text-decoration-color (اختیاری)
• text-decoration-style (اختیاری)
• text-decoration-thickness (اختیاری)

h1 {
  text-decoration: underline;
}

h2 {
  text-decoration: underline red;
}

h3 {
  text-decoration: underline red double;
}

p {
  text-decoration: underline red double 5px;
}

 یک نکته ی کوچک

تمام لینک ها در HTML به طور پیش فرض، یک زیرخط(underline) دارند. گاهی اوقات مشاهده می شود که برای لینک ها یک استایل تنظیم شده است که آندرلاین(زیرخط) نداشته باشند. از دستور text-decoration: none; برای حذف آندرلاین از لینک ها استفاده می شود. مانند مثال زیر:

a {
  text-decoration: none;
}

تمام ویژگی های text-decoration در CSS