-->
U3F1ZWV6ZTU1MTYyNTY0NTFfQWN0aXZhdGlvbjYyNDkxNTc4MDk4

كود إنشاء و عمل class بواسطة الـ html و طريقة ظهوره و عمله

مثال بسيط عن كيفية إنشاء الـ class و التعريف به بواسطة الـ html


كود إنشاء و عمل class بواسطة الـ html و طريقة ظهوره و عمله
كود إنشاء و عمل class بواسطة الـ html و طريقة ظهوره و عمله
زوارنا الكرام سوف نقوم في البداية بالتعريف ما هو الـ class و ما هو عمله لكي يتبيّن لك عن كيفية عمله و خصائصه قبل أن نشرع في الشرح عن الكود الموجود في درس اليوم .
 الـ class هو عبارة عن طريقة لوصف الكائنات التي سوف تُنشأ منه و هو يمثل الشكل العام للكائنات التي سوف تُستَنسخ منه ، و الـ class نستطيع أن نُنشئ منه عدة نسخ و جميع هذه النسخ هي عبارة عن كائنات و هذه الكائنات لا يمكن إظهارها و الحصول عليها من غير class أي أنه يجب أن يتم بناء الـ class أولاً و من ثم تُصدر منه النسخ المُختلفة من الكائنات ، و المُبرمج يقوم بكتابة class لكي يَصف من خلال  البرمجة شكل الكائنات التي سوف تصدر من خلال هذا الـ class .

هذا شرح بسيط و مُختصر عن عمل الـ class ، أي أننا بعد تعريفنا للـ class و خصائصه أثناء البرمجة و بعد تسمية هذا الـ class و عند استخدامه سوف يتم تطبيق جميع خصائصة على الكائنات التي بداخله و تتفرع منه . و إذا أردنا تطبيق خصائص هذا الـ class على أي كائن فقط نقوم بإضافة اسم الـ class على هذا الكائن ليتم تنفيذ الخصائص عليه .

أما بالنسبة للمثال البسيط عن الـ class " الذي تجده في الصندوق بالأسفل " أردنا أن نوضح كيفية عمل و إنشاء class بواسطة الـ html و طريقة ظهوره و كيفية عمله .

شرح الكود :

في البداية عند إنشاء أي class يجب أن نضع له تسمية دلالية للتعريف به لكي نعرف لأي كائن سوف يكون موجه هذا الـ class ، و هنا قمنا بتسميته example للدلالية على أننا أنشأنا هذا الـ class كمثال من أجل الشرح ، أي أننا بمجرد رؤيتنا لإسم هذا الـ class في مكان آخر سوف نعرف بأنه مخصص للأمثلة و بمجرد أن نصل إلى مكان أثناء البرمجة و نريد أن نضع مثال للمستخدم عن كائن أو عنصر ما فقط نقوم بتعريف الـ class="example" دون الحاجة إلى تعريفات أُخرى فسوف يتم تطبيق ما قمنا بتعريفه بالبداية على هذا الاسم لجميع الكائنات الموجودة داخل اسم هذا الـ class " نتمنى أن تكون وضحت الفكرة " .

الخصائص الثابتة للـ class المُسمى example كما تشاهد قمنا بوضع لون للخلفية و لون للكتابة و حددنا مكان تواجده بالنسبة للتخطيط و أيضاً اتجاه النص و مكان النص و حجم النص و عرض النص ، و هذه الخصائص الثابتة سوف يتم تطبيقها على جميع الـ class ذات التسمية example .

قمنا بعمل محتوى جديد و هو div و وضعنا الـ class بداخله و قمنا بوضع فقرة بداخله a> و قمنا بوضع مثال داخل الفقرة ، و هنا وضعنا مثال بسيط عن فقرة عنوانها " البحث في google و أخبرنا المتصفح أثناء ضغط المُستخدم على هذه الجملة قم بأخذه إلى الرابط href الذي وضعناه لك و هو www.google.com و أثناء وضع الماوس على عنوان الفقرة قُم بإظهار له title النص التالي search by google ، كما هو موضح بالأسفل .
أي كائنات أو فقرات أو عناصر يتم كتابتها داخل المحتوى div قبل إغلاقه <div/> سوف يتم تطبيق عليه خصائص الـ class الذي قمنا بوضعه داخل هذا المحتوى . 
الغرض من بساطة المثال هو معرفة طريقة عمل الـ class و وظيفته و كيف يتم التعامل معه لكي نعرف كيف نُضيف و نُعَدّل على أي class موجود ضمن موقعنا أو مدونتنا .

طريقة كتابة الكود :



بعد تنفيذ الكود يظهر للمُستخدم على الشكل التالي :


ليست هناك تعليقات
إرسال تعليق

إرسال تعليق

الاسمبريد إلكترونيرسالة

تم الكشف عن مانع الإعلانات

الإعلانات تساعدنا في تمويل موقعنا، فالمرجو تعطيل مانع الإعلانات وساعدنا في تقديم محتوى حصري لك. شكرًا لك على الدعم ❤️