مسار تعلّم CSS

خارطة طريق مطور CSS لعام 2026. من المحددات ونموذج الصندوق إلى Flexbox وGrid والرسوم المتحركة والهندسة الحديثة مع تطبيق عملي.

CSS يحوّل HTML البسيط إلى واجهات مصقولة ومتجاوبة. يغطي هذا المسار الطيف الكامل — من المحددات ونموذج الصندوق إلى أنظمة التخطيط الحديثة مثل Flexbox وGrid، مرورًا بالتصميم المتجاوب والرسوم المتحركة ومتغيرات CSS. ستتعلم أيضًا أفضل ممارسات الهندسة مثل اصطلاحات التسمية وأنماط البنية وتحسين الأداء للحفاظ على أوراق الأنماط قابلة للصيانة.

آخر تحديث: 2026-10-08

الموضوع

مسار تعلّم CSS

الخطوط
الألوان
القياس والميراث
الطول والنسب المئوية
مسارات تعلّم ذات صلة
دوال CSS
تقنيات التخطيط
CSS — دروس CSS · بنية CSS
مقدمة — بنية CSS
أساسيات CSS — بنية CSS
القواعد — بنية CSS
المحددات البسيطة — مُحددات CSS
محددات الدمج — مُحددات CSS
محددات السمات — مُحددات CSS
تنسيق النص — نص وخطوط CSS
أولوية CSS — مُحددات CSS
الشفافية — عرض ورؤية CSS ·
قيم ووحدات CSS
الخلفية — خلفية CSS · · ·
العرض — عرض ورؤية CSS ·
نموذج الصندوق — نموذج الصندوق CSS ·
الموضع — تموضع CSS ·
سياق التكديس — تموضع CSS ·
الجداول
القوائم
الصور والفلاتر
الفئات الزائفة
العناصر الزائفة
التخطيطات — نموذج الصندوق CSS
الرسوم المتحركة — رسوم متحركة CSS · انتقال وفلتر CSS · تحويل CSS ·
التصميم المتجاوب — أساسيات CSS المتجاوب · تخطيط CSS المتجاوب
المنهجيات — اتفاقية تسمية BEM CSS
السمات القياسية
الواجهة الأمامية — عرض خارطة الطريق
JavaScript — عرض خارطة الطريق
HTML — عرض خارطة الطريق
ما هي CSS؟ — بنية CSS
تطوير الواجهة الأمامية
HTML — دروس HTML
CSS — بنية CSS
JavaScript — دروس جافاسكريبت
الخصائص والقيم — بنية CSS
المحددات — مُحددات CSS
التعريفات — بنية CSS
عائلات الخطوط (font-family) — نص وخطوط CSS
الأنماط المضمّنة — طرق إدخال CSS
الأنماط الداخلية — طرق إدخال CSS
الأنماط الخارجية — طرق إدخال CSS
ترتيب التتالي — مُحددات CSS
العنصر (element) — بنية CSS
ارتفاع السطر — نص وخطوط CSS ·
ظلال النص — نص وخطوط CSS ·
تنويع الخط (font-variant) — نص وخطوط CSS
وجه الخط (@font-face) — نص وخطوط CSS
نمط الخط (font-style) — نص وخطوط CSS
اختصار الخط (font) — نص وخطوط CSS
حجم الخط (font-size) — نص وخطوط CSS
لون الخلفية — ألوان CSS ·
مضمّن (inline) — عرض ورؤية CSS
كتلة (block) — عرض ورؤية CSS
صورة الخلفية — خلفية CSS
تدرج الخلفية — خلفية CSS ·
موضع الخلفية — خلفية CSS
كتلة مضمّنة (inline-block) — عرض ورؤية CSS
none — عرض ورؤية CSS
الرؤية (visibility) — عرض ورؤية CSS
جدول (table)
وحدات CSS
الكلمات المفتاحية العامة
RGB (rgb) — ألوان CSS
RGBA (rgba) — ألوان CSS
HSL (hsl) — ألوان CSS
HSLA (hsla) — ألوان CSS
وحدات الطول المطلقة
الفئة (class) — مُحددات CSS
المعرّف (id) — مُحددات CSS
العام (*) — مُحددات CSS
التجميع (grouping) — مُحددات CSS
الأخ المجاور (+) — مُحددات CSS
الفئة (class) — مُحددات CSS
الطفل (child) — مُحددات CSS
الأخ التالي (~) — مُحددات CSS
تحويل النص — نص وخطوط CSS
تباعد النص — نص وخطوط CSS
محاذاة النص — نص وخطوط CSS ·
زخرفة النص — نص وخطوط CSS ·
اللون — ألوان CSS ·
الاتجاه — نص وخطوط CSS ·
إرفاق الخلفية — خلفية CSS
العرض/الارتفاع (width/height) — عرض وارتفاع وفيضان CSS · · ·
الموضع النسبي (relative) — تموضع CSS ·
الموضع المطلق (absolute) — تموضع CSS ·
الموضع اللاصق (sticky) — تموضع CSS ·
الموضع الثابت (fixed) — تموضع CSS ·
الموضع الساكن (static) — تموضع CSS ·
الحشوة (padding) — هوامش وحشو CSS ·
الهامش (margin) — هوامش وحشو CSS ·
الحدود (border) — حدود ونصف قطر الحدود CSS ·
المخطط (outline) — حدود ونصف قطر الحدود CSS ·
ظلال الصندوق (box-shadow) — تدرجات وظلال CSS ·
الألوان المسمّاة (named) — ألوان CSS
HEX (#hex) — ألوان CSS
وحدات الطول النسبية
أنواع وحدات أخرى
الدوال الرياضية
دوال المقارنة
دوال الخصائص المخصصة — متغيرات CSS
دوال مرجع السمات
التخطيط التدفقي — نموذج الصندوق CSS
الطفو — طفو ومسح CSS · ·
تخطيط متعدد الأعمدة
المرن (flex) — حاوية Flexbox CSS · عناصر Flexbox CSS · · · · ·
الشبكة (grid) — حاوية Grid CSS · عناصر Grid CSS · ممارسة Grid CSS · · · · ·
استعلامات الوسائط — أساسيات CSS المتجاوب
استعلامات الحاوية
الطباعة المتجاوبة — أساسيات CSS المتجاوب
Sass
CSS Modules
CSS-in-JS
PostCSS
BEM — اتفاقية تسمية BEM CSS