ندعم المواقع والمنتديات بتقنية css3

مرحباً بكم في شبكة المطوّر

لمطوري مواقع الويب والمنتديات





الملاحظات

ستايلات vBulletin 3.8.x - خاص باستايلات الجيل الثالث فقط لمنتديات الـvb


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

ستايلات vBulletin 3.8.x

خاص باستايلات الجيل الثالث فقط لمنتديات الـvb

 
إضافة رد المشاهدات 3176 الردود 6 أدوات الموضوع إبحث في الموضوع

   رقم المشاركة [ 1 ]
قديم 04-02-2011, 08:27 PM
AlM6weR [ مؤسس شبكة المطوّر ]
غير متصل
اسمي : أبومحمد, من : الرياض, أهتم بـ البرمجه - تطوير المواقع, .
07-06-2010 6,882 9243 saudi arabia
232   تم شكره 550 مرة في 443 مشاركة
افتراضي شرح طريقة اضافة class جديد          



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

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

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

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

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



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

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

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



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

مثال :

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



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

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

اولا : نقوم بانشاء كلاس جديد بأسم ( 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; 
هذة بعض خصائص الكلاس الاساسية التي يمكن اضافتها في كلاس جديد ، حيث يوجد العديد من الخصائص الاخرى الكثيرة التي سنتعلمها في الدروس الاخرى باذن الله تعالى ..


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

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


أبوعبدالله   المعجبون بمشاركة AlM6weR




وَيَوْمَ يَعَضُّ الظَّالِمُ عَلَى يَدَيْهِ يَقُولُ يَا لَيْتَنِي اتَّخَذْتُ مَعَ الرَّسُولِ سَبِيلاً (27) يَا وَيْلَتِي لَيْتَنِي لَمْ أَتَّخِذْ فُلانًا خَلِيلاً (28) لَقَدْ أَضَلَّنِي عَنِ الذِّكْرِ بَعْدَ إِذْ جَاءَنِي وَكَانَ الشَّيْطَانُ لِلإِنسَانِ خَذُولاً (29)

alm6wergmail.com - alm6werlive.com - alm6weryahoo.com

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


التعديل الأخير تم بواسطة AlM6weR ; 22-11-2014 الساعة 10:27 AM

+ Google

إقتباس

إقتباس

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



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




إقتباس

إقتباس

   رقم المشاركة [ 3 ]
قديم 05-02-2011, 01:00 AM
AlM6weR [ مؤسس شبكة المطوّر ]
غير متصل
اسمي : أبومحمد, من : الرياض, أهتم بـ البرمجه - تطوير المواقع, .
07-06-2010 6,882 9243 saudi arabia
232   تم شكره 550 مرة في 443 مشاركة
افتراضي رد: شرح طريقة اضافة class جديد


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

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





وَيَوْمَ يَعَضُّ الظَّالِمُ عَلَى يَدَيْهِ يَقُولُ يَا لَيْتَنِي اتَّخَذْتُ مَعَ الرَّسُولِ سَبِيلاً (27) يَا وَيْلَتِي لَيْتَنِي لَمْ أَتَّخِذْ فُلانًا خَلِيلاً (28) لَقَدْ أَضَلَّنِي عَنِ الذِّكْرِ بَعْدَ إِذْ جَاءَنِي وَكَانَ الشَّيْطَانُ لِلإِنسَانِ خَذُولاً (29)

alm6wergmail.com - alm6werlive.com - alm6weryahoo.com

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

إقتباس

إقتباس

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


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



إقتباس

إقتباس

   رقم المشاركة [ 5 ]
قديم 26-01-2013, 03:32 PM
أبوعبدالله [ المستشار ]
غير متصل
اسمي : AbuAbdullah, من : بيشة, أهتم بـ البرمجة - الشعر - القراءة, .
07-06-2010 2,248 3142 saudi arabia
189   تم شكره 113 مرة في 93 مشاركة
افتراضي رد: شرح طريقة اضافة class جديد


شكرا جزيلا لك


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



إقتباس

إقتباس

   رقم المشاركة [ 6 ]
قديم 26-01-2013, 10:45 PM
AlM6weR [ مؤسس شبكة المطوّر ]
غير متصل
اسمي : أبومحمد, من : الرياض, أهتم بـ البرمجه - تطوير المواقع, .
07-06-2010 6,882 9243 saudi arabia
232   تم شكره 550 مرة في 443 مشاركة
افتراضي رد: شرح طريقة اضافة class جديد


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



إقتباس

إقتباس

   رقم المشاركة [ 7 ]
قديم 11-03-2013, 01:10 PM
ملك الحصريات [ مطور مشارك ]
غير متصل
اسمي : لم تتم الإضافة, من : لم تتم الإضافة, أهتم بـ لم تتم الإضافة, .
25-02-2013 1,559 1573 egypt
193   تم شكره 3 مرة في 3 مشاركة
افتراضي رد: شرح طريقة اضافة class جديد


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



إقتباس

إقتباس

إضافة رد

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

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

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


الساعة الآن 07:49 AM

من نحن

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

أهدافنا

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

خدماتنا

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

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

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

مواقع صديقة

تجربتي
بلاك فور

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

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

الحقوق

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

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

08-06-2010