1. إستبعاد الملاحظة

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

الموضوع في 'منتدى الدورات العامة' بواسطة Ibrahem Smart, بتاريخ ‏يوليو 26, 2018.

  1. Ibrahem Smart

    Ibrahem Smart زيزوومى فضى

    إنضم إلينا في:
    ‏يناير 30, 2017
    المشاركات:
    1,829
    الإعجابات :
    1,005
    نقاط الجائزة:
    860
    الجنس:
    ذكر
    الإقامة:
    الاسكندرية
    برامج الحماية:
    ESET
    نظام التشغيل:
    Windows 7


    [​IMG]

    مرحبا إخوتي أعضاء منتديات زيزووم للأمن والحماية
    اليوم سأشرح لكم في دورة تعلم لغة 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 يتم اضافتهم بعد اسم العنصر و نقطتين:.
    ------------------------------------------------------------

    [​IMG]
     
    Fadi344 و راجية الجنة معجبون بهذا.

مشاركة هذه الصفحة

جاري تحميل الصفحة...