كيفية تصميم الروابط باستخدام CSS: برنامج تعليمي مفصل للمبتدئين

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

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

معايير الارتباط وتصميم الارتباط الافتراضي

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

 <a href="https://torquemag.io/">TorqueMag</a>

كما ترى تتكون من عدة أجزاء:

• <a> - هذا هو المشغل لإنشاء عنصر ارتباط. لماذا a ؟ لأنه في HTML ، تسمى الروابط أيضًا علامات الارتساء .
• href="" - أي شيء داخل علامات الاقتباس المزدوجة هو المكان الذي يشير إليه هذا الارتباط. إنه العنوان الذي سيهبط عليه الشخص الذي ينقر عليه.
• TorqueMag - هذا هو نص الرابط الذي يظهر على الصفحة ، على سبيل المثال مثل هذا (لا تنقر عليه ، فهذه الروابط لا تقود إلى أي مكان).
• </a> - الأجزاء التي تغلق عنصر الارتباط وتخبر المتصفح أن نص الرابط ينتهي هنا.

حتى الآن ، من السهل جدا.

ما يشبه الارتباط افتراضيًا

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

إذا قمت بالإعلان عن أي رابط قديم في مستند HTML ولم تقدم أي معلومات عن الأنماط ، فسيتخذ النمط الافتراضي:

1. نص الارتباط باللون الأزرق ويتم وضع خط تحته خط الارتباط نفسه.
2. عندما تحوم بالماوس فوقه ، يتغير شكل المؤشر إلى رمز يد صغير.
3. عند النقر فوقه ، يتحول إلى اللون الأحمر لثانية واحدة.
4. بمجرد زيارة الرابط ، سيتغير لونه إلى اللون الأرجواني.
5. عندما تنتقل إلى الرابط عبر مفتاح tabulator على لوحة المفاتيح ، سيكون له مخطط أزرق حوله.

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

التعرف على روابط الولايات

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

• a - هذه هي علامة الارتساء المذكورة أعلاه. يستهدف جميع الروابط في جميع المراحل.
• a:link - للرابط العادي الذي لم تتم زيارته. من الناحية الفنية ، يستهدف :link جميع علامات الارتساء التي لها سمة href . في الواقع ، لم يتم استخدامه كثيرًا. يستخدم الكثير من الأشخاص ببساطة a ، نظرًا لأن علامات الإرساء التي لا تحتوي على سمة href نادرة إلى حد ما ، لذا لا توجد حاجة غالبًا لهذا النوع من التمايز.
• a:visited - يصف ارتباطًا قام المستخدم الحالي بزيارته من قبل ، مما يعني أنه موجود في سجل المتصفح.
• a:hover - تصميم الأهداف الذي يظهر عندما يقوم المستخدم بتمرير مؤشر الماوس الخاص به فوق ارتباط.
• a:active - تصميم مرئي لفترة وجيزة أثناء لحظة النقر على الرابط.
• a:focus - ارتباط يتم التركيز عليه ، على سبيل المثال ، انتقال المستخدم إلى استخدام مفتاح tab. غالبًا ما يتم hover focus معًا.

من المهم ملاحظة أنه عند تغيير النمط لعدة حالات ارتباط في وقت واحد ، يجب عليك القيام بذلك بالترتيب التالي.

1. a
2. a:link
3. a:visited
4. a:focus
5. a:hover
6. a:active

أنماط الروابط تبنى على بعضها البعض وتتدرج لأسفل. لذلك ، فإن الترتيب مهم للتأكد من أنها تعمل على النحو المنشود.

تلبية توقعات المستخدم

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

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

من الناحية العملية ، هذا يعني:

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

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

كيفية تغيير نمط نص الرابط الخاص بك عبر CSS

دعنا نتحدث أولاً عن كيفية تغيير جزء النص من الرابط لأن هذا هو ما يتكون منه.

تعديل لون نص الارتباط

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

يمكنك تغيير لون نص الرابط بعدة طرق مختلفة: الكلمات الملونة وأنظمة تدوين الألوان المختلفة مثل كود HEX ، rgb() / rgba() ، hsl() / hsla() ، إلخ.

 #link-one { color: red; } #link-two { color: #3af278; } #link-three { color: rgb(61, 76, 128); }

إليك ما يبدو أعلاه على الصفحة:

الأكثر شيوعًا ، ستستخدم شيئًا مثل HEX أو rgb() . يعد استخدام أسماء الألوان أمرًا نادرًا للغاية خارج حالات الاختبار البسيطة.

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

ضبط لون الخلفية

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

إليك الترميز للمثال أعلاه:

 #link-one { background-color: #fadbd8; color: red; } #link-two { background-color: #f26c2e; color: #3af278; } #link-three { color: rgb(61, 76, 128); } #link-three:focus { background-color: rgb(61, 76, 128); color: #fff; }

خيارات تنسيق النص الأخرى

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

قد يكون هذا منطقيًا لبعض التصميمات ، ومع ذلك ، فهي طرق أقل شيوعًا لتصميم الروابط عبر CSS.

إليك الترميز لتحقيق التأثيرات أعلاه:

 #link-one { background-color: #fadbd8; color: red; font-family: Arial; } #link-two { color: #3af278; font-weight: 600; text-transform: uppercase; } #link-three { color: rgb(61, 76, 128); } #link-three:focus { font-size: 36px; }

العمل مع التسطير

كما تعلمنا في البداية ، يتم تسطير الروابط افتراضيًا. إذا كنت تريد التخلص من ذلك ، يمكنك استخدام text-decoration: none; (وهو الاستخدام الأكثر شيوعًا لخاصية text-decoration ).

 a { text-decoration: none; }

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

 a { text-decoration: none; } a:hover { text-decoration: underline; }

بالإضافة إلى ذلك ، يمكنك استخدام border: bottom; بدلاً من text-decoration: underline; لإضافة سطر تحت الروابط الخاصة بك. اعتاد الناس على استخدام هذا لأنه يوفر خيارات تصميم أفضل. ومع ذلك ، لدينا هذه الأيام خصائص جديدة لطريقة underline القياسية التي تسمح بمزيد من التخصيصات.

على سبيل المثال ، يتيح لك text-underline-offset التحكم في المسافة بين النص والخط الموجود تحته عند استخدام text-decoration . يسمح لك text-decoration-thickness بتعيين عرض خط مخصص. لذلك ، لم يعد الذهاب إلى الطريق border ضروريًا كما كان من قبل.

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

تغيير نمط المؤشر عند التمرير

كما تحدثنا بالفعل ، عندما تحوم فوق ارتباط ، يتغير مؤشر الماوس من سهم صغير إلى يد صغيرة تشير.

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

 a { cursor: crosshair; } a { cursor: move; } a { cursor: wait; } a { cursor: n-resize; } a { cursor: grab; }

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

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

 a { cursor: pointer; }

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

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

 a { cursor: url(../images/hand.cur),pointer; }

كما ترى ، يمكنك ببساطة استخدام مؤشر مخصص من خلال توفير العنوان لملف صورة.

قم بإجراء التغييرات على: التركيز

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

لماذا تسأل outline وليس border ؟

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

إذن ، ما هي خيارات التصميم الأخرى التي لديك لارتباط مركّز؟

كثير منهم. يأخذ كل شيء من background-color إلى color font-size box-shadow ، سمها ما شئت.

إليك كيفية تحقيق ما سبق:

 #link-one:focus { color: red; } #link-two:focus { box-shadow: 0 0 14px 0px; } #link-three:focus { font-size: 36px; }

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

 a:focus { outline: 3px dotted green; }

إليك ما يبدو أعلاه على الصفحة:

ربط الأزرار والمربعات

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

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

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

 a { background-color: #1a0dab; color: #fff; padding: 1.5rem; }

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

قم بتضمين أيقونات في روابطك

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

إليك كيفية القيام بذلك. أولاً HTML:

 <a id=link-one href="#">Link Text</a> <a id=link-two href="#">Link Text</a> <a id=link-three href="https://wikipedia.org/">Link Text</a>

ثم ، CSS:

 a[href^="http"] { background: url('external-link-icon.png') no-repeat right center; background-size: 16px 16px; padding-right: 15px; }

تستهدف a[href^="http"] علامات الارتساء فقط التي يبدأ عنوانها بـ http في href="" . إلى هؤلاء ، تضيف العلامات صورة خلفية ، وهي الأيقونة ، وتضبطها على عدم التكرار ، وتحركها على طول الطريق إلى اليمين ، وتوسيطها عموديًا. تحدد بقية العلامات حجم الرمز وتخلق مسافة صغيرة بينها وبين النص.

الأفكار النهائية: تصميم CSS للروابط

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

ما هي طريقتك المفضلة لتصميم الروابط عبر CSS؟ أي نصائح أخرى للمشاركة؟ الرجاء القيام بذلك في التعليقات!