♨لا تنسى تسجيل اعجابك♨
احصائيات
هذا المنتدى يتوفر على 2223 عُضو.
آخر عُضو مُسجل هو edri فمرحباً به.

أعضاؤنا قدموا 2073 مساهمة في هذا المنتدى في 1157 موضوع

اهلا بك يا زائر
تجد لدينا :‏ برامج والعاب قصص و دروس والكثير...


أهلا وسهلا بك زائرنا الكريم, أنت لم تقم بتسجيل الدخول بعد! يشرفنا أن تقوم بالدخول أو التسجيل إذا رغبت بالمشاركة في المنتدى

منتدى الحاسب والجوال العربي » المنتدى التعليمي » مكتبة الدروس » دروس تعلم لغة Css » الدرس 8 في لغة CSS تجميع العناصر span وdiv

hozaifa01

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

إرسال موضوع جديد  إرسال مساهمة في موضوع

avatar

مجنون الغرام

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

#1 - كتب في 2016-01-11, 07:53

________________
معاينة صفحة البيانات الشخصي للعضو https://plus.google.com/+hozaifa01 https://www.facebook.com/hozaifa01 https://twitter.com/hozaifa01

صلاحيات هذا المنتدى:
تستطيع الرد على المواضيع في هذا المنتدى

IP