ویژگی text-decoration در CSS

text-decoration Property

ویژگی کوتاه نویسی text-decoration در CSS نوع نمایش اِلمانهای تزئینیِ متن را مشخص می کند.

این ویژگی شامل سه زیر مجموعه از ویژگیهای دیگر به ترتیب زیر است:

• text-decoration-line
• text-decoration-color
• text-decoration-style

نحوه نوشتار

text-decoration: overline red;
text-decoration: underline blue dashed;

text-decoration: text-decoration-line | text-decoration-color | text-decoration-style;

مقادیر

text-decoration-line​

نوع اِلمان تزئینی متن را مشخص می کند. مانند: (underline , overline , line-through)

text-decoration-color​

رنگ اِلمان تزئینی متن را مشخص می کند.

text-decoration-style​

استایل اِلمان تزئینی متن را مشخص می کند. مانند (solid , wavy , dotted , dashed , double)

در مثال زیر نحوه عملکرد این ویژگی را میبینیم:

html

<p class="p1">
      this is a sample text.
</p>
<p class="p2">
      this is a sample text.
</p>
<p class="p3">
      this is a sample text.
</p>

css

p {
   font: bold 20px sans-serif;
   text-align: center;
}
.p1 { 
   text-decoration: overline red; 
}
.p2 {
   text-decoration: wavy underline dodgerblue; 
}
.p3 {
   text-decoration: overline underline dashed limegreen; 
}

مشاهده و ویرایش کد در حالت تمام صفحه

پشتیبانی مرورگرها
تمام مرورگرها از این ویژگی در CSS پشتیبانی می کنند.