تزئینات متن (Text Decoration) در CSS

در این راهنما، ویژگی «تزئینات متن (Text Decoration)» را مرور می کنیم. این ویژگی کوتاه نویسیِ text-decoration برای کنترل خط های تزئینی است و روی اجزای text-decoration-line، text-decoration-color، text-decoration-style و text-decoration-thickness اثر می گذارد. برای مرجع سریع، راهنمای تزئینات متن را ببینید.

افزودن خط تزئینی به متن

با text-decoration-line نوع خط تزئینی را تعیین می کنیم: none، underline، overline و line-through. همچنین می توان مقادیر را ترکیب کرد.

h1 { text-decoration-line: overline; } h2 { text-decoration-line: line-through; } h3 { text-decoration-line: underline; } p { text-decoration-line: overline underline; }

نکته: زیرخط برای متن های غیرلینک معمولاً توصیه نمی شود؛ زیرا خواننده را گیج می کند.

رنگ خط تزئینی

با text-decoration-color رنگ خط را تعیین کنید.

h1 { text-decoration-line: overline; text-decoration-color: red; } h2 { text-decoration-line: line-through; text-decoration-color: blue; } h3 { text-decoration-line: underline; text-decoration-color: green; } p { text-decoration-line: overline underline; text-decoration-color: purple; }

سبک خط تزئینی

با text-decoration-style سبک خط را مشخص کنید: solid، double، dotted، dashed و wavy.

h1 { text-decoration-line: underline; text-decoration-style: solid; } h2 { text-decoration-line: underline; text-decoration-style: double; } h3 { text-decoration-line: underline; text-decoration-style: dotted; } p.ex1 { text-decoration-line: underline; text-decoration-style: dashed; } p.ex2 { text-decoration-line: underline; text-decoration-style: wavy; } p.ex3 { text-decoration-line: underline; text-decoration-color: red; text-decoration-style: wavy; }

ضخامت خط تزئینی

با text-decoration-thickness ضخامت خط را کنترل کنید؛ می تواند auto، طول ثابت یا درصد باشد.

h1 { text-decoration-line: underline; text-decoration-thickness: auto; } h2 { text-decoration-line: underline; text-decoration-thickness: 5px; } h3 { text-decoration-line: underline; text-decoration-thickness: 25%; } p { text-decoration-line: underline; text-decoration-color: red; text-decoration-style: double; text-decoration-thickness: 5px; }

کوتاه نویسی text-decoration

ویژگی text-decoration کوتاه نویسیِ خط، رنگ، سبک و ضخامت است. ترتیب مقادیر آزاد است؛ اما وجود مقدار text-decoration-line ضروری است.

h1 { text-decoration: underline; } h2 { text-decoration: underline red; } h3 { text-decoration: underline red double; } p { text-decoration: underline red double 5px; }

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

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

a { text-decoration: none; }

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

برای ادامه مباحث تایپوگرافی، صفحه چینش متن را مرور کنید و سپس به مبحث تبدیل متن در رنگ متن نیز نگاهی بیندازید.