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

click fraud protection

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

أسباب وضد التسطير

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

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

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

instagram viewer

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

استخدم أوراق الأنماط المتتالية لإيقاف تشغيل التسطير على الروابط

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

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

هذا هو! هذا السطر البسيط من CSS سيؤدي إلى إيقاف التسطير (الذي يستخدم بالفعل خاصية CSS لـ "زخرفة النص") في جميع الروابط.

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

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

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

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

أ {
زخرفة النص: لا شيء ؛
}
أ: تحوم {
زخرفة النص: تسطير ؛
}

استخدام Inline CSS

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

تكمن مشكلة هذه الطريقة في أنها تضع معلومات النمط داخل بنية HTML ، وهي ليست أفضل ممارسة. يجب أن يكون النمط (CSS) والهيكل (HTML) منفصلين.

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

في الختام

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

instagram story viewer