تجميع العناصر بإستخدام div and span في لغة CSS الدرس |11| - Programmer Tech

Programmer Tech

تعلم البرمجة - علوم الكمبيوتر - أمن المعلومات - القرصنة الأخلاقية

إعلان اعلى المقالة

الأحد، 8 نوفمبر 2020

تجميع العناصر بإستخدام div and span في لغة CSS الدرس |11|


تجميع العناصر بإستخدام div and span

يستخدم هذان الوسمان لجمع العناصر و إنشاء هيكلية للوثائق و هما يستخدمان مع الخاصيتين id or class, في هذا الدرس سنلقي نظره على تلك الوسوم و كيف تستخدم مع بعض الأمثله.

 

تجميع العناصر بإستخدام (span)

العنصر span يمكن أن نسميه بالعنصر المحايد الذي لا يضيف شيئ للوثيقة لكن مع إستخدام span داخل كود التنسيق في css الأمر يختلف و يستخدم ذلك العنصر عندما تريد إضافة بعض التأثيرات لنص معين, على طبيعة الحال أغلب المواقع يكون بها مجموعة من النصوص أو الفقرات الذي تتحدث عن ماذا يفعل الموقع و الخدمات الذي يقدمها الموقع, لنأخذ بعض الأمثله حتى يتضح الأمر اكثر.

مثال

لنقوم بإنشاء فقرة نتحدث بها عن ماذا يقدم موقع programer tech و نقوم بفتح ملف index.html و نكتب الفقرة داخل وسم الفقرات p الذي تحدثنا عنه بدروس سابقة.

programmer tech css div and span
فقرة تتحدث عن خدمات الموقع

الآن لآحظ كيف تم كتابة الفقرة و نحن نريد الآن تنسيق بعض الكلمات الموجودة داخل الفقرة مثل إسم الموقع programmer tech و الخدمات الذي يقدمها هذا الموقع information و network وصاحب الموقع وهو kaissar بإستخدام span مع class يمكن أن نفعل ذلك.

اضافة الوسم span

 

لآحظ كيف تم إضافة الوسم span على الكلمات الذي ينبغي أن نؤشر عليها بلون من الألوان أو إضافة مجموعة من التنسيقات على النصوص مع الخاصية class لأننا نعرف أن في class يمكن استخدام اسم الـ class اكثر من مره بعكس id يستخدم اسم id مرة واحدة فقط و في حالتنا نحن هناك مجموعة من الكلمات الذي نريد أن يكون لها نفس التأثير لذلك تم إضافة نفس اسم class للعناصر, الآن نذهب الى css.

اضافة تنسيق علي الكلمات

الآن تم إضافة تنسيق للكلمات بإستخدام class يمكن أن يأخذ مجموعة من العناصر نفس اسم الـ class و بناء على ذلك سيتم إضافة نفس التنسيق على كل عنصر يأخذ نفس اسم class, في كود css نحن نريد أن نؤشر باللون الأحمر على جميع الخدمات الذي يقدمه الموقع و ايضاً إسم صاحب الموقع, لآحظ في المتصفح كيف تكون الفقرة.

css programmer tech span and div
الناتج من الكود

تجميع العناصر بإستخدام (div)

العنصر span يستخدم في العناصر لكن العنصر div يستخدم لتجميع العناصر و يعمل بنفس الطريقة يأخذ class or id, لنقوم بإنشاء مثال لقائمتين تحويان أسماء أصحاب موقع programmer tech و ماذا يعرف كل واحد منهم, نذهب إلى ملف index.html و نكتب الكود بالشكل

html5 and css3
كود html

لآحظ كيف تم إنشاء مجموعة من العناصر داخل العنصر الرئيسي div, لنقوم بتنسيق كل العناصر بإسم id فقط و حتى يسهل علينا الأمر أثناء التنسيق و هذه من أهم مميزات div لنبدأ بالتنسيق داخل ملف style.css 

css3
تطبيق التنسيق علي العنصر


لآحظ كيف تم إعطاء اللون الأحمر إلى جميع العناصر التي داخل العنصر الرئيسي div و هذا يعني أن جميع العناصر تظهر باللون الأحمر, وكذلك الأمر داخل العنصر الرئيسي الآخر و يظهر محتويات قيصر باللون الأزرق, العنصر div يقوم أيضاًَ بتقسيم الصفحة بالشكل الذي تريده.

 

css3

ليست هناك تعليقات:

إرسال تعليق

facebook

نموذج الاتصال

الاسم

بريد إلكتروني *

رسالة *