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

درس دورة تعلم لغة CSS | مميزات في متصفح جوجل كروم ستفيدك في البرمجة (3)

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

  1. Ibrahem Smart

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

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


    بسملة.png

    اخوتي أعضاء منتديات زيزووم للأمن والحماية نتابع اليوم دورة تعلم CSS

    سوف أشرح لكم بعض المميزات الموجودة داخل متصفح جوجل كروم ستفيدك في البرمجة

    وليست للغة CSS فقط بل للغات اخرى أيضًا وقد تجد بعضًا من هذه المميزات في متصفحات أخرى

    أولًا اسف جدًا لكم لأنني لم اقم بطرح الدرس مبكرًا بسبب ظروفي وقد حلت الحمد لله

    (1): عرض أكواد الصفحة التي تشاهدها

    اذا كنت تتصفح اي صفحة يوجد أكثر من طريقة لتقوم بمعرفة جميع أكواد الصفحة التي تشاهدها

    الطريقة الاولى: تعرض اكواد HTML وجميع الاكواد المدموجة معها باضافة view-source: قبل الرابط او كليك يمين في الصفحة وتختار عرض مصدر الصفحة.

    الطريقة الثانية: عند الضغط على Ctrl+Shift+I يتم فتح قائمة الفحص

    1.png

    على الشمال اكواد HTML واكواد JS إن وجدت (سبق ان تعلمتها في لغة HTML) وعلى اليمين أكواد CSS فقط

    تذهب من الأعلى الى Sources تظهر لك كالتالي

    2.png

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

    وستظهر الأكواد في الوسط

    يستحسن استخدام الطريقة الأولى

    (2): معرفة جميع الصور والملفات المستخدمه في هذا الموقع

    في قائمة الفحص نذهب لقسم Sources ونضغط Ctrl+P

    تظهر لك صفحة فيها جميع الصور والملفات سواء ملفات برمجية تحتوي على بعض الاكواد او خطوط او ملفات اخرى

    3.png

    اضغط على الملف الذي تريده وستظهر لك كل معلوماته وأكواده

    (3): كتابة الاكواد من داخل المتصفح لترى ما تفعله خطوه بخطوه

    هذه الميزة مهمة جدًا رغم سهولتها! فيمكنك التعديل على اكواد اي عنصر او اضافة اكواد له وأنت ترى تطبيق ما تعمله في الصفحة

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

    4.png

    يتم عمل بداية الكود وهو أسمه لا تلعب في أي شئ في الأسم

    5.png

    وتضغط Enter وحتى تبدأ الكتابه تضغط في اي مكان داخل الكود وتبدأ بالكتابه وحتى تنزل لسطر اخر لتكتب كود أخر تضغط Enter وعند الانتهاء تضغط Esc ويمكنك نسخ الاكواد التي كتبتها واضافتها لملف العمل (اذا كنت تقوم بعمل مشروع)

    (4): معرفة اكواد اي عنصر (HTML & CSS)

    تضع الماوس على العنصر وكليك يمين وتختار فحص يتم تحديد الكود الخاص به في HTML وتظهر أكواده في CSS

    (5): معرفة أكواد (Hover & Focus)

    الهوفر يظهر عند مرور الماوس على عنصر والفوكس عند الضغط وسأقوم بشرحهم في الدورة

    لمعرفة اكوادهم على أي عنصر نضع الماوس على العنصر وكليك يمين ونختار فحص وعلى ايمين من الأعلى نضغط على hov:

    4.png

    تضغط عليها فتظهر لك خيارات

    6.png

    اذا قمت بالضغط على hover: تظهر لك أكواد الهوفر

    اذا قمت بالضغط على focus: تظهر لك أكواد الفوكس

    في نهاية هذا الدرس

    لا تنسى تطبيق كل ما تعلمته في هذا الدرس اكثر من مرة حتى تفهمه جيدًا ويكون سهلًا بالنسبة لك


    خاتمة.png
     
    Fadi344 ،هاني الطيب و راجية الجنة معجبون بهذا.
  2. Fadi344

    Fadi344 زيزوومي VIP الأعضاء النشطين لهذا الشهر

    إنضم إلينا في:
    ‏أغسطس 16, 2013
    المشاركات:
    2,376
    الإعجابات :
    2,480
    نقاط الجائزة:
    1,600
    الجنس:
    ذكر
    برامج الحماية:
    Kaspersky
    نظام التشغيل:
    Windows 7
    شكراً جزيلاً لكم أخي الكريم...
     
  3. هاني الطيب

    هاني الطيب زيزوومي جديد

    إنضم إلينا في:
    ‏يونيو 9, 2018
    المشاركات:
    56
    الإعجابات :
    22
    نقاط الجائزة:
    40
    الجنس:
    ذكر
    الإقامة:
    مصر القاهرة
    برامج الحماية:
    ESET
    نظام التشغيل:
    Windows 7
    مجهود رائع بارك الله فيك
     

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

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