مولاتى

بســــــم الله الرحمن الرحيم


<meta name="propeller" content="7edb445ea1f8a84d8d2c566f754a8268" />
عزيزي الزائر / عزيزتي الزائرة يرجي التكرم بتسجبل الدخول اذا كنت عضو معنا


او التسجيل ان لم تكن عضو وترغب في الانضمام الي اسرة المنتدي


سنتشرف بتسجيلك


شكرا
ادارة المنتدي

مولاتى


 
البوابةالرئيسيةس .و .جبحـثالأعضاءالمجموعاتالتسجيلدخول

شاطر | 
 

 الدرس 8: تجميع العناصر باستخدام span وdiv

اذهب الى الأسفل 
كاتب الموضوعرسالة
Admin
Admin
Admin
avatar

الساعة الأن :
الدوله :
ذكر عدد المساهمات : 210
نقاط : 6835
تاريخ التسجيل : 25/11/2014
العمر : 31
الموقع : www.moulati.arab.st

مُساهمةموضوع: الدرس 8: تجميع العناصر باستخدام span وdiv   الثلاثاء ديسمبر 16, 2014 4:28 am

العنصران و
يستخدمان لجمع العناصر وإنشاء هيكلية للوثائق وهما يستخدمان معاً مع الخاصيتين class وid.
في هذ االدرس، سنلقي نظرة عن قريب على استخدام و
لأنهما العنصران الأكثر أهمية عندما تتعامل مع CSS.

  • التجميع بالعنصر 
    الكود:
    <span>


  • التجميع بالعنصر 
    الكود:
    <div>


التجميع بالعنصر

العنصر 

الكود:
<span>

 هو ما يمكن أن تسميه العنصر المحايد والذي لا يضيف شيئاً للوثيقة نفسها، لكن مع CSS يمكن استخدامه لإنشاء مؤثرات على أجزاء محددة من النص في الوثائق.

مثال هذا هو اقتباس من جملة قالها بنجامين فرانكلين:

الكود:
[center][size=16][color=#ffffff]
[/color][/size][/center]

[center][size=16]   <p>Early to bed and early to rise[/size][/center]

[center][size=16]makes a man healthy, wealthy and wise.</p>[/size][/center]

[center][size=16]   [/size][/center]






لنقل أننا نريد أن نؤكد على ما قاله السيد فرانكلين حول فوائد عدم النوم في النهار بأن نلونها بالأحمر، لهذا الغرض يمكن وضع الكلمات بين وسمي 

الكود:
<span>

، كل 

الكود:
span

 أضفنا لها فئة 

الكود:
class

 والتي تمكننا بعد ذلك من إضافة خصائص لها من خلال CSS:


الكود:
[center][size=16][color=#ffffff]
[/color][/size][/center]

[center][size=16]   <p>Early to bed and early to rise[/size][/center]

[center][font=sans-serif, trebuchet ms, lucida grande, lucida sans unicode, arial, helvetica, sans-serif][size=13][size=16]makes a man [/size][/size][/font][b][size=16]<span class="benefit">healthy</span>[/size][/b][font=sans-serif, trebuchet ms, lucida grande, lucida sans unicode, arial, helvetica, sans-serif][size=13][size=16],[/size][/size][/font][/center]

[center][b][size=16]<span class="benefit">wealthy</span>[/size][/b][/center]

[center][font=sans-serif, trebuchet ms, lucida grande, lucida sans unicode, arial, helvetica, sans-serif][size=13][size=16]and [/size][/size][/font][b][size=16]<span class="benefit">wise</span>[/size][/b][font=sans-serif, trebuchet ms, lucida grande, lucida sans unicode, arial, helvetica, sans-serif][size=13][size=16].</p>[/size][/size][/font][/center]

[center][size=16]   [/size][/center]






أوامر CSS المتعلقة بالمثال:

الكود:
[center][size=16][color=#ffffff]
[/color][/size][/center]

[center][font=sans-serif, trebuchet ms, lucida grande, lucida sans unicode, arial, helvetica, sans-serif][size=13][size=16]   [/size][/size][/font][b][size=16]span.benefit[/size][/b][font=sans-serif, trebuchet ms, lucida grande, lucida sans unicode, arial, helvetica, sans-serif][size=13][size=16] {[/size][/size][/font][/center]

[center][size=16]      color:red;[/size][/center]
   }

[center][size=16]   [/size][/center]







  • [وحدهم المديرون لديهم صلاحيات معاينة هذا الرابط]


بالطبع يمكنك استخدام المعرف id لإضافة الألوان على 

الكود:
<span>

 لكن تذكر أن استخدام المعرف يجب أن يكون لمرة واحدة في الصفحة الواحدة، لذلك في المثال أعلاه عليك أن تستخدم ثلاث معرفات متميزة لكل 

الكود:
<span>

 كما تعلمت في الدرس الماضي.

التجميع بالعنصر

العنصر 

الكود:
<span>

 يستخدم في العناصر كما رأيت في المثال السابق، العنصر 

الكود:
<div>

 يستخدم لتجميع العناصر.

هذا هو الاختلاف الوحيد، تجميع العناصر باستخدام 

الكود:
<div>

 يعمل بنفس الطريقة، لنلقي نظرة على مثال لقائمتين تحويان أسماء الرؤساء الأمريكيين مقسمة حسب الأحزاب التي ينتمون لها:


الكود:
[center][size=16][color=#ffffff]
[/color][/size][/center]

[center][font=sans-serif, trebuchet ms, lucida grande, lucida sans unicode, arial, helvetica, sans-serif][size=13][size=16]   [/size][/size][/font][b][size=16]<div id="democrats">[/size][/b][/center]

[center][size=16]   <ul>[/size][/center]

[center][size=16]   <li>فرانكلين روزفيلت</li>[/size][/center]
   <li>هاري ترومن</li>

[center][size=16]   <li>ليندون جونسون</li>[/size][/center]
   <li>جون كينيدي</li>
   <li>جيمي كارتر</li>

[center][font=sans-serif, trebuchet ms, lucida grande, lucida sans unicode, arial, helvetica, sans-serif][size=13][size=16]   [/size][/size][/font][b][size=16]<div id="republicans">[/size][/b][/center]
   <li>بيل كلينون</li>
   </ul>
   </div>


[center][/center]
   <ul>

[center][size=16]   <li>دوايت أيزنهاور</li>[/size][/center]
   <li>ريتشارد نيكسون</li>

[center][size=16]   <li>رونالد ريغان</li>[/size][/center]
   <li>جيرالد فورد</li>
   <li>جورج بوش</li>

[center][size=16]   [/size][/center]
   <li>جورج دبليو بوش</li>
   </ul>

[center][size=16]   </div>[/size][/center]






وفي ملف CSS سنستخدم التجميع كما في المثال أعلاه بنفس الطريقة:

الكود:
[center][size=16][color=#ffffff]
[/color][/size][/center]

[center][font=sans-serif, trebuchet ms, lucida grande, lucida sans unicode, arial, helvetica, sans-serif][size=13][size=16]   [/size][/size][/font][b][size=16]#democrats[/size][/b][font=sans-serif, trebuchet ms, lucida grande, lucida sans unicode, arial, helvetica, sans-serif][size=13][size=16] {[/size][/size][/font][/center]

[center][size=16]      background:blue;[/size][/center]
   }


[center][font=sans-serif, trebuchet ms, lucida grande, lucida sans unicode, arial, helvetica, sans-serif][size=13][size=16]   [/size][/size][/font][b][size=16]#republicans[/size][/b][font=sans-serif, trebuchet ms, lucida grande, lucida sans unicode, arial, helvetica, sans-serif][size=13][size=16] {[/size][/size][/font][/center]

[center][size=16]      background:red;[/size][/center]
   }

[center][size=16]   [/size][/center]







  • [وحدهم المديرون لديهم صلاحيات معاينة هذا الرابط]


في الأمثلة لاسابقة استخدامنا 

الكود:
<div>

 و

الكود:
<span>

 بشكل بسيط جداً، بتعديل لون الخلفية والنص، يمكن للعنصرين أن يقدما الكثير من الإمكانيات المتقدمة، على أي حال، لن نتحدث عن هذا حالياً، سنتناول هذا الموضوع لاحقاً في.

ملخص

في [وحدهم المديرون لديهم صلاحيات معاينة هذا الرابط] و8، تعلمت حول المنتقي 

الكود:
id

 و

الكود:
class

 والعنصرين 

الكود:
span

 و

الكود:
div

.

يجب أن تكون الآن قادراً على تجميع وتحديد كل عناصر ملفات HTML، وهذه خطوة كبيرة في اتجاه إتقان CSS، في [وحدهم المديرون لديهم صلاحيات معاينة هذا الرابط] ستتعرف على نموذج الصندوق.


قناة المعلم التعليميه للشروحات المصوره والشروحات التعليميه والثقافيه والفنيه والتكنلوجيا
نحن نؤمن بأنه ليس هناك رجلا يعرف كل شئ ولكننا نؤمن بتبادل الافكار
اذا اعجبكم الشرح ارجو ان تضغطو على زر ( اعجاب + مشاركه )
ومتابعتنا على قناة المعلم عبر الرابط التالى
[وحدهم المديرون لديهم صلاحيات معاينة هذا الرابط]

ومتابعتنا عبر صفحتنا فى الفيس بوك عبر الرابط التالى
[وحدهم المديرون لديهم صلاحيات معاينة هذا الرابط]


[وحدهم المديرون لديهم صلاحيات معاينة هذا الرابط]
الرجوع الى أعلى الصفحة اذهب الى الأسفل
معاينة صفحة البيانات الشخصي للعضو http://moulati.arab.st
 
الدرس 8: تجميع العناصر باستخدام span وdiv
الرجوع الى أعلى الصفحة 
صفحة 1 من اصل 1

صلاحيات هذا المنتدى:لاتستطيع الرد على المواضيع في هذا المنتدى
مولاتى :: youtube :: قناة المُعلم :: دروس شامله وكامله لتتعلم كل شئ عن الـ CSS وكيفية التعامل بيها وما هيا الـ CSS-
انتقل الى: