- Site
- 4:47 ص
- دروس في لغة css
- لاتوجد تعليقات
السلام عليكم و رحمة الله تعالى وبركاته نرحب بكم من جديد في مدونتا ونتمنى ان تقضوا معنا امتع الاوقات
لعنصران <span> و<div> يستخدمان لجمع العناصر وإنشاء هيكلية للوثائق وهما يستخدمان معاً مع الخاصيتين class وid.
في هذ االدرس، سنلقي نظرة عن قريب على استخدام <span> و<div> لأنهما العنصران الأكثر أهمية عندما
تتعامل مع CSS.
مثال هذا هو اقتباس من جملة قالها بنجامين فرانكلين
لنقل أننا نريد أن نؤكد على ما قاله السيد فرانكلين حول فوائد عدم النوم في النهار بأن نلونها بالأحمر، لهذا الغرض يمكن وضع الكلمات بين وسمي
أوامر CSS المتعلقة بالمثال:
بالطبع يمكنك استخدام المعرف id لإضافة الألوان على
هذا هو الاختلاف الوحيد، تجميع العناصر باستخدام
في هذ االدرس، سنلقي نظرة عن قريب على استخدام <span> و<div> لأنهما العنصران الأكثر أهمية عندما
تتعامل مع CSS.
- التجميع بالعنصر
<span> - التجميع بالعنصر
<div>
التجميع بالعنصر <span>
العنصر<span> هو ما يمكن أن تسميه العنصر المحايد والذي لا يضيف شيئاً للوثيقة نفسها، لكن مع CSS <span> يمكن استخدامه لإنشاء مؤثرات على أجزاء محددة من النص في الوثائق.مثال هذا هو اقتباس من جملة قالها بنجامين فرانكلين
<p>Early to bed and early to rise |
<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> |
|
<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; } |
شكرا على حسن متابعتكم نتمنى ان يلقى الدرس اعجابكم نحن في انتظار ردودكم وتعليقاتكم
عن الكاتب :
وصف مختصر عن الكاتب
المشاركات
ليست هناك تعليقات:
إرسال تعليق