ندعم منتديات vBulletin بتقنية Css3
A L 6 W E R

[ شرح ] شرح طريقة اضافة class جديد


شرح طريقة اضافة class جديد

رقم الموضوع : 3097

ستايلات vBulletin 3.8.x

 
المشاهدات 4292 الردود 11 أدوات الموضوع إبحث في الموضوع

   رقم المشاركة [ 1 ]
04-02-2011, 08:27 PM
تابعني على facebook
تابعني على twitter
تابعني على google plus
تابعني على youtube
معهد المطوّر
1
تابعني على instaram
الصورة الرمزية لـ AlM6weR
AlM6weR
متواجد
[ مؤسس معهد المطوّر ]
اسمي : أبومحمد , من : الرياض , أهتم بـ البرمجة - تطوير المواقع .
عضو لدية أكثر من 6000 مشاركةعضو لدية أكثر من 6000 مشاركةعضو لدية أكثر من 6000 مشاركةعضو لدية أكثر من 6000 مشاركةعضو لدية أكثر من 6000 مشاركةعضو لدية أكثر من 6000 مشاركة
تاريخ الإنضمام07-06-2010 عدد المشاركات7,673 تقييم المستوى14407 الدولةsaudi arabia
الإعجابات التي قدمها للأعضاء 280   تم شكره 733 مرة في 560 مشاركة
افتراضي شرح طريقة اضافة class جديد



شرح طريقة اضافة class جديد

السلام عليكم ورحمة الله وبركاته

سنتحدث اليوم عن الكلاس ' class '

ماهو الكلاس class؟
الكلاس هو مجموعة من الخصائص التي يتم الاستناد اليها في جميع انحاء المنتدى مثل :
1- الجداول
2- الاطارات
3- الحقول
وما شابه ذلك

صورة توضيحية لأحد هذة الخصائص الكلاس class :

alm6wer.com

نشاهد في الصورة العديد من الخانات مثل :
1- الخلفية
2- لون الخط
3- شكل الخط
4- حجم الخط
5- نوع الخط
6- زخرفة الخط
هذة هي الخانات الاساسية للكلاس class
عدا ذلك يمكن كتابة في الخانه اليسرى من الكلاس وهي :
خواص CSS الإضافية
ويمكن ايضا كتابة العديد من الخصائص الاخرى بهذة الخانه مثل :
1- الطول
2- العرض
3- حدود الجدول
والكثير من الاضافات الاخرى ...

سؤال مهم جدا ً
كيف يمكن اضافة كلاس class جديد يمكن الاستناد اليه لعدد من الجداول او الحقول بحيث لا يستند الى الكلاسات الاساسية ؟؟

توجد خانة اسفل CSS رئيسي كما في الصورة :

alm6wer.com

يمكن من خلال هذة الخانة انشاء كلاس class جديد يتم الاستناد اليه لحالات خاصة في احدى خانات المنتدى

مثال :

في قالب الموضوع توجد خانه لتاريخ الموضوع اعلى قالب البوست بت ليجاسي
نريد تغيير شكل الجدول بخصائص معينة وليكن كما في الصورة :

alm6wer.com

كما تشاهدون هناك لون للخليفة وحدود للجدول خاصة فقط لهذا الجدول بالتحديد وليس لجميع جدوال المنتدى

فكيف يتم ذلك ؟؟

اولا : نقوم بانشاء كلاس جديد بأسم ( hs1 ) ونضيفه اليه خواص CSS الإضافية أسفل CSS رئيسي
ونكتب الكود التالي :

HTML & CSS

.hs1 {
background#D6EFF4;
border1px solid #B1DEE6;
font11px Tahoma;
color#000000;

شرح الكود :
اضفنا متغير بأسم ( hs1 )
ثم اسندنا له الخصائص في سطر جديد
background = لون الخلفية
border = حدود الجدول
font = حجم ونوع الخط
color = لون الخط

ثانيا : نقوم بنسخ قالب البوست بت ليجاسي في الفرنت بيج ليتم التعديل عليه ( التعديل فقط على اسم المتغير أو بما يعرف بالكلاس )
نقوم بحذف متغيير الكلاس وهو ( thead ) ونضيف المتغير الجديد ( hs1 ) ليصبح هكذا :

HTML & CSS

<td class="hs1" 


=============================

عرفنا في بداية الشرح ما هو الكلاس وكيف يمكن لنا انشاء كلاس جديد

الان سأضع بعض الامثله المهمة والاسئلة الشائعه ..

س1: هل يمكن الاستناد الى متغيرين ( أي عدد 2 كلاس ) وكيف يتم ذلك ؟؟
ج1 : نعم يمكن الاستناد الى متغيرين
ويتم بالصورة التالية :

HTML & CSS

<td class="hs1" AND "hs2" 
أو بوضع مسافة بين الكلاسين

HTML & CSS

<td class="hs1 hs2" 
قد يتسأل شخص لماذا نستند الى متغيرين مع العلم بأننا نستطيع ان نضيف الخصائص الاخرى في نفس الكلاس أو المتغير الاول ؟
الجواب : قد تضطر لعمل كلاس جديد يتم الاستناد له في جميع الجداول ولكن تريد لأحد هذي الجداول خاصية معينة دون باقي الجداول ، لذلك يتم الاستناد الى متغيرين في جدول واحد أو حقل معين .

س2 : ماهي أهم الخصائص للكلاس وكيف يتم كتابة الكود الخاص بها ؟
ج2 : تنقسم الخصائص لعدة اقسام مثل :

لون الخلفية :

HTML & CSS

background#FF0000; 
صورة للخلفية

HTML & CSS

background-image:url('رابط الصورة'); 
لون الخط

HTML & CSS

color#000000; 
شكل الخط

HTML & CSS

fontbold 11px Tahoma
حدود الجدول في جميع الخانات

HTML & CSS

border1px solid #FF0000; 
حدود الجدول الخانه العليا فقط

HTML & CSS

border-top1px solid #FF0000; 
حدود الجدول الخانه السفلى فقط

HTML & CSS

border-bottom1px solid #FF0000; 
حدود الجدول الخانه اليمنى فقط

HTML & CSS

border-right1px solid #FF0000; 
حدود الجدول الخانه اليسرى فقط

HTML & CSS

border-left1px solid #FF0000; 
حدود الجدول للخانه اليمنى واليسرى فقط

HTML & CSS

border-left1px solid #FF0000;
border-right1px solid #FF0000; 
هذة بعض خصائص الكلاس الاساسية التي يمكن اضافتها في كلاس جديد ، حيث يوجد العديد من الخصائص الاخرى الكثيرة التي سنتعلمها في الدروس الاخرى باذن الله تعالى ..


ارجو ان اكون وفقت في هذا الشرح ، فأن اصبت فمن الله ، وان اخطأت فمن نفسي والشياطين

جميع الحقوق محفوظه لكل مسلم ، ولكن يرجى عند نقل الموضوع ذكر المصدر ..





كلمات البحث - معهد المطور ارشفة, ستايل, كود, هاك, html, css, java, BBcode, seo, php, JavaScript, Product, Style

أبوعبدالله, سهارى ديزاين   [ 2 ] معجبون بمشاركة AlM6weR


توقيعي

عَنْ جُوَيْرِيَةَ بنت الحارث، أم المؤمنين رضي الله عنها؛ أَنَّ النَّبِيَّ صلى الله عليه وسلم خَرَجَ مِنْ عِنْدِهَا بُكْرَةً، حِينَ صَلَّى الصُّبْحَ وَهِيَ فِي مَسْجِدِهَا، ثُمَّ رَجَعَ بَعْدَ أَنْ أَضْحَى، وَهِيَ جَالِسَةٌ، فَقَالَ:
((مَا زِلْتِ عَلَى الْحَالِ الَّتِي فَارَقْتُكِ عَلَيْهَا؟)) قَالَتْ: نَعَمْ، قَالَ النَّبِيُّ صلى الله عليه وسلم: ((لَقَدْ قُلْتُ بَعْدَكِ أَرْبَعَ كَلِمَاتٍ، ثَلَاثَ مَرَّاتٍ، لَوْ وُزِنَتْ بِمَا قُلْتِ مُنْذُ الْيَوْمِ لَوَزَنَتْهُنَّ:
سُبْحَانَ اللهِ وَبِحَمْدِهِ عَدَدَ خَلْقِهِ، وَرِضَا نَفْسِهِ وَزِنَةَ عَرْشِهِ، وَمِدَادَ كَلِمَاتِهِ)).

alm6wergmail.com - alm6werlive.com - alm6weryahoo.com

ندعم جميع منتديات الجيل الثالث

مواقعنا :
  1. www.6wer.net
  2. www.6wer.com
  3. www.alm6wer.com





   رقم المشاركة [ 2 ]
05-02-2011, 12:18 AM
9
عضو معهد المطور
ندعم جميع منتديات
الجيل الثالث بتقنية CSS3
الشامخه
غير متواجد
[ مطوّر مبدع ]
اسمي : •»وَمآتَوْفٍيقيٍ اٍلآ بآللـہ«• , من : غَايةُ عُمرِى [ جَنةً ] فِيها أسِـير..| , أهتم بـ آلتصميمـ..وآلقرآءهـ..| .
عضو لدية أكثر من 1500 مشاركةعضو لدية أكثر من 1500 مشاركةعضو لدية أكثر من 1500 مشاركةعضو لدية أكثر من 1500 مشاركةعضو لدية أكثر من 1500 مشاركة
تاريخ الإنضمام08-06-2010 عدد المشاركات1,754 تقييم المستوى1947 الدولةsaudi arabia
  تم شكره 5 مرة في 5 مشاركة
افتراضي رد: شرح طريقة اضافة class جديد


[size="3"][font="arial"]
مهما كتبت لك من عبارات الشكر والثناء فلن تفي بجهدك الجبَّار .
دوماً تبهرنا بحضورك المميز وعطائك الذي نتعلم منه في كل مره.,
شكراً لكْ من الأعماق ...تستحق التقييم وبجدارهـ. + الفايف ستارز .
سلمتْ وبُوركتْ





   رقم المشاركة [ 3 ]
05-02-2011, 01:00 AM
تابعني على facebook
تابعني على twitter
تابعني على google plus
تابعني على youtube
معهد المطوّر
1
تابعني على instaram
الصورة الرمزية لـ AlM6weR
AlM6weR
متواجد
[ مؤسس معهد المطوّر ]
اسمي : أبومحمد , من : الرياض , أهتم بـ البرمجة - تطوير المواقع .
عضو لدية أكثر من 6000 مشاركةعضو لدية أكثر من 6000 مشاركةعضو لدية أكثر من 6000 مشاركةعضو لدية أكثر من 6000 مشاركةعضو لدية أكثر من 6000 مشاركةعضو لدية أكثر من 6000 مشاركة
تاريخ الإنضمام07-06-2010 عدد المشاركات7,673 تقييم المستوى14407 الدولةsaudi arabia
الإعجابات التي قدمها للأعضاء 280   تم شكره 733 مرة في 560 مشاركة
افتراضي رد: شرح طريقة اضافة class جديد


العفو اختي الشامخه
اسعدني مرورك وتقييمك للموضوع ، وان شاء الله سنكمل مسيرتنا نحو التـطــّور
كما يسعدني دائما المناقشة في الموضوع لمن استصعب عليه امر

بالتوفيق للجميع ..




توقيعي

عَنْ جُوَيْرِيَةَ بنت الحارث، أم المؤمنين رضي الله عنها؛ أَنَّ النَّبِيَّ صلى الله عليه وسلم خَرَجَ مِنْ عِنْدِهَا بُكْرَةً، حِينَ صَلَّى الصُّبْحَ وَهِيَ فِي مَسْجِدِهَا، ثُمَّ رَجَعَ بَعْدَ أَنْ أَضْحَى، وَهِيَ جَالِسَةٌ، فَقَالَ:
((مَا زِلْتِ عَلَى الْحَالِ الَّتِي فَارَقْتُكِ عَلَيْهَا؟)) قَالَتْ: نَعَمْ، قَالَ النَّبِيُّ صلى الله عليه وسلم: ((لَقَدْ قُلْتُ بَعْدَكِ أَرْبَعَ كَلِمَاتٍ، ثَلَاثَ مَرَّاتٍ، لَوْ وُزِنَتْ بِمَا قُلْتِ مُنْذُ الْيَوْمِ لَوَزَنَتْهُنَّ:
سُبْحَانَ اللهِ وَبِحَمْدِهِ عَدَدَ خَلْقِهِ، وَرِضَا نَفْسِهِ وَزِنَةَ عَرْشِهِ، وَمِدَادَ كَلِمَاتِهِ)).

alm6wergmail.com - alm6werlive.com - alm6weryahoo.com

ندعم جميع منتديات الجيل الثالث

مواقعنا :
  1. www.6wer.net
  2. www.6wer.com
  3. www.alm6wer.com





   رقم المشاركة [ 4 ]
28-02-2012, 05:09 PM
4228
عضو معهد المطور
ندعم جميع منتديات
الجيل الثالث بتقنية CSS3
محسن المغربي
غير متواجد
[ مصمم محترف وعضو ماسي ]
تاريخ الإنضمام27-02-2012 عدد المشاركات22 تقييم المستوى49
  تم شكره 8 مرة في 3 مشاركة
افتراضي رد: شرح طريقة اضافة class جديد


شكرا جزيلآآآآ شكرا جزيلآآآآ




   رقم المشاركة [ 5 ]
26-01-2013, 03:32 PM
تابعني على facebook
تابعني على twitter
تابعني على google plus
تابعني على youtube
تجربتي
2
تابعني على instaram
الصورة الرمزية لـ أبوعبدالله
أبوعبدالله عضو موثوق في معهد المطور
غير متواجد
[ المستشار ]
اسمي : AbuAbdullah , من : بيشة , أهتم بـ البرمجة - الشعر - القراءة .
عضو لدية أكثر من 2000 مشاركةعضو لدية أكثر من 2000 مشاركة
تاريخ الإنضمام07-06-2010 عدد المشاركات2,306 تقييم المستوى3219 الدولةsaudi arabia
الإعجابات التي قدمها للأعضاء 230   تم شكره 124 مرة في 102 مشاركة
افتراضي رد: شرح طريقة اضافة class جديد


شكرا جزيلا لك


استفدت كثيرا من الموضوع




توقيعي

تجربتي
الداعم الرسمي


   رقم المشاركة [ 6 ]
26-01-2013, 10:45 PM
تابعني على facebook
تابعني على twitter
تابعني على google plus
تابعني على youtube
معهد المطوّر
1
تابعني على instaram
الصورة الرمزية لـ AlM6weR
AlM6weR
متواجد
[ مؤسس معهد المطوّر ]
اسمي : أبومحمد , من : الرياض , أهتم بـ البرمجة - تطوير المواقع .
عضو لدية أكثر من 6000 مشاركةعضو لدية أكثر من 6000 مشاركةعضو لدية أكثر من 6000 مشاركةعضو لدية أكثر من 6000 مشاركةعضو لدية أكثر من 6000 مشاركةعضو لدية أكثر من 6000 مشاركة
تاريخ الإنضمام07-06-2010 عدد المشاركات7,673 تقييم المستوى14407 الدولةsaudi arabia
الإعجابات التي قدمها للأعضاء 280   تم شكره 733 مرة في 560 مشاركة
افتراضي رد: شرح طريقة اضافة class جديد


اهلا بالشباب ، سعيد بمروركم واتمنى لكم المتعه والفائده ..




   رقم المشاركة [ 7 ]
11-03-2013, 01:10 PM
5280
عضو معهد المطور
ندعم جميع منتديات
الجيل الثالث بتقنية CSS3
ملك الحصريات
غير متواجد
[ مطوّر مبدع ]
عضو لدية أكثر من 1500 مشاركةعضو لدية أكثر من 1500 مشاركةعضو لدية أكثر من 1500 مشاركةعضو لدية أكثر من 1500 مشاركةعضو لدية أكثر من 1500 مشاركة
تاريخ الإنضمام25-02-2013 عدد المشاركات1,544 تقييم المستوى1560 الدولةegypt
الإعجابات التي قدمها للأعضاء 193   تم شكره 3 مرة في 3 مشاركة
افتراضي رد: شرح طريقة اضافة class جديد


جــزآك الله خير على طرحك القيم و المفيد ..
والله يعطيك العافية ..ونفع بكـ
واثااابكـ جنة الفردوس بغير حساااب ولا سابقة عذاب
وجعله ربى فى ميزااان حسناااتك
امنياتي لك بدوام التألق والابداع
تحياتي لسموك




   رقم المشاركة [ 8 ]
31-07-2016, 12:04 AM
تابعني على facebook
تابعني على twitter
تابعني على google plus
تابعني على youtube
القلم الدهبي
8131
الصورة الرمزية لـ برادة
برادة
متواجد
[ مشرف ]
اسمي : رشيد , من : الدار البيضاء المغرب , أهتم بـ النت البرامج تقافة عامة .
تاريخ الإنضمام23-07-2016 عدد المشاركات170 تقييم المستوى187 الدولةmorocco
الإعجابات التي قدمها للأعضاء 22   تم شكره 5 مرة في 3 مشاركة
افتراضي رد: شرح طريقة اضافة class جديد


شرح مميز وواضح جزاكم الله خير الجزاء




   رقم المشاركة [ 9 ]
01-08-2016, 01:01 AM
تابعني على facebook
تابعني على twitter
تابعني على google plus
تابعني على youtube
معهد المطوّر
1
تابعني على instaram
الصورة الرمزية لـ AlM6weR
AlM6weR
متواجد
[ مؤسس معهد المطوّر ]
اسمي : أبومحمد , من : الرياض , أهتم بـ البرمجة - تطوير المواقع .
عضو لدية أكثر من 6000 مشاركةعضو لدية أكثر من 6000 مشاركةعضو لدية أكثر من 6000 مشاركةعضو لدية أكثر من 6000 مشاركةعضو لدية أكثر من 6000 مشاركةعضو لدية أكثر من 6000 مشاركة
تاريخ الإنضمام07-06-2010 عدد المشاركات7,673 تقييم المستوى14407 الدولةsaudi arabia
الإعجابات التي قدمها للأعضاء 280   تم شكره 733 مرة في 560 مشاركة
افتراضي رد: شرح طريقة اضافة class جديد


سعيد بمرورك واستمتاعك اخي رشيد




توقيعي

عَنْ جُوَيْرِيَةَ بنت الحارث، أم المؤمنين رضي الله عنها؛ أَنَّ النَّبِيَّ صلى الله عليه وسلم خَرَجَ مِنْ عِنْدِهَا بُكْرَةً، حِينَ صَلَّى الصُّبْحَ وَهِيَ فِي مَسْجِدِهَا، ثُمَّ رَجَعَ بَعْدَ أَنْ أَضْحَى، وَهِيَ جَالِسَةٌ، فَقَالَ:
((مَا زِلْتِ عَلَى الْحَالِ الَّتِي فَارَقْتُكِ عَلَيْهَا؟)) قَالَتْ: نَعَمْ، قَالَ النَّبِيُّ صلى الله عليه وسلم: ((لَقَدْ قُلْتُ بَعْدَكِ أَرْبَعَ كَلِمَاتٍ، ثَلَاثَ مَرَّاتٍ، لَوْ وُزِنَتْ بِمَا قُلْتِ مُنْذُ الْيَوْمِ لَوَزَنَتْهُنَّ:
سُبْحَانَ اللهِ وَبِحَمْدِهِ عَدَدَ خَلْقِهِ، وَرِضَا نَفْسِهِ وَزِنَةَ عَرْشِهِ، وَمِدَادَ كَلِمَاتِهِ)).

alm6wergmail.com - alm6werlive.com - alm6weryahoo.com

ندعم جميع منتديات الجيل الثالث

مواقعنا :
  1. www.6wer.net
  2. www.6wer.com
  3. www.alm6wer.com




   رقم المشاركة [ 10 ]
03-11-2016, 02:06 AM
تابعني على facebook
تابعني على twitter
تابعني على google plus
سهارى ديزاين لخدمات التصاميم
8209
عضو معهد المطور
ندعم جميع منتديات
الجيل الثالث بتقنية CSS3
سهارى ديزاين
غير متواجد
[ مطوّر نشيط ]
اسمي : سهارى ديزاين , من : القاهرة , أهتم بـ التصاميم والبرمجيات .
تاريخ الإنضمام02-11-2016 عدد المشاركات62 تقييم المستوى74 الدولةegypt
الإعجابات التي قدمها للأعضاء 5   تم شكره 3 مرة في 3 مشاركة
افتراضي رد: شرح طريقة اضافة class جديد


ما شاء الله تبارك الله
عمل مفيد ومجهود يستحق الشكر والامتنان
جزاك الله خيرا أخى ابو محمد
مودتى




 

مواقع النشر (المفضلة)

الكلمات الدلالية (Tags)
class, اضافة, جديد, شرح, طريقة

أدوات الموضوع إبحث في الموضوع
إبحث في الموضوع:

البحث المتقدم

الانتقال السريع

المواضيع المتشابهه للموضوع: شرح طريقة اضافة class جديد
الموضوع كاتب الموضوع المنتدى مشاركات آخر مشاركة
[ BBcode ] طريقة اضافة زر موضوع جديد داخل الموضوع AlM6weR اكواد منتديات vBulletin 3.x.x 4 17-08-2017 10:33 PM
[ طلب ] ممكن شرح تركيب اضافة تحرير كود html جديد عند اضافة الموضوع مسترقيس طلبات و مشاكل منتديات vBulletin 3.x.x 9 18-01-2015 07:12 PM
[ BBcode ] إضافة زر موضوع جديد بجوار اضافة رد host اكواد منتديات vBulletin 3.x.x 6 27-06-2013 09:56 PM
[ طلب ] طريقة تنصيب نسخة ديجى شات دمعة عاشق طلبات و مشاكل منتديات vBulletin 3.x.x 2 07-01-2012 12:01 PM


الساعة الآن 04:05 PM

توافق أكواد المعهد

تم التحقق بنجاح هذا الموقع من أخطاء XHTML  Valid XHTML 1.0 Transitional

تم التحقق بنجاح هذا الموقع من أخطاء CSS3  Valid CSS!

ترتيب الكسا alexa

من نحن

معهد المطور
موقع يهتم بتطوير المواقع والمنتديات وتحسين بيئة عمل المواقع العربية

أهدافنا

نسعى جاهدين لرقي المواقع العربية وتحسين بيئتها من خلال مناقشة كل ما يخص التطوير بوجه عام

خدماتنا

نمد يد العون لجميع اصحاب المواقع ، ونجيب عن جميع استفساراتهم قدر الامكان
كما نتطلع دائما لطرح الجديد والمفيد لهم

الدعم الفني المدفوع

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

مواقع صديقة

تجربتي

لماذا هذه المواقع ؟

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

الحقوق

Powered by vBulletin@Version 3.8.7 .Copyright ©2000 - 2017, Jelsoft Enterprises Ltd.
المشاركات والمواضيع تعبر عن رأي كاتبها وليس بالضرورة رأي المطوّر
وجميع الحقوق محفوظة لاصحابها

تاريخ انشاء الموقع

08-06-2010

4 6 7 10 11 12 13 15 16 17 18 19 20 21 26 28 33 38 54 56 59 60 69 74 75 76 77 85 86 87 96 97 104 105 119 121 122 130 131 133