logo

كيفية تسطير النص في CSS؟

خاصية زخرفة النصوص CSS :-

يمكن استخدام التسطير لتسليط الضوء على النص المهم. يعد عنصر U وخاصية زخرفة النص في CSS من أكثر التقنيات استخدامًا لتسطير النص على صفحات الويب.

كلاهما سهل الاستخدام، لكن عنصر U يقدم قيمة دلالية للمعنى. يمكن عرض أخرى عند الطلب، مما يجعل من السهل تغيير حالة التسطير ببساطة عن طريق إضافة فئات CSS إلى النص.

ما إذا كانت التسطير مفيدة للتعبير عن المعنى أو إمكانية الوصول أم لا هي مسألة نقاش. تعتبر التسطير طريقة طبيعية لتقديم قيمة أكبر لتجربة المستخدم عندما لا يكون اللون وحده كافيًا للتعبير عن المعنى.

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

الخط الزائد هو عكس التسطير. تتم إضافة سطر إلى أعلى النص.

قد نستخدم جميع قيم التسطير والتسطير لنفس تعريف الفئة. تتحكم خاصية زخرفة النص في كيفية عرض النص بعدة طرق. عند ضبط زخرفة النص على التسطير، يتم وضع خط تحت النص الموجود داخل المكون.

تعد خصائص CSS الخاصة بزخرفة النص رائعة بالنسبة للنص، ولكن يمكن أن تكون مقيدة من حيث التصميم ولا تنطبق على أنواع المحتوى غير النصي. يمكن أيضًا إنشاء التسطير باستخدام سمات حدود CSS.

خوارزمية ص

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

تستخدم خاصية زخرفة النص التسطير، أو التسطير، أو السطر، أو مجموعة من الخطوط لتمييز النص المحدد.

تم وضع خط تحت المحتوى باستخدام خاصية text-decoration-line. تعد الخطوط العلوية والتسطير والخط هي الخيارات الثلاثة لهذه السمة. في CSS، يتم استخدام السمة المسطرة لتمييز النص. يتم رسم التسطير أسفل النص المضمن بهذه القيمة.

عبر عناصر النص المتفرعة، يتم رسم زخارف النص. وهذا يعني أنه عندما يحدد عنصر زخرفة النص، لا يمكن إزالة الزخرفة بواسطة عنصر فرعي.

المودم مقابل جهاز التوجيه

لا يوجد أي خط مرسوم، ويتم حذف أي زخارف موجودة.

تسطير: يتم رسم خط بحجم 1 بكسل عبر الخط الأساسي للنص.

عبر الخط: عند النقطة 'الوسطى' للنص، قم بإدراج خط بحجم 1 بكسل عبره.

خط علوي: يضيف خطًا بحجم 1 بكسل أعلى النقطة 'العلوية' للنص مباشرةً عبر النص.

يرث: يرث زخرفة الوالدين.

يتم تحديد زخرفة النص من خلال خاصية زخرفة النص وهي خاصية مختصرة لـ:

  • سطر زخرفة النص (مطلوب)
  • لون زخرفة النص
  • نمط زخرفة النص
  • سمك زخرفة النص

تسطير، تسطير، تسطير-تسطير، سطر من خلال يأتي تحت خط زخرفة النص.

كل الحروف الكبيرة تتفوق على الأوامر

صلب، منقط، متقطع، متموج، مزدوج يأتي ضمن نمط زخرفة النص.

يأتي اللون بالقيمة العشرية أو القيمة السداسية العشرية أو الوراثة ضمن لون زخرفة النص.

تعد الخاصية border-bottom بديلاً لزخرفة النص. يمكننا أيضًا استخدام border-bottom لتوفير الحشو.

بناء الجملة: -

 text-decoration: text-decoration-line | text-decoration-color | text-decoration-style | text-decoration-thickness 

دعونا الآن نبحث عن مثال ونفهم استخدام خاصية زخرفة النص.

زخرفة النص: تسطير فوق السطر

مثال: -

 h1 { text-decoration: underline overline dotted purple; } h3 { text-decoration: underline wavy cyan 10px;} <h2>This is an example of text decoration property color using underline overline. </h2> <h3>This is an example of text decoration property color using line-through. </h3> 

انتاج:

كيفية تسطير النص في CSS؟