CSS تزیین متن (Text Decoration)
در این بخش با ویژگی‌های زیر آشنا خواهید شد:
text-decoration-linetext-decoration-colortext-decoration-styletext-decoration-thicknesstext-decoration(ویژگی کوتاه‌نویسی)
افزودن خط تزیینی به متن
ویژگی text-decoration-line برای افزودن خطوط تزیینی به متن استفاده می‌شود. شما می‌توانید چندین مقدار را با هم ترکیب کنید، مانند overline و underline، تا خطوط هم بالای متن و هم زیر آن نمایش داده شوند.
مثال
h1 {
text-decoration-line: overline;
}
h2 {
text-decoration-line: line-through;
}
h3 {
text-decoration-line: underline;
}
p {
text-decoration-line: overline underline;
}نکته: پیشنهاد نمی‌شود که برای متنی که لینک نیست از 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 برای تعیین استایل خط تزیینی استفاده می‌شود.
مثال
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 برای تعیین ضخامت خط تزیینی استفاده می‌شود.
مثال
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;
}ویژگی کوتاه‌نویسی (Shorthand)
ویژگی text-decoration یک ویژگی کوتاه‌نویسی برای موارد زیر است:
text-decoration-line(اجباری)text-decoration-color(اختیاری)text-decoration-style(اختیاری)text-decoration-thickness(اختیاری)
مثال
h1 {
text-decoration: underline;
}
h2 {
text-decoration: underline red;
}
h3 {
text-decoration: underline red double;
}
p {
text-decoration: underline red double 5px;
}یک نکته کوچک
در HTML، همه لینک‌ها به طور پیش‌فرض زیرخط دارند. گاهی می‌بینید که لینک‌ها بدون زیرخط هستند. برای حذف این زیرخط از text-decoration: none; استفاده می‌شود، مانند مثال زیر:
مثال
a {
text-decoration: none;
}
برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید. صفحه ورود و ثبت نام