خطوات لإزالة تسطير من الارتباطات النصية والمشكلات لتكون على دراية
بشكل افتراضي ، يتم نص محتوى النص المرتبط بـ HTML باستخدام عنصر أو "الارتساء" مع تسطير. في كثير من الأحيان ، يختار مصممو الويب إزالة هذا النمط الافتراضي عن طريق إزالة التسطير.
كثير من المصممين لا يهتمون بمظهر النص الذي تحته خط ، خاصة في الكتل الكثيفة من المحتوى مع الكثير من الروابط. كل تلك الكلمات التي تحتها خط يمكن أن تقطع تدفق قراءة الوثيقة. لقد جادل الكثيرون بأن تلك التسطيرات تجعل من الصعب بالفعل تمييز الكلمات وقراءتها بسرعة بسبب الطريقة التي يغير بها التسميات أشكال الحروف الطبيعية.
هناك فوائد مشروعة للحفاظ على هذه التسطير على الروابط النصية ، ولكن. على سبيل المثال ، عندما تقوم بالتصفح عبر مجموعات كبيرة من النص ، فإن الروابط المسطرة إلى جانب تباين الألوان المناسب تجعل من السهل على القراء مسح صفحة ما فورًا ورؤية مكان الروابط. إذا نظرت إلى مقالات تصميم الويب هنا على About.com ، بالإضافة إلى مقالات أخرى على الموقع ، فستشاهد هذا التصميم للروابط التي تحتها خط في المكان.
إذا قررت إزالة الروابط من النص (وهي عملية بسيطة سنتناولها قريبًا) ، فتأكد من العثور على طرق لتمييز هذا النص لتمييز ما هو رابط من النص العادي. ويتم ذلك غالبًا باستخدام تباين الألوان المذكور ، ولكن اللون وحده يمكن أن يمثل مشكلة للزائرين الذين يعانون من إعاقات بصرية مثل عمى الألوان. اعتمادًا على شكل معين من عمى الألوان ، قد يتم فقدان التباين تمامًا عليهم ، مما يمنعهم من رؤية الفرق بين النص المرتبط وغير المرتبط. هذا هو السبب في أن النص المسطر لا يزال يعتبر أفضل طريقة لعرض الروابط.
إذن كيف يمكنك إيقاف خط التسطير إذا كنت لا تزال ترغب في القيام بذلك؟ نظرًا لأن هذه خاصية مرئية نشعر بالقلق بشأنها ، سننتقل إلى جزء موقعنا الذي يتعامل مع جميع الأشياء المرئية - CSS.
استخدام أوراق الأنماط المتتالية لإيقاف تشغيل التسطير على الارتباطات
في معظم الحالات ، لا ترغب في إيقاف تشغيل تسطير على رابط نصي واحد فقط. بدلاً من ذلك ، يتطلب أسلوب التصميم الخاص بك على الأرجح إزالة التسطير من كافة الارتباطات. يمكنك القيام بذلك عن طريق إضافة أنماط إلى ورقة الأنماط الخارجية.
{زخرفة النص: لا شيء؛ }هذا هو! سيؤدي هذا السطر البسيط من CSS إلى إيقاف تشغيل التسطير (الذي يستخدم بالفعل خاصية CSS لـ "text-decoration") على كافة الارتباطات.
يمكنك أيضا الحصول على مزيد من التفاصيل مع هذا النمط. على سبيل المثال ، إذا أردت فقط إيقاف التسطير أو الروابط الموجودة داخل عنصر "nav" ، فيمكنك كتابة:
nav a {text-decoration: none؛ }الآن ، ستحصل على روابط النص على الصفحة التسطير الافتراضي ، ولكن تلك الموجودة في الملاحة سيتم إزالته.
شيء واحد العديد من مصممي الويب تختار القيام به هو إعادة تشغيل الرابط "على" عندما يمر شخص ما فوق النص. سيتم ذلك باستخدام: فئة افتراضية CSS لـ hver ، كما يلي:
{زخرفة النص: لا شيء؛ } a: hover {text-decoration: underline؛ }باستخدام Inline CSS
كبديل لإجراء تغييرات على ورقة أنماط خارجية ، يمكنك أيضًا إضافة الأنماط مباشرةً إلى العنصر نفسه بتنسيق HTML ، كما يلي:
لا يحتوي هذا الرابط على تسطيرتكمن المشكلة في هذه الطريقة في أنها تضع معلومات النمط داخل بنية HTML الخاصة بك ، وهي ليست من أفضل الممارسات. يجب الاحتفاظ بنمط (CSS) وبنية (HTML) منفصلة.
إذا كنت ترغب في إزالة التسطير النصي لجميع المواقع ، فإن إضافة معلومات النمط هذه إلى كل رابط على أساس فردي يعني وجود قدر كبير من العلامات الإضافية التي تتم إضافتها إلى شفرة موقعك. يمكن أن يؤدي سخون الصفحة إلى إبطاء وقت تحميل الموقع وجعل إدارة الصفحة بشكل عام أكثر صعوبة. لهذه الأسباب ، يفضل أن تتحول دائمًا إلى ورقة أنماط خارجية لجميع احتياجات تصميم الصفحة.
في الختام
وبقدر سهولة إزالة التسطير من الروابط النصية لصفحة الويب ، يجب أن تضع في اعتبارك العواقب المترتبة على ذلك. في حين أنه قد يقوم بالفعل بتنظيف مظهر صفحة ما ، إلا أنه قد يفعل ذلك على حساب قابلية الاستخدام بشكل عام. ضع هذا في الاعتبار في المرة القادمة التي تفكر فيها في تغيير خصائص "زخرفة النص" الخاصة بالصفحة.
المقالة الأصلية لجنيفر كرينين. تم التعديل في 9/19/16 بواسطة جيريمي جيرار