cssblog.ir logo
P

text-decoration

حذف خط حاشیه زیر لینک ها

مشخصه text-decoration می‌تواند بر رو، زیر یا بالای عناصر خط کشیده و همچنین خط زیرین پیشفرض لینک‌ها را حذف کند

خط کشیدن در زیر لینک‌ها در دنیای وب امری متداول است و به شکلی استاندارد درآمده است که در زیر لینک هایی که در یک مطلب وجود دارند، خط کشیده شده باشد؛ با استفاده مشخصه text-decorationمی‌توان از این قبیل کارها را انجام داد و در زیر، بالا و روی متن ها خط کشید.

مثال: با دادن مقدار underlineبه این مشخصه در زیر متن عنصر خط کشیده می شود:

 در مثال فوق با اینکه از تگ pاستفاده شده است می‌توانیم با مشخصه text-decorationزیر متن آن خط بکشیم.

لیست مقادیر

none

هیچ خطی رسم نمی‌شود و اگر هم از قبل deocration خاصی موجود است، نادیده گرفته می شود.

underline

یک خط ۱ پیکسلی در زیر متن کشیده می شود

line-through

خط ۱ پیکسلی روی متن (در ارتفاع میانه) کشیده می‌شود.

overline

خط ۱ پیکسلی در بالای متن (بالای حروف) کشیده می‌شود

inherit

decoration از والد خود به ارث برده می شود.

مقدار blink هم در اسناد W3C ذکر شده است که در حال حاضر یک مقدار منسوخ شده می باشد. این مقدار باعث می‌شد تا متن دائما حالتی مانند «چشمک زن» داشته باشد.

دمو مقدارهای مختلف این مشخصه:

تعیین چند decoration بصورت همزمان

این امکان وجود دارد که مقادیر decoration را بصورت لیستی که با فاصله (space) جدا شده اند برای این مشخصه وارد کنیم تا بطور همزمان چند مقدار را استفاده کنیم.

مثال: در این مثال پاراگراف  دارای ۲ نوع decoration می‌باشد. یکیoverline و دیگری line-throughمی‌باشد

 

استفاده بصورت shorthand

این امکان وجود دارد که از این مشخصه بصورت ترکیب کننده مشخصه های text-decoration-styleو text-decoration-line و text-decoration-colorاستفاده شود.

برای مثال:

p {
    text-decoration-line: underline;
    text-decoration-style: wavy;
    text-decoration-color: black;

    /* shorthand way */
    text-decoration: underline wavy black;
}

حالت shorthand مشخص می کند مشخصه text-decorationاز زیر مشخصه‌های text-decoration-colorو text-decoration-styleتشکیل شده است و ناگفته نماند که در حال حاضر مرورگرها از این حالت بخوبی پشتیبانی نمی‌کنند و تنها مرورگر فایرفاکس است که آن را کامل و بدون prefix پشتیبانی می کند.

دیدگاه کاربران

تاکنون <% totalComments %> دیدگاه برای این مطلب ثبت شده است.

تاکنون دیدگاهی ثبت نشده است. شما می توانید اولین شخصی باشید که دیدگاه خود را ارسال می کند

<% errorMessage %>

<% comment.name %>

avatar
<% comment.comment_replies.length %> پاسخ برای این دیدگاه ثبت شده است

<% reply.name %>

avatar

ارسال دیدگاه جدید

برای ارسال دیدگاه یا پرسش جدید از طریق فرم زیر اقدام کنید.

ارائه پاسخ به دیدگاه

شما در حال پاسخ دادن به دیدگاه «<% replyComment.name %>» هستید. انصراف از پاسخ

  • <% s %>
  • <% e %>

نکاتی درباره دیدگاه ها

  1. برای حذف کپچا (عبارت امنیتی) وارد اکانت خود شوید
  2. شما می توانید از markdown داخل کامنت خود استفاده کنید (اطلاعات بیشتر)
  3. دیدگاه ها قبل از نمایش نیازمند تائید می باشند