انتقل إلى محتوى الدرس

Applying Reusable Styles with Class إعادة استخدام التنسيق بخاصية class

تعلم كيفية تنظيم وهيكلة عناصر الويب باستخدام خاصيتي class و id، واستيعاب إعادة استخدام التنسيق والقفز الداخلي وأسبقية التحديد في CSS وتخزين البيانات المخصصة عبر data.
4 صفوف تعليمية
لغة HTML
0 مشاهدة

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي
يحقق تطبيق التنسيقات عبر خاصية class المبدأ البرمجي الشهير بعدم تكرار الكود البرمجي؛ فمن خلال تجميع حزمة من قواعد CSS تحت اسم فئة موحد، يمكنك إكساب مئات المكونات المتطابقة في موقعك خطوطاً وألواناً ومساحات حشو متناسقة بلمسة واحدة.
الصف 2 كود برمجي
HTML
<div class="card">
  <h3 class="card-title">Design Systems</h3>
  <p class="card-body">Consistent UI components.</p>
</div>

<div class="card">
  <h3 class="card-title">Accessibility</h3>
  <p class="card-body">Inclusive user experiences.</p>
</div>
الصف 3 شرح توضيحي
في ملفات تنسيق CSS، يتم استهداف الفئات بوضع نقطة تسبق اسم الفئة مثل .card أو .btn-primary. ويحمل محدد الفئة وزناً متوازناً في ميزان الأسبقية الحسابي بمقدار (0,1,0)، مما يتيح للمطورين تخصيص وتعديل المظهر بمرونة دون الدخول في صراعات أسبقية معقدة.
الصف 4 ملاحظة هامة