العنصران <span> و<div> يستخدمان لجمع العناصر وإنشاء
هيكلية للوثائق وهما يستخدمان معاً مع الخاصيتين class وid.في هذ االدرس، سنلقي نظرة عن قريب على استخدام <span>
و<div> لأنهما العنصران الأكثر أهمية عندما تتعامل مع CSS.
- التجميع بالعنصر <span>
- التجميع بالعنصر <div>
التجميع بالعنصر <span>العنصر <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>
كما تعلمت في الدرس الماضي.التجميع بالعنصر <div>العنصر <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>
بشكل بسيط جداً، بتعديل لون الخلفية والنص، يمكن للعنصرين أن يقدما الكثير
من الإمكانيات المتقدمة، على أي حال، لن نتحدث عن هذا حالياً، سنتناول
هذا الموضوع لاحقاً في.