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

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

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

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

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

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

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

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

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

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



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

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



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

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

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

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

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

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



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

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

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

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



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



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

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

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

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

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

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



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



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

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

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

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

 

شكراً جزيلاً لكم أخي الكريم...​

 

مجهود رائع بارك الله فيك

 

الدرس الثالث,,,,تم

 

رائع شكرا الك CSS فعلا لا غنى عنها لاي فرونت اند ديفلوبر

 

بارك الله فيك
شكراً على حضورك ومشاركتك