دورة برمجة مواقع الانترنت - لغة css - الدرس 3 - تحديد العناصر المراد تنسيقها باستخدام id , class

السلام عليكم ورحمة الله وبركاته
في هذا الدرس سنتعرف على شرح تفصيلي لكل من المفهومين الصف class والمعرف id والذان يفيدان في تحديد العناصر المراد تنسيقها في كود css و تكاد لا تخلو صفحة انترنت من استعمالهما
حيث أنه بعد أن نضع كود التنسيق (css) فإنه علينا أن نحدد الوسم المراد تنسيقه و يتم ذلك بإحدى الطريقتين id , class

أولاً : شرح المعرف id

تستخدم الخاصة id داخل أي وسم Html من أجل تسمية العنصر بمعرف خاص به
والمعرف Id اسم خاص بالعنصر لا يتكرر لغيره أي لا يجوز أن نسمي عنصرين بنفس الاسم

مثال :

لاحظ الكود التالي:

أهلاً وسهلاً بكم في


دورة برمجة مواقع الانترنت في منتدى طه سوفت

نلاحظ استخدام الوسم P لإنشاء فقرة وأننا وضعنا وسمين منه
وإذا أمعنا النظر إلى الثاني فإننا نجد استخدام المعرف id داخل الوسم p وذلك من أجل تسمية هذا الجزء حيث سميناه هنا tahasoft
إذاً الآن هناك فرق بين كلاً من الوسم الأول والثاني حيث أن الثاني يحمل اسم tahasoft مع أن كلاً منهما من النوع p

الآن داخل كود css من أجل تحديد بعض التنسيقات للجزء المسمى tahasoft نستخدم الإشارة (#) بجانب الاسم

مثال :

أهلاً وسهلاً بكم


في دورة برمجة مواقع الانترنت على منتدى طه سوفت

لاحظ جزء css من الكود السابق
حيث أننا وضعنا

#tahasoft

للدلالة على أن التنسيقات الموجودة بين قوسين

text-align:center;

color:red;

هي خاصة فقط بالعناصر التي تحمل الاسم tahasoft
عند التنفيذ سنجد :


مع التذكير كما في كل درس بأن صفحة تجريب الكود هي : http://tahasoft.com/code.htm
أو استخدم البرامج المذكورة في بداية الدورة مع حفظ الملف إلى ملف html وشغله باستخدام المتصفح لترى النتيجة.

مثال (2) :

أهلاً وسهلاً بكم


في دورة برمجة مواقع الانترنت على منتدى طه سوفت

لاحظ هنا أننا خصصنا كل وسم p باسم خاص وبتنسيقات خاصة
وهكذا : كلما أردنا وضع تنسيقات لجزء خاص من صفحة الانترنت نسمي الجزء المراد تنسيقه لوحده
علماً أنه يمكن تكرار الاسم

ملاحظة

: لا تسمي العناصر باسم يبدأ برقم وإلا فلن يعمل الكود على متصفح firefox

ثانياً : شرح الصف class

كلمة class وتعني الصف أو الصنف أو الفئة ... تستخدم لتسمية مجموعة عناصر باسم واحد
( والفرق بين id , class هو أن id تستخدم كاسم معرف لعنصر واحد , أما class فهي تستخدم كاسم صف لمجموعة عناصر أي قابلة للتكرار أما كنتيجة فهما متشابهان جداً )
وكمثال يمكن إضافة عدة وسوم p أخرى تحمل اسم tahasoft كاسم صنف خاص بهم على سبيل المثال حيث أنها كلها ستأخذ التنسيق الخاص بـ tahasoft
وفي الصفوف ( أو الصنوف class ) نضع نقطة في قسم css للتعريف عن الصنف
( أما في المعرف نضع # كما ذكرنا سلفاً )
وداخل الوسم نكتب

class="اسم الصنف"

مثال :

أهلاً وسهلاً بكم


في دورة برمجة مواقع الانترنت على منتدى طه سوفت


tahasoft.com


learn css with us

النتيجة:



أمثلة أخرى متنوعة لتعزيز مفهومي class , id و طرق استخدامهم
مثال 1 :
بدايةً أود أن أنوه إلى نقطة مهمة وهي أننا في حال أردنا تنسيق كافة الفقرات p الموجودة في الصفحة التالية :

 

أهلاً وسهلاً بكم
 

في دورة برمجة مواقع الانترنت على منتدى طه سوفت
 

 

الكود السابق سيعطي النتجية التالية :

أهلاً وسهلاً بكم
في دورة برمجة مواقع الانترنت على منتدى طه سوفت

ماذا لو أردنا أن نجعل كافة الفقرات p في الصفحة السابقة بلون أزرق وحجم خط 30 بكسل
في هذه الحالة نحن لسنا بحاجة إلى تسمية كل فقرة P بمعرف خاص ووضع التنسيق css
و ايضاً لسنا بحاجة لتسميتهم في صنف واحد ووضع css للصنف المسمى
بل يمكننا أن نضع كود css بكل بساطة لكافة الوسوم P كالتالي :

p{

color:blue;

font-size:30px;

}

كود الصفحة كاملاً سيكون كالتالي

 

أهلاً وسهلاً بكم
 

في دورة برمجة مواقع الانترنت على منتدى طه سوفت
 

 

والنتيجة:

أهلاً وسهلاً بكم

في دورة برمجة مواقع الانترنت على منتدى طه سوفت

أي أنه بشكل عام لو أردنا تنسيق كافة الوسوم من نوع معين فإننا نضع اسم الوسم ثم بين قوسين نضع تنسيقات css

مثال 2:
بفرض أننا نريد أن تكون كافة محتويات صفحة الانترنت بلون خط أزرق
أي أن أي شيء يكتب داخل الصفحة يظهر بلون أزرق فكيف يتم ذلك ؟
الحل :
نضع اسم الوسم body ونضع بين قوسين في جزء css التنسيقات المطلوبة
لاحظ ما يلي :

 

أهلاً وسهلاً بكم
 

في دورة برمجة مواقع الانترنت على منتدى طه سوفت
 

tahasoft


 

النتيجة :

أهلاً وسهلاً بكم
في دورة برمجة مواقع الانترنت على منتدى طه سوفت
tahasoft

وفي الصفحة السابقة أي شيء يكتب يظهر بلون أزرق
مثال 3 :
أنشئ صفحة انترنت بحيث أن الوسوم التي تنتمي للصف tahasoft والتي هي من نوع p فقط تظهر بلون أزرق
الحل :

 

أهلاً وسهلاً بكم
 

في دورة برمجة مواقع الانترنت على منتدى طه سوفت
 

tahasoft


 

النتيجة:

أهلاً وسهلاً بكم
في دورة برمجة مواقع الانترنت على منتدى طه سوفت
tahasoft

لاحظ في المثال السابق أن كلاً من الوسمين الأخيرين p و h4 يحملان اسم صنف واحد tahasoft
ولكن التنسيقات ( اللون الازرق ) ظهر فقط على الوسم p
وذلك لأننا كتبنا في جزء css ما يلي:

p.tahasoft{

color:blue;

}

وهي تعني : تطبيق التنسيقات على كافة الوسوم p التي تنتمي للصف tahasoft
احفظها جيداً فستمر عليك كثيراً في الناحية العملية.

مثال 4 :
سنكرر نفس المثال السابق ولكن بدلاً من استخدام الصف class سنضع اسم معرف id
لاحظ الفرق بين المثال التالي والسابق علماً أن النتيجة واحدة :

 

أهلاً وسهلاً بكم
 

في دورة برمجة مواقع الانترنت على منتدى طه سوفت
 

tahasoft


 

النتيجة:

أهلاً وسهلاً بكم
في دورة برمجة مواقع الانترنت على منتدى طه سوفت
tahasoft

النتيجة :

مثال 5 :
استخدام صفين معاً

 

أهلاً وسهلاً بكم
 

في دورة برمجة مواقع الانترنت على منتدى طه سوفت
 

tahasoft


 

لاحظ أنه في جزء css وضعنا صفين tahasoft1, tahasoft2
ولكل منهما تنسيقات خاصة
وفي الوسم h4 أردنا الجمع بين كلاً من تنسيقات الصفين السابقين
والعملية تتم بوضع اسم الصفوف داخل class مع الفصل بينهم بمسافة مسطرة وهذه ايضاً مهمة لا تنساها

مثال 6 :
استخدم الصف class والمعرف Id معاً في وسم واحد

 

أهلاً وسهلاً بكم
 

في دورة برمجة مواقع الانترنت على منتدى طه سوفت
 

tahasoft


 

النتيجة :


مثال 7 :
شرح بالفيديو لكيفية استخدام css كملف خارجي مع id , class وباستخدام برنامج notepad++

رابط تحميل الفيديو مع الملفات التي في الشرح و بحجم 1 م ب على mediafire :
http://www.mediafire.com/?u9u3z6fs7uvhiea
الحجم بعد فك الضغط 64.4 م ب



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