الدرس 8 في لغة CSS تجميع العناصر span وdiv

لأنهما العنصران الأكثر أهمية عندما تتعامل مع CSS.

• التجميع بالعنصر
  

  الكود:

  <span>

  
  
• التجميع بالعنصر
  

  الكود:

  <div>

  
  

التجميع بالعنصر

العنصر

الكود:

<span>

هو ما يمكن أن تسميه العنصر المحايد والذي لا يضيف شيئاً للوثيقة نفسها، لكن مع CSS يمكن استخدامه لإنشاء مؤثرات على أجزاء محددة من النص في الوثائق.
مثال هذا هو اقتباس من جملة قالها بنجامين فرانكلين:

الكود:


   <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>

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