تجميع العناصر بإستخدام div و span في CSS
يستخدم هذان الوسمان لجمع العناصر و إنشاء هيكلية للوثائق و هما يستخدمان مع الخاصيتين id or class, في هذا الدرس سنلقي نظره على تلك الوسوم و كيف تستخدم مع بعض الأمثله.
يمكن استخدام عناصر div و span في CSS لتجميع العناصر وتنظيمها بشكل أفضل على الصفحة. عنصر div يستخدم عادة لتجميع مجموعة من العناصر التي تشكل جزءًا من التصميم الرئيسي للصفحة، مثل العناصر التي تشكل عنوانًا أو قائمة أو مقطعًا كبيرًا من النص.
عنصر span يستخدم عادة لتجميع مجموعة من العناصر الصغيرة التي تشكل جزءًا من التصميم الرئيسي للصفحة، مثل العناصر التي تشكل نصًا مؤقتًا أو عنصرًا فرعيًا في صفحة. يمكن تطبيق الأنماط الشائعة في CSS مثل التحكم في الخطوط والألوان والحواف والتباعد والمسافات لتنظيم العناصر المجمعة باستخدام div و span.
تجميع العناصر بإستخدام span
العنصر span يمكن أن نسميه بالعنصر المحايد الذي لا يضيف شيئ للوثيقة لكن مع إستخدام span داخل كود التنسيق في css الأمر يختلف و يستخدم ذلك العنصر عندما تريد إضافة بعض التأثيرات لنص معين, على طبيعة الحال أغلب المواقع يكون بها مجموعة من النصوص أو الفقرات الذي تتحدث عن ماذا يفعل الموقع و الخدمات الذي يقدمها الموقع, لنأخذ بعض الأمثله حتى يتضح الأمر اكثر.
مثال
لنقوم بإنشاء فقرة نتحدث بها عن ماذا يقدم موقع programer tech و نقوم بفتح ملف index.html و نكتب الفقرة داخل وسم الفقرات p الذي تحدثنا عنه بدروس سابقة.
<body>
<p>The programmer tech website offers a set of techniques such as learning
to build a website as information and network security,
and this website is owned by muhammad alush and ahmed kaissar
</p>
</body>الآن لآحظ كيف تم كتابة الفقرة و نحن نريد الآن تنسيق بعض الكلمات الموجودة داخل الفقرة مثل إسم الموقع programmer tech و الخدمات الذي يقدمها هذا الموقع information و network وصاحب الموقع وهو kaissar بإستخدام span مع class يمكن أن نفعل ذلك.
<body>
<p>The <span class="color"> programmer tech </span> website offers a set of techniques such as learning
to build a website as <span class="color"> information </span> and <span class="color"> network </span> security,
and this website is owned by<span class="color">Muhammad Alush </span> and <span class="color">Ahmed Kaissar .</span>
</p>
</body>لآحظ كيف تم إضافة الوسم span على الكلمات الذي ينبغي أن نؤشر عليها بلون من الألوان أو إضافة مجموعة من التنسيقات على النصوص مع الخاصية class لأننا نعرف أن في class يمكن استخدام اسم الـ class اكثر من مره بعكس id يستخدم اسم id مرة واحدة فقط و في حالتنا نحن هناك مجموعة من الكلمات الذي نريد أن يكون لها نفس التأثير لذلك تم إضافة نفس اسم class للعناصر, الآن نذهب الى css.
.color{
color: red;
}الآن تم إضافة تنسيق للكلمات بإستخدام class يمكن أن يأخذ مجموعة من العناصر نفس اسم الـ class و بناء على ذلك سيتم إضافة نفس التنسيق على كل عنصر يأخذ نفس اسم class, في كود css نحن نريد أن نؤشر باللون الأحمر على جميع الخدمات الذي يقدمه الموقع و ايضاً إسم صاحب الموقع, لآحظ في المتصفح كيف تكون الفقرة.
يمكن تطبيق الأنماط الشائعة في CSS مثل التحكم في الخطوط والألوان والحواف والتباعد والمسافات لتنظيم العناصر المجمعة باستخدام div و span. على سبيل المثال، يمكن إنشاء مجموعة من الروابط باستخدام عنصر div وعنصر span كالتالي:
<div class="links"> <span><a href="#">رابط 1</a></span> <span><a href="#">رابط 2</a></span> <span><a href="#">رابط 3</a></span> </div>
ويمكن تطبيق الأنماط المختلفة على الروابط داخل العنصر span باستخدام CSS، على سبيل المثال:
.links {
display: flex;
justify-content: space-between;
align-items: center;
}
.links a {
color: blue;
text-decoration: none;
font-weight: bold;
padding: 5px;
}
.links a:hover {
background-color: blue;
color: white;
}في هذا المثال، تم استخدام display: flex لترتيب الروابط بشكل أفضل و justify-content: space-between لتباعد العناصر بشكل متساوٍ، وتم تطبيق أنماط CSS على الروابط نفسها باستخدام links a.
تجميع العناصر بإستخدام div
العنصر span يستخدم في العناصر لكن العنصر div يستخدم لتجميع العناصر و يعمل بنفس الطريقة يأخذ class or id, لنقوم بإنشاء مثال لقائمتين تحويان أسماء أصحاب موقع programmer tech و ماذا يعرف كل واحد منهم, نذهب إلى ملف index.html و نكتب الكود بالشكل
<body>
Muhammad Alush
<div id="Database">
<ul>
<li>Java</li>
<li>Python</li>
<li>JavaScript</li>
<li>C</li>
<li>C++</li>
<li>MySql</li>
<li>Dart</li>
</ul>
</div>
Ahmed Kaissar
<div id="Kaissar">
<ul>
<li>PHP</li>
<li>HTML5</li>
<li>CSS3</li>
<li>Scurity</li>
</ul>
</div>
</body>لآحظ كيف تم إنشاء مجموعة من العناصر داخل العنصر الرئيسي div, لنقوم بتنسيق كل العناصر بإسم id فقط و حتى يسهل علينا الأمر أثناء التنسيق و هذه من أهم مميزات div لنبدأ بالتنسيق داخل ملف style.css
<style>
#Database {
background-color: red;
}
#Kaissar {
background-color: blue;
}
</style>لآحظ كيف تم إعطاء اللون الأحمر إلى جميع العناصر التي داخل العنصر الرئيسي div و هذا يعني أن جميع العناصر تظهر باللون الأحمر, وكذلك الأمر داخل العنصر الرئيسي الآخر و يظهر محتويات قيصر باللون الأزرق, العنصر div يقوم أيضاًَ بتقسيم الصفحة بالشكل الذي تريده.
