درس دورة تعلم لغة CSS | خواص الروابط وتنسيقها (10)

المصدر: دورة تعلم لغة CSS | خواص الروابط وتنسيقها (10)
في منتدى : منتدى الدّورات العامّة ولُغات البرمجة

مرحبا إخوتي أعضاء منتديات زيزووم للأمن والحماية
اليوم سأشرح لكم في دورة تعلم لغة CSS

Links
خواص الروابط وتنسيقها

------------------------------------------------------------

عندما نقوم بادراج رابط في صفحتنا نجد شكله ليس جميلًا ولكن سنتعلم في هذا الدرس بعض الاشياء التي يمكنك ان تفعلها فيه لتنسيقه واضافة تاثير عند مرور الماوس عليه وعند الضغط (Hover & Active)

------------------------------------------------------------

عمل الرابط

أولًا طبعًا تقوم بعمل الرابط الذي نريد ان نتعلم تنسيق الروابط عليه مثلًا هذا:



سيظهر في الصفحة صغيرًا بدون تنسيقات أو أي شئ



تنسيق الرابط

يمكنك عمل اشياء كثيرة في الرابط من الخواص التي تعلمناها والخواص التي لم نتعلمها بعد
فمثلًا هنا سأقوم طبعًا باستخدام خاصية font-size لاكبر حجم خط الرابط وسأعطيه لون وأقوم بازالة الخط الذي تحته وهذه هي الخواص بقيمها:



فتكون هذه النتيجة:



ويمكنك عمل تاثيرات اخرى كثيره رائعه عند تعلمك للغة كاملة

Hover

في البداية تكتب بهذا الشكل بجانب اسم العنصر:



والاكواد التي تكتب هنا تعمل عند مرور الماوس على الرابط او اي شئ

فمثلًا كتبت ان اللون يكون ازرق



فعند مرور الماوس على الرابط سيكون لونه ازرق



ويمكن ايضًا ارجاع الخط السفلي للرابط في الهوفر عن طريق خاصية text-decoration بقيمة underline





Active

يتم كتابتها مثل الهوفر:



لكن الاكواد التي تكتب داخلها تعمل عند الضغط على الرابط او اي شئ

فمثلًا سنعطي الرابط هذه الخواص ليقوم بعملها عند الضغط عليه:



فهذه هي النتيجة عند الضغط



وهذه كل الاكواد التي قمنا بكتابتها



------------------------------------------------------------

خلاصة الدرس

• يمكن باستخدام خاصية text-decoration تحديد مكان خط الروابط او ازالته.
• hover هي التاثير الذي يظهر عند مرور الماوس على عنصر.
• active هي التاثير الذي يظهر عند الضغط على عنصر.
• hover و active يتم اضافتهم بعد اسم العنصر و نقطتين:.

------------------------------------------------------------