لغة CSS

CSS (Cascading Style Sheets) تحدد مظهر عناصر HTML: الألوان والخطوط والتخطيط والحركة.

المحددات والتتالي

القاعدة = محدد + تصريحات. عند تعارض القواعد يفوز الأعلى خصوصية (specificity)، ثم الأحدث ترتيباً.

.card { padding: 1rem; border-radius: 12px; }
.card > h2 { font-size: 1.125rem; }

نموذج الصندوق

كل عنصر صندوق من: المحتوى، padding، border، margin. القاعدة الشائعة:

*, *::before, *::after { box-sizing: border-box; }

تجعل العرض المحدد يشمل الحشو والحدود فيسهل حساب التخطيط.

Flexbox وGrid

• Flexbox لصف أو عمود واحد: display:flex; gap:.5rem; align-items:center.
• Grid للتخطيط ثنائي الأبعاد:

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 1rem; }

التصميم المتجاوب واللغة العربية

• ابدأ بالجوال ثم أضف استعلامات @media (min-width: …).
• استخدم الخصائص المنطقية (margin-inline-start، padding-inline، inset-inline-end) بدل left/right فيعمل التصميم في الاتجاهين RTL وLTR دون تعديل.

أخطاء شائعة

• تثبيت الارتفاعات (height: 300px) لمحتوى نصي متغير.
• عناصر الشبكة لا تنكمش بسبب min-width: auto؛ أضف min-width: 0 عند الحاجة.
• تباين ألوان ضعيف (الحد الأدنى 4.5:1 للنص العادي).