Ibrahem Smart
زيزوومى ذهبى
غير متصل
اخوتي أعضاء منتديات زيزووم للأمن والحماية نتابع اليوم دورة تعلم 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: تظهر لك أكواد الفوكس
في نهاية هذا الدرس
لا تنسى تطبيق كل ما تعلمته في هذا الدرس اكثر من مرة حتى تفهمه جيدًا ويكون سهلًا بالنسبة لك
