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