CSS

أضف بعض الأناقة إلى صفحاتك

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

الأسس

مبتدئ - الأساسيات خطوة بخطوة

• ربط CSS بصفحةاكتشف ما هي CSS، وكيف تربطها بصفحة HTML، وكيف تكتب أول قاعدة لك على الإطلاق.
• المُحدِّدات الأساسية والألوانتعلّم استهداف العناصر بدقة عبر مُحدِّدات العنصر والفئة والمعرّف، ثم طبّق عليها الألوان.
• نموذج الصندوقافهم كيف أن كل عنصر صندوق مكوّن من محتوى وحشو وحدّ وهامش، وأتقِن box-sizing.
• النص والخطوطاختر خطًا عبر font-family، ثم اضبط الحجم والوزن وتباعد الأسطر للحصول على نص مريح للقراءة.
• أولى التخطيطاتميّز العناصر الكتلية من العناصر السطرية وتعلّم التقنيات الكلاسيكية لتوسيط عنصر.

التقدّم

متوسط - بناء مشاريع حقيقية

• التتالي والخصوصية والوراثةتعلّم كيف تتوقّع أيّ قاعدة CSS ستفوز باستخدام الخصوصية، واستفد من الوراثة لكتابة قدر أقل من الشيفرة.
• Flexbox: المحاور، justify/align، gap، flex-growأتقِن محوري Flexbox لمحاذاة عناصرك وتوسيطها وتوزيعها في التخطيطات اليومية.
• Grid: الأعمدة والصفوف والمناطقأنشئ معارض صور وتخطيطات صفحات كاملة بأعمدة CSS Grid وصفوفها ومناطقها المسمّاة.
• التموضع: relative، absolute، fixed، sticky، z-indexثبّت الشارات والرؤوس والنوافذ المنبثقة بالضبط حيث تريد، باستخدام مواضع CSS وسلّم z-index محكم الإدارة.
• التصميم المتجاوب: استعلامات الوسائط، الوحدات النسبيةكيّف واجهاتك مع كل حجم شاشة عبر منهج mobile-first، واستعلامات الوسائط، والوحدات rem و% وvw.

الإتقان المتقدّم

محترف - أنماط متقدّمة والأداء

• متغيرات CSS ودالتا calc/clampأتقن الخصائص المخصصة، وكيفية تحللها أثناء التشغيل ضمن التتالي، ودالتي calc() وclamp() للواجهات المرنة.
• الانتقالات والرسوم المتحركة: @keyframes وtransform والتوقيتحرّك على المُركِّب باستخدام transform وopacity، ونظّم @keyframes، واحترم تفضيلات المستخدمين بشأن الحركة.
• المحدِّدات الحديثة: ‏:has و‏:is و‏:where و‏:nth-child المتقدماستفد من الأصناف الزائفة الدالِّية الحديثة للتحديد بناءً على المحتوى، وجمّع المحدِّدات دون تضخيم الخصوصية، واستهدف الأنماط المعقدة.
• معمارية CSS: BEM والنهج القائم على الأدوات وتنظيم الملفاتقارِن بين BEM والنهج القائم على الأدوات، ومقايضاتهما الحقيقية داخل الفريق، ونظّم ملفاتك بطبقات التتالي.
• استعلامات الحاوية وتعشيش CSSاجعل مكوّناتك متجاوبة مع حاويتها بدلًا من المنفذ، ونظّم أوراق أنماطك بالتعشيش الأصيل.

الاحتراف

خبير - البنية والتفاصيل الداخلية والحالات الحدّية

• خط أنابيب العرض: إعادة التخطيط، إعادة الرسم، والتركيبافهم المراحل الأربع لعرض المتصفح لتعرف بالضبط أي خصائص CSS مكلِفة وكيف تعمل will-change في الخفاء.
• طبقات التتالي (@layer) و@scopeأتقن معياري التتالي الجديدين - الطبقات وقرب النطاق - لهندسة أنماطك دون حروب خصوصية.
• الألوان والدوال المتقدمة: oklch وcolor-mix وmin/maxاستثمر فضاءات الألوان الإدراكية، وصياغة الألوان النسبية، والدوال الرياضية المُنمَّطة لبناء أنظمة تصميم يحسبها المتصفح نيابة عنك.
• الشبكات الاحترافية: subgrid وauto-fit وminmaxابنِ شبكات ذاتية التكيّف دون استعلامات وسائط، وحاذِ المكوّنات المتداخلة على مسارات الأصل باستخدام subgrid.
• التفاعلات الحديثة: scroll-snap وانتقالات العرضنسّق التمرير المغناطيسي، وانتقالات الحالة التي يحرّكها المتصفح، والاحترام الصارم لـ prefers-reduced-motion.