دکوراسیون متن در CSS

به معرفی ویژگی دکوراسیون متن در CSS می پردازیم.

استفاده از ویژگی دکوراسیون متن در CSS

خاصیت تزئین متن CSS خطوط تزئینی بصری را برای متن مشخص می کند:

h1 {
    text-decoration: underline overline dotted red;
}

h2 {
    text-decoration: underline overline wavy blue;
}

این ویژگی در واقع خلاصه ای برای چهار زیر خاصیت است:

• متن-دکوراسیون-رنگ
• متن-دکوراسیون-خط
• متن-سبک-دکوراسیون
• متن-دکوراسیون-ضخامت

همانند سایر مختصر ها ، شما باید بدون نام بردن از زیرشاخص ها مقادیر را لیست کنید:

دکوراسیون متن: ضخامت سبک خط رنگ ؛

برای کار کردن مختصر نیازی به تعریف تمام مقادیر نیست – حتی با یک مقدار کار می کند:

h1 {
    text-decoration: overline;
}

h2 {
    text-decoration: line-through;
}

h3 {
    text-decoration: underline;
}

h4 {
    text-decoration: underline overline;
}

در بخش های بعدی ، هر زیر مالکیت را به صورت جداگانه توضیح خواهیم داد.

اصلاح خط تزئین متن CSS

با استفاده از ویژگی CSS text-decoration-line به شما امکان می دهد نوع دکوراسیون متن را از چه خطی استفاده کند:

p {
    text-decoration-line: overline;  
}  
p.lines-everywhere {
    text-decoration-line: overline underline line-through;
}

بررسی این ویژگی ساده است:

text-decoration-line: مقدار؛

همچنین ممکن است مقادیر مختلف ممکن را در یک عبارت ترکیب کنید.

Description	Value
مقدار پیش فرض هیچ خط تزئین متن نمایش داده نمی شود	none
متن زیر خط دار CSS را ایجاد می کند	underline
متن CSS را به صورت خط خطی ایجاد می کند	overline
باعث می شود CSS در متن خط بکشد	line-through
یک مقدار منسوخ شده باعث می شود متن در CSS چشمک بزند	blink

رنگ آمیزی خط دکوراسیون

CSS-text-decoration-colour به شما امکان می دهد رنگ را برای زیر خطوط CSS ، overlines و خطوط CSS تنظیم کنید:

p {
    text-decoration: overline;
    text-decoration-color: green;
}

بررسی این ویژگی تقریباً همان مواردی است که در بالا بحث شد:

text-decoration-color: رنگ؛

می توانید رنگ را با استفاده از نام ، مقدار RGB ، RGBA ، HEX ، HSL یا HSLA تعریف کنید.

نکته: برای بدست آوردن مقدار تناسب دقیق رنگ لازم ، از انتخابگر رنگ Pickeristic استفاده کنید.

طراحی دکوراسیون متن CSS

سبک دکوراسیون متن CSS به شما امکان می دهد نحوه نمایش خط دکوراسیون متن را تعریف کنید:

a {
    text-decoration: overline; 
    text-decoration-style: dashed; 
}

نحو این ویژگی به شرح زیر است:

text-decoration-style: value؛

تمام مقادیر موجود در جدول زیر ذکر شده است.

Description	Value
مقدار پیش فرض به صورت یک خط مستقیم نمایش می دهد	solid
یک خط دو نشان دهید	double
یک خط نقطه ای نمایش دهید	dotted
یک خط منقطع نشان دهید	dashed
یک خط موج دار نمایش دهید	wavy

تعریف ضخامت خط

آخرین زیرمجموعه تزئین متن CSS متن – دکوراسیون – ضخامت نام دارد. عرض خط دکوراسیون را تنظیم می کند:

متن-دکوراسیون-ضخامت: مقدار؛

می توانید ضخامت را در واحد طول یا کلمات کلیدی تعریف کنید:

• auto مقدار پیش فرض است که باعث می شود مرورگر ضخامت خط را انتخاب کند
• از-فونت ضخامت را با توجه به اندازه قلم انتخاب می کند

توجه: ضخامت متن-دکوراسیون CSS یک ویژگی آزمایشی است ، بنابراین از پشتیبانی کمتر مرورگر آگاه باشید.

پشتیبانی از مرورگر

این تگ در مرورگرهای IE ، safari ، firefox، cherom، opera وEdge پشتیبانی می شود.

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