سجل التعديلات

الفرق مقارنةً بالنسخة السابقة

+ **CSS** (Cascading Style Sheets) تحدد مظهر عناصر HTML: الألوان والخطوط والتخطيط والحركة.
  
+ ## المحددات والتتالي
+ 
+ القاعدة = محدد + تصريحات. عند تعارض القواعد يفوز الأعلى **خصوصية** (specificity)، ثم الأحدث ترتيباً.
+ 
+ ```css
+ .card { padding: 1rem; border-radius: 12px; }
+ .card > h2 { font-size: 1.125rem; }
+ ```
+ 
+ ## نموذج الصندوق
+ 
+ كل عنصر صندوق من: المحتوى، `padding`، `border`، `margin`. القاعدة الشائعة:
+ 
+ ```css
+ *, *::before, *::after { box-sizing: border-box; }
+ ```
+ 
+ تجعل العرض المحدد يشمل الحشو والحدود فيسهل حساب التخطيط.
+ 
+ ## Flexbox وGrid
+ 
+ - **Flexbox** لصف أو عمود واحد: `display:flex; gap:.5rem; align-items:center`.
+ - **Grid** للتخطيط ثنائي الأبعاد:
+ 
+ ```css
+ .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 للنص العادي).