تزئین متن (Text Decoration)
اینجا «تزئین متن (Text Decoration)» را یاد می گیریم. تزئین یعنی خط های زیبا دور متن. مثلا زیرخط، روخط، یا خطِ حذف.
معرفی تزئین متن در CSS
ویژگی «text-decoration» میان بُر است. این ویژگی چهار بخش دارد: line ،color ،style ،thickness. هرکدام نقش خط تزئینی را تعیین می کنند.
افزودن خط تزئینی: text-decoration-line
«text-decoration-line» نوع خط را می سازد. مقادیر مهم: underline ،overline ،line-through ،none.
<style>
h1 {
text-decoration-line: overline;
}
h2 {
text-decoration-line: line-through;
}
h3 {
text-decoration-line: underline;
}
p {
text-decoration-line: overline underline;
}
</style>
نکته: زیرخط برای لینک هاست. زیرخط روی متنِ عادی گیج کننده است.
رنگ خط تزئینی: text-decoration-color
«text-decoration-color» رنگ همان خط را تعیین می کند. می توان برای هر عنصر متفاوت گذاشت.
<style>
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;
}
</style>
استایل خط تزئینی: text-decoration-style
«text-decoration-style» شکل خط را می سازد. مقادیر: solid ،double ،dotted ،dashed ،wavy.
<style>
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;
}
</style>
ضخامت خط: text-decoration-thickness
«text-decoration-thickness» ضخامت خط را تعیین می کند. می تواند px ،% یا auto باشد.
<style>
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;
}
</style>
میان بُر کاربردی: text-decoration
«text-decoration» همه را یکجا می نویسد: line اجباری است؛ color ،style ،thickness اختیاری است.
<style>
h1 {
text-decoration: underline;
}
h2 {
text-decoration: underline red;
}
h3 {
text-decoration: underline red double;
}
p {
text-decoration: underline red double 5px;
}
</style>
نکته کوچک برای لینک ها
لینک ها به صورت پیش فرض زیرخط دارند. گاهی می خواهید بردارید.
<style>
a {
text-decoration: none;
}
</style>
هشدار: زیرخطِ لینک را بی دلیل حذف نکن. دسترس پذیری افت می کند.
گام های عملی تزئین متن
- نوع خط را با line مشخص کن.
- رنگ و استایل را اضافه کن.
- اگر لازم شد ضخامت را تنظیم کن.
مطالعه تکمیلی: صفحه تزئین متن، همچنین تراز متن و متن را ببین.
جمع بندی سریع
- text-decoration میان بُرِ چهار ویژگی است.
- line نوع خط را تعیین می کند.
- color و style ظاهر خط را می سازند.
- thickness ضخامت را دقیق می کند.
- زیرخطِ لینک را بی جا حذف نکن.