Ibrahem Smart

زيزوومى ذهبى
إنضم
30 يناير 2017
المشاركات
1,832
مستوى التفاعل
1,081
النقاط
1,050
الإقامة
الاسكندرية
غير متصل
165399


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


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

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

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

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

عمل الرابط

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

1.png


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

2.png


تنسيق الرابط

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

3.png


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

4.png


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


Hover

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

5.png


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

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

6.png


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

7.png


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

8.png


9.png


Active

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

10.png


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

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

11.png


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

12.png


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

13.png


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

خلاصة الدرس

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

165400
 

توقيع : Ibrahem Smart
عودة
أعلى