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

إزالة الارتباط Underlines أو Create Dashed Dotted أو Double Underlined Links

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

إزالة التسطير على روابط النص

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

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

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

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

تنبيه حول إزالة التسطير

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

لا تسطط غير الارتباطات

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

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

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

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

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

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

{زخرفة النص: لا شيء؛ border-bottom: 1px dashed؛ }

تغيير لون التسطير

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

{زخرفة النص: لا شيء؛ border-bottom: 1px solid red؛ }

تسطير مزدوج

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

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

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

{border-bottom: 1px double؛ }

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

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

{زخرفة النص: لا شيء؛ } a: hover {border-bottom: 1px dotted؛ }

المقالة الأصلية لجنيفر كرينين. حرره جيريمي جيرار