منتدى الابداع العربي

للإبداع لمسات ! ... ولمسـات الإبــداع إختصاصـنا !
 
الرئيسيةالرئيسية  المنشوراتالمنشورات  البوابةالبوابة  التسجيلالتسجيل  دخولدخول  


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

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

اذهب الى الأسفل 
كاتب الموضوعرسالة
JoryAbdallah
سوبر الإبداع 

JoryAbdallah

انثى
السمك
عدد المساهمات : 126400
نقاط النشاط : 142117
السٌّمعَة : 3006
بلد العضو : تجميع العناصر باستخدام span وdiv Saudi-10
العمر : 35

تجميع العناصر باستخدام span وdiv Empty
مُساهمةموضوع: تجميع العناصر باستخدام span وdiv   تجميع العناصر باستخدام span وdiv Emptyالإثنين نوفمبر 28, 2016 11:36 pm

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

و
الكود:
<div>

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

لأنهما العنصران الأكثر أهمية عندما تتعامل مع CSS.

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

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


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

الكود:
<span>



العنصر
الكود:
<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>
كما تعلمت في الدرس الماضي.

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

الكود:
<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;
   }
   



في الأمثلة لاسابقة استخدامنا
الكود:
<div>
و
الكود:
<span>
بشكل بسيط جداً، بتعديل لون الخلفية والنص، يمكن للعنصرين أن يقدما الكثير من الإمكانيات المتقدمة، على أي حال، لن نتحدث عن هذا حالياً، سنتناول هذا الموضوع لاحقاً في.
الرجوع الى أعلى الصفحة اذهب الى الأسفل
http://taqnyiat.ahlamontada.com/
abuahmad
عضو محترف 

abuahmad

ذكر
السرطان
عدد المساهمات : 1485
نقاط النشاط : 1637
السٌّمعَة : 4
العمر : 54

تجميع العناصر باستخدام span وdiv Empty
مُساهمةموضوع: رد: تجميع العناصر باستخدام span وdiv   تجميع العناصر باستخدام span وdiv Emptyالإثنين يناير 02, 2017 8:18 pm

موضوع رائع



شكرا

الرجوع الى أعلى الصفحة اذهب الى الأسفل
Mr Robot
سوبر الإبداع 

Mr Robot

ذكر
القوس
عدد المساهمات : 35481
نقاط النشاط : 37581
السٌّمعَة : 108
بلد العضو : تجميع العناصر باستخدام span وdiv Lebano10
العمر : 35

تجميع العناصر باستخدام span وdiv Empty
مُساهمةموضوع: رد: تجميع العناصر باستخدام span وdiv   تجميع العناصر باستخدام span وdiv Emptyالثلاثاء مارس 21, 2017 2:03 am

بارك الله بيك
واصل
الرجوع الى أعلى الصفحة اذهب الى الأسفل
Princess Abir
عضو ذهبي 

Princess Abir

انثى
الثور
عدد المساهمات : 2130
نقاط النشاط : 2168
السٌّمعَة : 9
بلد العضو : تجميع العناصر باستخدام span وdiv Algeri10
العمر : 20

تجميع العناصر باستخدام span وdiv Empty
مُساهمةموضوع: رد: تجميع العناصر باستخدام span وdiv   تجميع العناصر باستخدام span وdiv Emptyالثلاثاء مارس 21, 2017 2:04 am

طرح مميز يعطيك العافية


تجميع العناصر باستخدام span وdiv 21484110
الرجوع الى أعلى الصفحة اذهب الى الأسفل
https://www.ibda3araby.com
Picasso-Des
سوبر الإبداع 

Picasso-Des

ذكر
الجدي
عدد المساهمات : 10775
نقاط النشاط : 11119
السٌّمعَة : 136
بلد العضو : تجميع العناصر باستخدام span وdiv Ioao10
العمر : 37

تجميع العناصر باستخدام span وdiv Empty
مُساهمةموضوع: رد: تجميع العناصر باستخدام span وdiv   تجميع العناصر باستخدام span وdiv Emptyالسبت يونيو 16, 2018 11:16 pm

يعطيكم العافية على الطرح تجميع العناصر باستخدام span وdiv 837876428
كل الاحترام تجميع العناصر باستخدام span وdiv 433646733
الرجوع الى أعلى الصفحة اذهب الى الأسفل
http://medialive.pro
Mohamed Sobhi
عضو ذهبي 

Mohamed Sobhi

ذكر
الاسد
عدد المساهمات : 3330
نقاط النشاط : 3996
السٌّمعَة : 57
بلد العضو : تجميع العناصر باستخدام span وdiv Egypt10
العمر : 24

تجميع العناصر باستخدام span وdiv Empty
مُساهمةموضوع: رد: تجميع العناصر باستخدام span وdiv   تجميع العناصر باستخدام span وdiv Emptyالسبت يوليو 21, 2018 11:44 am

درس اكثر من رائع شكرا لك على الطرح
لا تحرمنا من جديدك وردة حمراء


تجميع العناصر باستخدام span وdiv P_947wjtlk1
الرجوع الى أعلى الصفحة اذهب الى الأسفل
مصطفى ستيتان
عضو محترف 

مصطفى ستيتان

ذكر
عدد المساهمات : 1130
نقاط النشاط : 1203
السٌّمعَة : 11
بلد العضو : تجميع العناصر باستخدام span وdiv Ioao10

تجميع العناصر باستخدام span وdiv Empty
مُساهمةموضوع: رد: تجميع العناصر باستخدام span وdiv   تجميع العناصر باستخدام span وdiv Emptyالإثنين يوليو 23, 2018 9:03 am

جزاكم الله كل خير 


سبحان الله والحمدلله ولا إله إلا الله 
 
تجميع العناصر باستخدام span وdiv Do
الرجوع الى أعلى الصفحة اذهب الى الأسفل
https://www.elmanal.com
D.YouSSef
سوبر الإبداع 

D.YouSSef

ذكر
الدلو
عدد المساهمات : 6124
نقاط النشاط : 7079
السٌّمعَة : 34
بلد العضو : تجميع العناصر باستخدام span وdiv Morocc10
العمر : 52

تجميع العناصر باستخدام span وdiv Empty
مُساهمةموضوع: رد: تجميع العناصر باستخدام span وdiv   تجميع العناصر باستخدام span وdiv Emptyالخميس أغسطس 30, 2018 3:36 am

جزاك الله خيراعلى العطاء
والدرس الجميل والمفيد
 واصل تالقك
الرجوع الى أعلى الصفحة اذهب الى الأسفل
 
تجميع العناصر باستخدام span وdiv
الرجوع الى أعلى الصفحة 
صفحة 1 من اصل 1

صلاحيات هذا المنتدى:لاتستطيع الرد على المواضيع في هذا المنتدى
منتدى الابداع العربي ::  تقنيات احلى منتدى ::  تقنيات أحلى منتدى :: دروس تعلم لغات البرمجة-
انتقل الى:  
جميع الحقوق محفوظة لمنتدى الإبداع العربي 2020