جلسه ی پنجاه و یکم: خصوصیت Text-decoration در CSS

خصوصیت Text-decoration در CSS

در جلسات پیش با خصوصیت Text-align آشنا شده ایم (برای مشاهده ی آموزش Text-align در CSS کلیک کنید). در این جلسه می خواهیم به آموزش خصوصیت خصوصیت Text-decoration در CSS بپردازیم. (برای دیدن آموزش CSS به زبان ساده کلیک کنید)

خصوصیت Text-decoration در CSS چیست؟

برای اینکه یک متن را مهم نشان دهیم می توانیم از تگ Strong برای برجسته نمودن آن استفاده کنیم. در مواقعی ممکن است با خط کشیدن به زیر عنصر آن را مهم جلوه دهیم. از خصوصیت Text-decoration در CSS می توان برای ایجاد خط در زیر، بالا و یا روی جسم استفاده کرد.

البته باید بگوییم که در جلسات گذشته تگ های عبارتی و کار برد آن ها را معرفی کرده ایم. در صورتی که بخواهیم بر روی یک عنصر خط بکشیم می توانیم از آن ها نیز استفاده کنیم. (برای مشاهده ی آموزش تگ های عبارتی کلیک کنید)

حالات خصوصیت Text-decoration در CSS

عموما در خصوصیت Text-decoration سه حالت وجود دارد که از آن ها استفاده ی مفید می شود. این حالات عبارتند از:

  • overline
  • Line-through
  • underline

حالت overline

زمانی که از این حالت استفاده می کنیم بر بالای تمامی محتویات ما یک خط کشیده می شود.

حالت line-through

زمانی که از این حالت استفاده می کنیم برروی تمامی محتویات ما یک خط کشیده می شود.

حالت underline

زمانی که از این حالت استفاده می کنیم بر زیر تمامی محتویات ما یک خط کشیده می شود.

حال که با این خصوصیت آشنا شده اید بازم است که با یک مثال با این موضوع بیشتر آشنا شوید. به نمونه کد زیر توجه کنید:

کد HTML:

<p class="a">
  یک خط بالای محتویات ما قرار دارد.
</p>
<p class="b">
  یک خط بر روی محتویات ما قرار دارد.
</p>
<p  class="c">
  یک خط زیر محتویات ما قرار دارد.
</p>

کد CSS:

p {
font-size: 20px;
}
p:hover {
font-size: 20.5px;
transition: .5s;
}
.a:hover {
text-decoration: overline;
text-decoration-color: red;
}
.b:hover {
text-decoration: line-through;
text-decoration-color: red
}
.c:hover {
text-decoration: underline;
text-decoration-color: red;
}

خروجی کد بالا:

خصوصیت Text-decoration در CSS

کاربرد خصوصیت Text-decoration در CSS

شاید شما بخواهید از یک لینک استفاده کنید. اگر دقت داشته باشید زمانی که اشاره گر ما بر روی یک عنصر لینک دار قرار گرفته باشد یک خط بر زیر آن قرار دارد. اگر ما بخواهیم این خط را پاک کنیم باید از حالت none در خصوصیت Text-decoration استفاده کنیم.

به گونه ای باید بگوییم که این حالت مهمترین حالت این عنصر بوده و بیشترین کاربرد را دارد.

نکته: این خصوصیت در تمامی مرورگر ها پشتیبانی می شود.

خلاصه ی مطلب

  1. به وسیله ی Text-decoration می توان برای ایجاد خط در زیر، بالا و یا روی جسم استفاده کرد.
  2. زمانی که از حالت overline استفاده می کنیم بر بالای تمامی محتویات ما یک خط کشیده می شود.
  3. زمانی که از حالت Line-through استفاده می کنیم برروی تمامی محتویات ما یک خط کشیده می شود.
  4. زمانی که از حالت underline استفاده می کنیم بر زیر تمامی محتویات ما یک خط کشیده می شود.
ابوالفضل کلهری

فعال در زمینه های ui و ux و طراحی وب سایت مسلط به زبان های نشانه گذاری HTML و CSS و همچنین در زمینه ی آموزش زبان های HTML و CSS نیز فعالیت دارم . امیدوارم با آموزش هایی که در این سایت قرار می دهم موجب پیشرفت شما عزیزان باشم.

دیدگاه ها
  • قبل از ارسال دیدگاه خود قوانین بخش دیدگاه ها را مطالعه کنید. ارسال دیدگاه به معنی پذیرش این قوانین است. قوانین بخش دیدگاه ها

    محبوب ترین برنامه های این ماه

    برترین مقالات این ماه

    متاسفم مطلبی برای نمایش وجود ندارد