كيفية تغيير تسطير ارتباط HTML على صفحة ويب

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

كيفية إزالة التسطير من الروابط النصية

بشكل افتراضي ، متصفحات الويب لديها بعض أنماط CSS أنها تنطبق على عناصر HTML محددة. إذا لم تقم باستبدال هذه الإعدادات الافتراضية بأوراق الأنماط الخاصة بموقعك ، فسيتم تطبيق الإعدادات الافتراضية. ل الارتباطات التشعبية، نمط العرض الافتراضي هو أن يكون أي نص مرتبط باللون الأزرق ومسطر. إذا كنت ترغب في ذلك ، يمكنك تغيير مظهر هذه التسطير أو إزالتها بالكامل من صفحة الويب الخاصة بك.

لإزالة التسطير من روابط النص ، يمكنك استخدام زخرفة نص خاصية CSS. إليك CSS الذي تكتبه للقيام بذلك:

a {زخرفة النص: لا شيء ؛ }

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

تنبيه عند إزالة التسطير

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

لا تقم بتسطير غير الروابط

تحذير آخر بشأن الروابط والتسطيرات ، لا تضع خطًا تحت النص الذي ليس رابطًا كطريقة للتأكيد عليه. أصبح الناس يتوقعون أن يكون النص المسطر رابطًا ، لذلك إذا قمت بتسطير المحتوى من أجل إضافته التركيز (بدلاً من جعله غامقًا أو مائلاً) ، فأنت ترسل رسالة خاطئة وسوف تربك الموقع المستخدمين.

كيفية تغيير التسطير إلى نقاط أو شرطات

إذا كنت تريد الاحتفاظ بتسطير الارتباط النصي الخاص بك ، ولكن قم بتغيير نمط هذا التسطير من المظهر الافتراضي ، وهو خط "متصل" ، يمكنك القيام بذلك أيضًا. بدلاً من هذا الخط المتصل ، يمكنك استخدام النقاط لتأكيد الروابط الخاصة بك. للقيام بذلك ، ستظل تقوم بإزالة التسطير ، لكنك ستستبدلها بخاصية نمط الحد السفلي:

a {زخرفة النص: لا شيء ؛ الحد السفلي: 1 بكسل منقط ؛ }

نظرًا لأنك قمت بإزالة التسطير القياسي ، فإن النقطة المنقطة هي الوحيدة التي تظهر.

يمكنك فعل الشيء نفسه للحصول على شرطات. ما عليك سوى تغيير نمط الحد السفلي إلى متقطع:

a {زخرفة النص: لا شيء ؛ الحد السفلي: 1 بكسل متقطع ؛ }

كيفية تغيير لون التسطير

هناك طريقة أخرى للفت الانتباه إلى الروابط الخاصة بك وهي تغيير لون التسطير. فقط تأكد من أن اللون يناسبك نظام الألوان.

a {زخرفة النص: لا شيء ؛ الحد السفلي: 1 بكسل أحمر خالص ؛ }

تسطير مزدوج

الحيلة لاستخدام تسطير مزدوج هي أنه يجب عليك تغيير عرض الحد. إذا قمت بإنشاء حد بعرض 1 بكسل ، فسوف ينتهي بك الأمر بتسطير مزدوج يبدو كتسطير واحد.

a {زخرفة النص: لا شيء ؛ الحد السفلي: 3 بكسل مزدوج ؛ }

يمكنك أيضًا استخدام التسطير الحالي لعمل تسطير مزدوج مع ميزات أخرى ، مثل أحد الخطوط المنقطة:

a {border-bottom: 1px double؛ }

لا تنسى الولايات الارتباط

يمكنك إضافة نمط الحد السفلي إلى الروابط الخاصة بك في حالات مختلفة مثل: hover أو: active أو: زيارة. يمكن أن يخلق هذا تجربة نمط "تمرير" لطيفة للزوار عند استخدام فئة "التمرير" الزائفة. لإظهار التسطير المنقط الثاني عند التمرير فوق الارتباط:

a {زخرفة النص: لا شيء ؛ }
أ: تحوم {border-bottom: 1px dotted؛ }