العنصران <span> و<div> يستخدمان لجمع العناصر وإنشاء هيكلية للوثائق وهما يستخدمان معاً مع الخاصيتين class وid.
في هذ االدرس، سنلقي نظرة عن قريب على استخدام <span> و<div> لأنهما العنصران الأكثر أهمية عندما تتعامل مع CSS.
<span><div>العنصر <span> هو ما يمكن أن تسميه العنصر المحايد والذي لا يضيف شيئاً للوثيقة نفسها، لكن مع CSS <span> يمكن استخدامه لإنشاء مؤثرات على أجزاء محددة من النص في الوثائق.
مثال هذا هو اقتباس من جملة قالها بنجامين فرانكلين:
<p>Early to bed and early to rise
makes a man healthy, wealthy and wise.</p>
لنقل أننا نريد أن نؤكد على ما قاله السيد فرانكلين حول فوائد عدم النوم في النهار بأن نلونها بالأحمر، لهذا الغرض يمكن وضع الكلمات بين وسمي <span>، كل span أضفنا لها فئة class والتي تمكننا بعد ذلك من إضافة خصائص لها من خلال CSS:
<p>Early to bed and early to rise
makes a man <span class="benefit">healthy</span>,
<span class="benefit">wealthy</span>
and <span class="benefit">wise</span>.</p>
أوامر CSS المتعلقة بالمثال:
span.benefit {
color:red;
}
بالطبع يمكنك استخدام المعرف id لإضافة الألوان على <span> لكن تذكر أن استخدام المعرف يجب أن يكون لمرة واحدة في الصفحة الواحدة، لذلك في المثال أعلاه عليك أن تستخدم ثلاث معرفات متميزة لكل <span> كما تعلمت في الدرس الماضي.
العنصر <span> يستخدم في العناصر كما رأيت في المثال السابق، العنصر <div> يستخدم لتجميع العناصر.
هذا هو الاختلاف الوحيد، تجميع العناصر باستخدام <div> يعمل بنفس الطريقة، لنلقي نظرة على مثال لقائمتين تحويان أسماء الرؤساء الأمريكيين مقسمة حسب الأحزاب التي ينتمون لها:
<div id="democrats">
<ul>
<li>فرانكلين روزفيلت</li>
<li>هاري ترومن</li>
<li>جون كينيدي</li>
<li>ليندون جونسون</li>
<li>جيمي كارتر</li>
<li>بيل كلينون</li>
</ul>
</div>
<div id="republicans">
<ul>
<li>دوايت أيزنهاور</li>
<li>ريتشارد نيكسون</li>
<li>جيرالد فورد</li>
<li>رونالد ريغان</li>
<li>جورج بوش</li>
<li>جورج دبليو بوش</li>
</ul>
</div>
وفي ملف CSS سنستخدم التجميع كما في المثال أعلاه بنفس الطريقة:
#democrats {
background:blue;
}
#republicans {
background:red;
}
في الأمثلة لاسابقة استخدامنا <div> و<span> بشكل بسيط جداً، بتعديل لون الخلفية والنص، يمكن للعنصرين أن يقدما الكثير من الإمكانيات المتقدمة، على أي حال، لن نتحدث عن هذا حالياً، سنتناول هذا الموضوع لاحقاً في.
في الدرس 7 و8، تعلمت حول المنتقي id وclass والعنصرين span وdiv.
يجب أن تكون الآن قادراً على تجميع وتحديد كل عناصر ملفات HTML، وهذه خطوة كبيرة في اتجاه إتقان CSS، في الدرس 9 ستتعرف على نموذج الصندوق.