🌟 مقدمة تحفيزية : “مرحباً بك يا فنان الكود! هل سألت نفسك يوماً: كيف نجعل زر ‘ابدأ الآن’ يلمع باللون الأخضر الجذاب ، بينما يظل زر ‘اتصل بنا’ هادئاً باللون الأزرق ؟ اليوم سنمتلك ‘مفتاح التحكم’ . في هذا الدرس ، ستتعلم كيف تنادي كل عنصر في موقعك باسمه الخاص . تخيل أنك تنادي أحد طلابك في ‘أكاديمية قياوي’ باسمه ليعطيك إجابة محددة.. هذا بالضبط ما سنفعله مع الأزرار والعناصر!”
🏗️ 1. المفهوم البرمجي (الأسماء المستعارة) في عالم CSS ، لدينا طريقتان لتمييز العناصر: الفئة (Class) : نستخدمها عندما نريد إعطاء نفس ‘الزي الموحد’ لمجموعة أزرار . (مثل : كل أزرار الأكاديمية لها نفس الحجم) .
المعرف (ID) : نستخدمه عندما نريد تمييز عنصر واحد فقط ‘بهوية فريدة’. (مثل : الزر الرئيسي في الصفحة الذي لا يشبهه أحد) .
💻 2. التطبيق العملي (كيف تصمم أزرارك ؟) لنجعل الأزرار في موقعك تعمل بشكل مستقل ، سنكتب هذا الكود في ملف الـ HTML :
<button class="btn-academy" id="python-btn">مسار بايثون</button> <button class="btn-academy" id="web-btn">مسار الويب</button>
الآن، لنعطِهم الألوان في ملف الـ CSS :
/* التنسيق المشترك لكل الأزرار (Class) */
.btn-academy {
padding: 15px 30px;
border-radius: 10px;
cursor: pointer;
font-weight: bold;
}
/* لون خاص بمسار بايثون (ID) */
#python-btn {
background-color: #3776ab; /* لون بايثون الشهير */
color: white;
}
/* لون خاص بمسار الويب (ID) */
#web-btn {
background-color: #e34c26; /* لون الويب الجذاب */
color: white;
}
💡 لماذا هذا الدرس هو مفتاح نجاح موقعك؟ باستخدام الـ ID، يمكنك ربط كل زر بصفحة مستقلة تماماً. عندما يضغط الطالب على الزر ذو المعرف #python-btn فإنه يعرف تماماً أنه في طريقه لتعلم أقوى لغات البرمجة، وهذا ما يجعل تجربة المستخدم في أكاديميتك احترافية وسهلة .
🎯 تحدي المبرمج المبدع : “قم بإنشاء زر ثالث في صفحتك ، أعطه فئة (Class) الأزرار السابقة ليرث حجمها ، ولكن أعطه معرفاً (ID) جديداً باسم law-btn ولونه باللون الذهبي ليمثل قسم الاستشارات القانونية في أكاديميتنا. هل نجحت في تمييزه؟”
🚀 ما هي المفاجأة القادمة؟ رائع! الآن أزرارك لها ألوان وأسماء. لكن.. ماذا لو جعلنا هذه الأزرار “تتحرك” أو “يتغير لونها” بمجرد أن يضع الطالب الفأرة عليها؟ انتظرني في الدرس الثالث: سحر الحركة (Hover Effects) !