محمود عفيفى
07-03-2010, 01:54 PM
بسم الله الرحمن الرحيم
الحمد لله والصلاة والسلام على رسول الله وعلى آله وصحبه أجمعين
وبعد,
((دورة تعلم لغة CSS))
درس 8: تجميع العناصر باستخدام span وdiv
العنصران <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>لنقل أننا نريد أن نؤكد على ما قاله فرانكلين حول فوائد عدم النوم في النهار بأن نلونها بالأحمر، لهذا الغرض يمكن وضع الكلمات بين وسمي <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;
}شاهد المثال (http://ar.html.net/tutorials/css/lesson8_ex1.asp)
بالطبع يمكنك استخدام المعرف 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;
}شاهد المثال (http://ar.html.net/tutorials/css/lesson8_ex2.asp)
في الأمثلة السابقة استخدامنا <div> و<span> بشكل بسيط جداً، بتعديل لون الخلفية والنص، يمكن للعنصرين أن يقدما الكثير من الإمكانيات المتقدمة، على أي حال، لن نتحدث عن هذا حالياً، سنتناول هذا الموضوع لاحقاً في.
ملخص:-
في الدرس 7 (http://www.abc4web.net/vb/showthread.php?t=7264) و8، تعلمت حول المنتقي id وclass والعنصرين span وdiv.
يجب أن تكون الآن قادراً على تجميع وتحديد كل عناصر ملفات HTML، وهذه خطوة كبيرة في اتجاه إتقان CSS،
في الدرس 9 بإذن الله ستتعرف على نموذج الصندوق.
منقول
الحمد لله والصلاة والسلام على رسول الله وعلى آله وصحبه أجمعين
وبعد,
((دورة تعلم لغة CSS))
درس 8: تجميع العناصر باستخدام span وdiv
العنصران <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>لنقل أننا نريد أن نؤكد على ما قاله فرانكلين حول فوائد عدم النوم في النهار بأن نلونها بالأحمر، لهذا الغرض يمكن وضع الكلمات بين وسمي <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;
}شاهد المثال (http://ar.html.net/tutorials/css/lesson8_ex1.asp)
بالطبع يمكنك استخدام المعرف 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;
}شاهد المثال (http://ar.html.net/tutorials/css/lesson8_ex2.asp)
في الأمثلة السابقة استخدامنا <div> و<span> بشكل بسيط جداً، بتعديل لون الخلفية والنص، يمكن للعنصرين أن يقدما الكثير من الإمكانيات المتقدمة، على أي حال، لن نتحدث عن هذا حالياً، سنتناول هذا الموضوع لاحقاً في.
ملخص:-
في الدرس 7 (http://www.abc4web.net/vb/showthread.php?t=7264) و8، تعلمت حول المنتقي id وclass والعنصرين span وdiv.
يجب أن تكون الآن قادراً على تجميع وتحديد كل عناصر ملفات HTML، وهذه خطوة كبيرة في اتجاه إتقان CSS،
في الدرس 9 بإذن الله ستتعرف على نموذج الصندوق.
منقول