امتیاز دهید:

برای آنکه بتوانیم روی بخشی از متن خط بکشیم، خط پیش فرض زیر لینک ها را برداریم و ... می بایست از دستور text-decoration استفاده کنیم. برای روشن شدن این مطلب کدهای اچ تی ام ال (HTML) زیر را وارد ویرایشگر متن می کنیم:

<!DOCTYPE html>
<html>
  
   <head>
       <meta charset="utf-8">
       <title>Netshahr</title>
       <link type="text/css" rel="stylesheet" href="css/main.css">
   </head>
  
   <body>
       <p>این یک پاراگراف است</p>
   </body>
</html>

همانطور که می بینیم پاراگرافی را حاوی عبارت "این یک پاراگراف است" ایجاد کرده ایم. حال برای آنکه زیر این پاراگراف یک خط افقی ایجاد کنیم کدهای سی اس اس (CSS) زیر را وارد فایل مرتبط با کدهای سی اس اس می کنیم:

p{
   text-decoration:underline;
}

همانطور که می بینیم برای p از Propertyیی تحت عنوان text-decoration استفاده کرده و Value مرتبط با آن را underline قرار داده ایم. برای مشخص شدن تاثیر این کد، فایل اچ تی ام ال (HTML) خود را داخل مرورگر اجرا می کنیم:

text-decoration in css

می بینیم که زیر پاراگراف مد نظر خط کشیده شده است. حال برای آنکه بالای این پاراگراف خطی بکشیم، کد فوق را به صورت زیر ویرایش می کنیم:

p{
   text-decoration:overline;
}

مجدد مرورگر را به روز رسانی می کنیم:

2. text-decoration in css

می بینیم که این بار خط بالای پاراگراف مد نظر کشیده شده است.
گاهی اوقات نیاز داریم تا از طریق سی اس اس (CSS) روی متنی خط بکشیم. برای این منظور از کد زیر می توان استفاده کرد:

p{
   text-decoration:line-through;
}

مجدد مرورگر را به روز رسانی می کنیم:

3. text-decoration in css

در واقع زمانی که بخواهیم به کاربر نشان دهیم که مثلاً بخشی از متن نادرست است می توان از این دستور استفاده کرد.
Value دیگری که برای این Property می توان استفاده کرد none است. در واقع از آنجا که به طور پیش فرض زیر لینک های اچ تی ام ال خط کشیده شده است، با استفاده از مقدار none می توان این خط را از بین برد. برای روشن شدن این مطلب، کد اچ تی ام ال فوق را به صورت زیر تغییر می دهیم:

   <body>
       <a href="http://www.google.com/">
           <p>این یک پاراگراف است</p>
       </a>
   </body>

همانطور که می بینیم پاراگراف خود را با استفاده از تگ <a> به یک لینک تبدیل کرده ایم. حال مرورگر خود را به روز رسانی می کنیم:

html links underline

حال برای آنکه خط زیر این لینک را حذف کنیم، می بایست کدهای سی اس اس خود را به صورت زیر باز نویسی کنیم:

a{
   text-decoration:none;
}

همانطور که در کد فوق مشخص است، مقدار text-decoration را به none تغییر داده ایم. علاوه بر این از sSelector یی تحت عنوان a استفاده کرده ایم تا لینک های اچ تی ام ال را هدف قرار دهیم. حال مجدد مرورگر خود را به روز رسانی می کنیم:

removing underline of html links

می بینیم که به همین سادگی توانستیم فرمت پیش فرض لینک های اچ تی ام ال (HTML) را تغییر دهیم. در واقع از این روش می توان نوع فونت، رنگ و بسیاری از دیگر ویژگی های تگ های لینک را تغییر دهیم.


نظرات
نظرات

برای کامنت گذاری، فرم زیر را پر کنید یا ثبت نام کنید ( جهت ورود به سیستم می توانید از استفاده کنید )