تزئینات متن (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; }هشدار: حذف زیرخط لینک ها می تواند قابلیت تشخیص لینک را کاهش دهد. بنابراین در کنار حذف زیرخط، از رنگ و کنتراست مناسب استفاده کنید.
برای ادامه مباحث تایپوگرافی، صفحه چینش متن را مرور کنید و سپس به مبحث تبدیل متن در رنگ متن نیز نگاهی بیندازید.