تعیین فرم های خاص برای نمایش متن، با مشخصه text-decoration ، در CSS
حتما فرم های مختلف نمایش متن ، مثل زیرخط دار بودن ، خط خورده بودن (خط بر روی متن) و ... را دیده اید . با استفاده از مشخصه text-decoration در CSS ، می توانیم تعیین کنیم که متن مورد نظرمان به صورت کدامیک از این فرم های خاص نمایش داده شود . علاوه بر این ، با استفاده از مشخصه text-decoration ، می توانیم تعیین کنیم که متن به صورت عادی نمایش داده شود ، زیرا ممکن است که متن توسط یک تگ HTML به صورت یکی از این فرم های خاص درآمده باشد و ما اکنون قصد داشته باشیم که نمایش آن را به صورت عادی دربیاوریم .
برای مشخصه text-decoration ، می توانیم هر یک از حالت های underline (یک خط زیر متن) ، line-through (یک خط روی متن) ، overline (یک خط بالای متن) و blink (متن به صورت چشمک زن) را انتخاب کنیم . به مثال زیر توجه کنید :
ابتدا هر یک از 4 پاراگراف را با یک id مشخص کرده ایم و سپس درون تگ style ، تعیین کرده ایم که مشخصه text-decoration برای هر یک از این پاراگراف ها به چه صورت باشد .
نتیجه :
همان طور که مشاهده کردید در مثال بالا ، با مشخصه text-decoration ، فرم های خاص را برای نمایش متن ها تعیین کردیم . اما اکنون می خواهیم مثالی بزنیم که در آن ، یک متن دارای یک فرم خاص است ولی ما قصد داریم که فرم خاص آن را با استفاده از مشخصه text-decoration برداریم تا متن به صورت عادی نمایش داده شود . به مثال زیر توجه کنید :
ابتدا یک لینک را به صورت عادی و با استفاده از تگ a می سازیم :
نتیجه :
همان طور که مشاهده می کنید ، در زیر متن مربط به لینک ، یک خط نمایش داده شده است که در نتیجه استفاده از تگ a می باشد . اکنون قصد داریم که با استفاده از مشخصه text-decoration در CSS ، این خط را برداریم تا متن مربوط به لینک به صورت معمولی نمایش داده شود . کدهای زیر را می نویسیم :
درون تگ style ، تعیین کرده ایم که برای تمامی تگ های a که در کد HTML به کار رفته است ، متن به صورت عادی (بدون هیچگونه فرم خاص) نمایش داده شود . برای این منظور ، مشخصه text-decoration را برابر none انتخاب کرده ایم .
نتیجه :
مشاهده می کنید که دیگر در زیر متن مربوط به لینک ، هیچ خطی نمایش داده نشده است .
