كلمـــة الإدارة لمنتدى الحاسب والجوال العربي

الأعضاء و الزوار الكرام

يا ‏‏" ‏زائر " اهلاً وسهلاً بك في اسرة منتدانا منتدى الحاسب والجوال العربي سعيدون بزيارتكم لنا *كما نرحب بلعضو الجديد ‏‏" ‏انجكشن "

سحابة الكلمات الدلالية


شاطر
استعرض الموضوع السابقاذهب الى الأسفلاستعرض الموضوع التالي
avatar
المدير العام
المدير العام
البلد البلد :
الجنس : ذكر
عدد المساهمات : 1460
نقاط : 4259
مخالفات مخالفات : ليس لديه مخالفات
معاينة صفحة البيانات الشخصي للعضوhttps://google.com/+مجنونالغرامhttps://www.facebook.com/hozaifa01https://twitter.com/hozaifa01

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

في 2016-01-11, 07:53
الدرس 8 في لغة CSS تجميع العناصر span وdiv

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

________________
استعرض الموضوع السابقالرجوع الى أعلى الصفحةاستعرض الموضوع التالي
صلاحيات هذا المنتدى:
تستطيع الرد على المواضيع في هذا المنتدى