programmes CSS البداية أساسيات CSS

أساسيات CSS

تاريخ الرفع : منذ 4 أشهر آخر تحديث : منذ 4 أشهر beginner

ابدأ الاختبار

الخصائص التي ستستخدمها يوميًا

تعرف كيف تُبنى القاعدة. وإليك الخصائص الأساسية للون والنص ونموذج الصندوق والتخطيط.

خصائص شائعة

كل عنصر هو صندوق: المحتوى، ثم الحشو (padding)، ثم الحدّ (border)، ثم الهامش (margin). فهم ذلك هو مفتاح المسافات والأبعاد.

.card {
  padding: 16px;     /* داخل */
  border: 1px solid #ddd;
  margin: 12px;      /* خارج */
}

استخدم box-sizing: border-box

يجعل width يشمل الحشو والحدّ، فتصبح الأبعاد متوقّعة. وكثيرًا ما يُضبط عالميًا: * { box-sizing: border-box; }

يرتّب Flexbox العناصر في صف أو عمود مع محاذاة سهلة — مثالي لأشرطة التنقّل والبطاقات والتوسيط.

.row {
  display: flex;
  gap: 16px;
  justify-content: space-between;
  align-items: center;
}

تجنّب البكسلات الثابتة في كل مكان

فضّل الوحدات النسبية (rem، %، fr) و Flexbox/Grid ليتكيّف تخطيطك مع أي شاشة.

ما الفرق بين margin و padding؟

الهامش (margin) مسافة خارج الحدّ؛ والحشو (padding) مسافة داخله بين المحتوى والحدّ.

Flexbox أم Grid؟

Flexbox للتخطيط أحادي البعد (صف أو عمود)؛ و Grid للتخطيط ثنائي البعد (صفوف وأعمدة معًا).

px أم em أم rem؟

استخدم rem لأحجام الخطوط والمسافات (يتناسب مع جذر الصفحة)، وpx فقط عند الحاجة لحجم ثابت فعلًا.