تعلمو

ماهي سلسلة (دورة) تعلم لغة Css الشاملة ؟

تضم هذه السلسلة دورة كاملة لتعلم لغة Css من الصفر بترتيب منظم للشروحات، واحضار الشرح من أفضل المصادر المجربة حيث في حال لم يعجبك شرح درس من مصدر معين يمكنك رؤية مصدر آخر.

سيضم هذا الموضوع الفقرات التالية (يكفيك رؤية الزيرو أو حسونة)

• ملخص نصي لشرح اليوم
• طريقة تمميز الوسوم وتنسيقها بعمل id وكلاس Class للزيرو 
• الجزء الأول من شرح حسونة ، شرح Class selector
• الجزء الثاني من شرح حسونة ، شرح Id selector

أولاً : ملخص نصي للشرح

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

هنا نقوم بإعطاء خاصية id لهذا البراجراف ونسميه بأي اسم نريده كالتالي
<p id="t3llmo">I am paragraph</p>

ثم في ملف Css نجعل لون هذا البراجراف احمر بتلك الطريقة

#t3lmo {

color:red;

}

نلاحظ أن علامة الشباك # تعني أنك تريد تنسيق Id معين وt3lmo هو اسم الid الذي قمنا بإعطاءه بوسم البراجراف.

الآن ماذا لو أردت تمييز عناصر معينة وليس عنصر معين ، مثلاً 3 براجراف من أصل 5 براجراف في الصفحة ، هل ستقوم بإعطاء جميع العناصر نفس الId ؟ 

تلك الطريقة ليست بالصحيحة لأن id تستخدم في الاساس باسم معين لعنصر واحد ، فمثلاً في الطبيعة كل شخص لديك id أي رقم بطاقة واحد فقط فلذلك كلمة id تستخدم باسم معين مع عنصر واحد ، وفي حال أردت استخدامها مع عنصر آخر ستعطي له اسم آخر

ولكنك الآن تريد تعطي نفس التنسيق لتلك العناصر فليس من المنطقي اعطاء id باسم مختلف لكل عنصر وتنسيق كل عنصر وحده وأنت ستطبق نفس التأثير علي جميع العناصر.

هنا لتلك المشكلة يوجد في Css ما يسمي بClasses ، فمثلاً نريد أن نعطي تأثير ل3 براجرافات من الصفحة من أصل 5 ، سنعطي لكل براجراف نفس اسم الكلاس

<p class="t3lmo">paragraph 1></p>

<p class="t3lmo">paragraph 2></p>

<p class="t3lmo">paragraph 3></p>

ثم نقوم في Css باعطاء الخاصية التي نريدها لكل كلاس باسم t3lmo كالتالي

.t3lmo{ color:red; }

فنلاحظ أن النقطة تعبر عن أننا نريد تنسيق كلاس معين ، وt3lmo هو اسم هذا الكلاس

وستتعرف علي ذلك بالتفصيل خلال فيديوهات شرح اليوم

ثانياً : شرح تمييز العناصر للزيرو

ثالثاً: الجزء الأول من شرح أكادمية حسونة

رابعاً: الجزء الثاني من شرح أكادمية حسونة

  

شكرا لك .. الى اللقاء