كيفية ضبط نمط زخرفة النص في Tailwind CSS

Kyfyt Dbt Nmt Zkhrft Alns Fy Tailwind Css



غالبًا ما تتطلب مواقع الويب الجذابة للمستخدم إلحاق منهجيات تصميم متعددة من وقت لآخر. في مثل هذه الحالات، يمكن تنفيذ تصميم زخرفة النص بطرق متعددة بناءً على قيم مختلفة وفقًا للمتطلبات لجعل الموقع مميزًا.

ستغطي هذه المدونة مجالات المحتوى التالية:







كيفية تعيين نمط زخرفة النص في Tailwind CSS؟

يمكن ضبط نمط النص وتزيينه بمساعدة ' نمط زخرفة النص خاصية مخصصة بقيم تصميم مختلفة.



خصائص نمط زخرفة النص



فصل ملكيات
زخرفة صلبة نمط زخرفة النص: صلب؛
زخرفة مزدوجة نمط زخرفة النص: مزدوج؛
الديكور متموج نمط زخرفة النص: متموج؛
متقطع الديكور نمط زخرفة النص: متقطع؛
الديكور منقط نمط زخرفة النص: منقط؛


مثال: ضبط نمط زخرفة النص في Tailwind CSS





يستخدم هذا المثال '' التي تمت مناقشتها أعلاه نمط زخرفة النص 'خاصية تحتوي على جميع القيم لتصميم نص الفقرة:

نوع الوثيقة أتش تي أم أل >
< لغة البرمجة >
< رأس >
< ميتا مجموعة محارف = 'utf-8' >
< ميتا اسم = 'إطار العرض' محتوى = 'العرض=عرض الجهاز، المقياس الأولي=1' >
< النصي src = 'https://cdn.tailwindcss.com' >< النصي >
رأس >
< جسم >
< شعبة >
< ص فصل = 'تسطير الزخرفة الصلبة ...' > هذا هو موقع Linuxhint ص >
< ص فصل = 'تسطير الزخرفة المزدوجة ...' > هذا هو موقع Linuxhint ص >
< ص فصل = 'تسطير زخرفة متموجة ...' > هذا هو موقع Linuxhint ص >
< ص فصل = 'تسطير زخرفة متقطعة ...' > هذا هو موقع Linuxhint ص >
< ص فصل = 'تسطير الزخرفة المنقطة ...' > هذا هو موقع Linuxhint ص >
شعبة >
جسم >
لغة البرمجة >


بناءً على هذا الكود، قم بتطبيق الخطوات التالية:



    • تضمين المعطى ' CDN 'المسار داخل' <الرأس> علامة ' لتطبيق وظائف Tailwind.
    • الآن، قم بإنشاء أربع فقرات باستخدام ' <ص> 'العلامة التي تحتوي على' زخرفة النص 'الخاصية المخصصة بقيمة مختلفة في كل حالة، كما تمت مناقشته.
    • يؤدي هذا إلى تسطير النص بخطوط صلبة ومزدوجة ومموجة ومتقطعة ومنقطة.

انتاج |


ومن هذه النتيجة يتم التأكد من أن النص قد تم تزيينه وفقاً لذلك.

خاتمة

يمكن ضبط نمط النص وتزيينه بمساعدة ' نمط زخرفة النص خاصية مخصصة بقيم تصميم مختلفة. تتضمن هذه القيم الصلبة والمزدوجة والمموجة والمتقطعة والمنقط. كانت هذه المدونة تدور حول تحديد نمط زخرفة النص باستخدام Tailwind CSS.