دورة تعلم css الدرس الرابع

السلام عليكم ورحمة الله وبركاتة ,, تعلمنا طريقة كتابة وسوم بلغة الــ Css وفي درس اليوم سنشرح اشياء مهمة في تأثيرات الــ Css

وهيا الــ Div والــ class والــ Id 

اذا استرجعنا المـثال القديم  الذي كان كالتالي :-

فتظهر لنا النتيجه بهذا الشكل

ماذا اذا نحن نريد وضع اكثر من وسم كــ H1 , H2 , H3 ,P

يمكننا في هذه الحالة اتباع احدي الطريقتين 

الطريقة الاولي هيا التطبيق علي كل وسم من هذه الوسوم بنفس الطريقة السابقة كالتالي

 كل ما تلاحظة هوا اننا كتبنا كل وسم من هذه الوسوم وداخلة كود اللون الذي نحن نريده وتظهر لنا النتيجه كــالتالي

ولكن هذه الطريقة متعبة بعض الشئ حيث انك سوف تتعامل مع الاف الوسوم لذا يجب علينا اختصار الطرق لنصل الي الافضل

لذا فنحن سوف نستخدم كل من  DIV , Id , class

دعونا نتعرف علي كيفية استخدامهم

كما تلاحظ كتبنا وسوم الــ HTML كما هيا ولكننا كما تلاحظ وضعنا قبل الوسوم 

وسمي الــ Div

كما اعطيناهم معرف (( Id ))

اليك الان لتعرف ما هيا الفائدة

 وسم الــ div الذي وضعناه اي تحديد هذه العناصر بالكامل واعيناه مسمي ID وذلك كي نفرق هذا الـ Div بينه وبين غيره
حيث انك عندما تقوم بصميم موقع سوف تعمل علي مئات الــ Div لذا نعطية ما يسمي الـــ Id كي نميزة عن غيرة

اذآ انت رأيت كيفية اضافة الــ Div والــ Id  كيف نستعملهم في الــ Css

يكون كالتالي

ماذا لاحظ انني قد وضعت علامة # ومن ثم كتبت aa 
علامة الشباك هذه دائمآ توضع قي الــ ID  والــ aa  هذا ما سميته انا في الــ ID يمكنك اختيار الاسم تريده وكما تشاء
ومن ثم طبقت كل هذا في خطوة وحده بدلآ من كتابة كل وسم وهذه هيا فائدة الــ ID

نأتي الان الي class

الـ class لا يختلف ابدآ عن الــ ID الا في طريقة الكتابة ولكنه نسخة مطابقة للـ ID لذا دعنا نري

نكتب كود الــ HTML كالتالي 

تكون هذه طريقة كتابة الــ Class

نجرب الان كيف يتم التأثير عليه في الــ CSS

ماذا تلاحظ !!! كل ما فعلناه هوا اننا بدلنا # بــــ .

هذا هوا الفرق بينهما عند كتابتهما في الــ css

 دعنا نعرف الان ما الفرق بينهما !!!!

لا يوجد فرق بين كلآ منهم ابدآ في طريقة التأثير يكون الفرق في الكتابة فقط ولا يفرق شئآ بين كل منهما 
والافضل بينهما هوا الــ ID حيث ان الــ ID هوا في الـــ HTML5 وتم استبداله بــ الــ Class 
استخدم منهما ما يحلو لك فلا يوجد اي فرق بينهم

## من الدرس الاول الي الدرس الرابع في هذه الدورة فقط اعلمك اساسيات قد يكون الشرح غير موضح ولكن من الدرس التالي سيكون الشرح مفصلآ وسنعيد كل ماشرحناه من قبل علي اكثر من مثال ##