مرحبًا بك في تعلم لغة CSS.

تتناول هذه الدورة التدريبية أساسيات CSS وتقسّمها إلى أجزاء واضحة وسهلة الفهم. خلال الوحدات التدريبية التالية، ستتعرّف على طريقة عمل الجوانب الأساسية في CSS وكيفية استخدامها بفعالية في مشاريعك. استخدِم لوحة القائمة بجانب شعار "تعرَّف على CSS" للتنقّل بين الوحدات.

ستتعرّف على أساسيات CSS، مثل نموذج المربّع والتتالي والتحديد، وFlexbox، والشبكة، وz-index. ستتعرّف أيضًا على الدوال وأنواع الألوان والتدرجات والخصائص المنطقية والميراث لتصبح مطوّر واجهة أمامية شاملًا وجاهزًا للتعامل مع أي واجهة مستخدم.

تتضمّن كل وحدة عروضًا توضيحية تفاعلية وتقييمات ذاتية لاختبار معلوماتك. بالإضافة إلى التعلّم من خلال القراءة والعروض التوضيحية، تتضمّن كل موضوع حلقة بودكاست كطريقة أخرى للتعلّم ومواصلة توسيع معرفتك.

تم تصميم هذه الدورة التدريبية لكلّ من مطوّري CSS المبتدئين والمتقدّمين. يمكنك الاطّلاع على السلسلة من البداية إلى النهاية للحصول على فهم عام لـ CSS من أعلى إلى أسفل، أو يمكنك استخدامها كمرجع لمواضيع محدّدة متعلقة بالتصميم. إذا كنت مبتدئًا في مجال تطوير الويب بشكل عام، يمكنك الاطّلاع على Learn HTML للتعرّف على كيفية كتابة الترميز وربط أوراق الأنماط.

في ما يلي ما ستتعرّف عليه:

نموذج المربّع

بما أنّ كل ما يعرضه CSS هو عبارة عن مربّع، فإنّ فهم طريقة عمل CSS Box Model هو أساس CSS.

أدوات الاختيار

لتطبيق CSS على عنصر، عليك تحديده. توفّر لك CSS عددًا من الطرق المختلفة لتنفيذ ذلك، ويمكنك استكشافها في هذه الوحدة.

التداخل

يمكن أن يؤدي تضمين قواعد أنماط CSS إلى تنظيم أوراق الأنماط بشكل أفضل وتسهيل قراءتها وصيانتها.

التتالي

في بعض الأحيان، يمكن تطبيق قاعدتَي CSS أو أكثر على عنصر واحد. تعرَّف على كيفية اختيار المتصفّح للغة التي سيستخدمها وكيفية التحكّم في هذا الاختيار.

التحديد

تلقي هذه الوحدة نظرة أكثر تفصيلاً على التحديد، وهو جزء أساسي من التتالي.

الاكتساب

ترث بعض خصائص CSS إذا لم تحدّد لها قيمة. يمكنك التعرّف على طريقة عمل هذه الميزة وكيفية الاستفادة منها في هذه الوحدة.

Color

هناك عدة طرق مختلفة لتحديد اللون في CSS. تتناول هذه الوحدة قيم الألوان الأكثر استخدامًا.

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

تعرَّف على كيفية تحديد حجم العناصر باستخدام CSS، والعمل مع الوسيط المرن للويب.

التصميم

نظرة عامة على طرق التنسيق المختلفة التي يمكنك الاختيار من بينها عند إنشاء مكون أو تنسيق صفحة

Flexbox

‫Flexbox هي آلية تخطيط مصمَّمة لتخطيط مجموعات من العناصر في بُعد واحد. تعرَّف على كيفية استخدامها في هذه الوحدة.

الشبكة

توفّر CSS Grid Layout نظام تخطيط ثنائي الأبعاد يتحكّم في التخطيط في الصفوف والأعمدة. استكشِف كل مزايا الشبكة.

السمات المنطقية

ترتبط الخصائص والقيم المنطقية والنسبية بتدفق النص، وليس بالشكل المادي للشاشة. تعرَّف على كيفية الاستفادة من هذا الأسلوب الأحدث في CSS.

السمات المخصّصة

تتيح لك السمات المخصّصة، أو متغيّرات CSS، تنظيم القيم وإعادة استخدامها في CSS، ما يجعل الأنماط أكثر مرونة وأسهل في الفهم.

المسافة

تعرَّف على كيفية اختيار أفضل طريقة لترك مسافات بين العناصر في طريقة العرض التي تستخدمها والمكوّن الذي تنشئه.

العناصر الزائفة

العنصر الزائف هو مثل إضافة عنصر إضافي أو استهدافه بدون الحاجة إلى إضافة المزيد من HTML. ولدى هذه الأدوار مجموعة متنوعة من المهام، ويمكنك التعرّف عليها في هذه الوحدة.

الفئات الزائفة

تتيح لك الفئات الزائفة تطبيق CSS استنادًا إلى تغييرات الحالة. وهذا يعني أنّ تصميمك يمكن أن يتفاعل مع إدخالات المستخدم، مثل عنوان بريد إلكتروني غير صالح.

الحدود

يوفر الحد إطارًا للمربعات. تعرَّف على كيفية تغيير حجم الحدود ونمطها ولونها باستخدام CSS.

الظلال

هناك عدة طرق لإضافة ظلال إلى النصوص والعناصر في CSS. تعرَّف على كيفية استخدام كل خيار والمهام التي تم تصميمه من أجلها.

التركيز

فهم أهمية التركيز في تطبيقات الويب ستتعرّف على كيفية إدارة التركيز، وكيفية التأكّد من أنّ مسار التنقّل في صفحتك يعمل بشكل جيد لكل من المستخدمين الذين يستعينون بالماوس والمستخدمين الذين يستعينون بلوحة المفاتيح للتنقّل.

المؤشرات

يُعد المؤشر طريقة أساسية لمعرفة المستخدمين العناصر التي يتفاعلون معها. في هذه الوحدة، ستتعرّف على كيفية تنسيق المؤشرات في ظروف معيّنة.

فهرس Z وسياقات التراص

تعرَّف على كيفية التحكّم في ترتيب العناصر التي يتم عرضها فوق بعضها البعض باستخدام z-index وسياق التراص.

تحديد موضع التثبيت

توفّر ميزة "تحديد موضع عنصر الارتساء في CSS" طريقة لتحديد موضع عنصر بشكل تصريحي بالنسبة إلى عنصر آخر.

النافذة المنبثقة ومربّع الحوار

النافذة المنبثقة هي أي عنصر يتضمّن سمة نافذة منبثقة، وهي مفيدة لمجموعة كبيرة من الأنماط التفاعلية، بما في ذلك تلميحات الأدوات والتنبيهات والإشعارات وغير ذلك.

الدوال

تتضمّن CSS مجموعة من الدوال المضمّنة. تعرَّف على بعض الوظائف الرئيسية وكيفية استخدامها.

المسارات والأشكال والقص والإخفاء

تمنح المسارات والأشكال والقص والتمويه المطوّرين القدرة على عرض أشكال معقّدة في CSS من خلال مجموعة متنوعة من الوظائف التي يمكن أن تقدّم تجارب لا تُنسى للمستخدمين.

التدرّجات

في هذه الوحدة، ستتعرّف على كيفية استخدام الأنواع المختلفة من التدرجات اللونية المتاحة في CSS. يمكن أن تنشئ التدرجات مجموعة كبيرة من التأثيرات المفيدة، بدون الحاجة إلى تطبيقات الرسومات لإنشاء الصور.

الصور المتحركة

تُعدّ الرسوم المتحركة طريقة رائعة لإبراز العناصر التفاعلية وإضافة لمسة من المرح والتشويق إلى تصاميمك. تعرَّف على كيفية إضافة تأثيرات الرسوم المتحركة والتحكّم فيها باستخدام CSS.

الفلاتر

تتيح لك الفلاتر في CSS تطبيق تأثيرات كنت تعتقد أنّها ممكنة فقط في تطبيقات الرسومات. في هذه الوحدة، يمكنك التعرّف على البرامج المتوفّرة.

أوضاع المزج

يمكنك إنشاء تأثيرات تركيبية من خلال دمج طبقتين أو أكثر، والتعرّف على كيفية عزل صورة بخلفية بيضاء في هذه الوحدة حول أوضاع المزج.

القوائم

تتألف القائمة من الناحية البنيوية من عنصر حاوية قائمة مملوء بعناصر قائمة. في هذه الوحدة، سنتعرّف على كيفية تنسيق جميع أجزاء القائمة.

العدادات

توفّر CSS عدة طرق للتحكّم في العدادات في قائمة لحالات استخدام مختلفة. في هذه الوحدة، سنتعرّف على كيفية التحكّم في العدادات في قائمة.

التأثيرات الانتقالية

تعرَّف على كيفية تحديد عمليات الانتقال بين حالات أحد العناصر. استخدِم عمليات الانتقال لتحسين تجربة المستخدم من خلال تقديم ملاحظات مرئية عن تفاعل المستخدم.

View Transitions for SPAs

توفّر لك انتقالات العرض طريقة لعرض الاستمرارية أو السياق بين الصفحات في تطبيقك ذي الصفحة الواحدة.

Overflow

يشير مصطلح "تجاوز السعة" إلى كيفية التعامل مع المحتوى الذي لا يتناسب مع حجم الحاوية الرئيسية المحدّد. في هذه الوحدة، ستفكّر بطريقة إبداعية وتتعرّف على كيفية تصميم المحتوى الذي يتجاوز حجم الحاوية.

الخلفيات

تعرَّف على كيفية تصميم خلفيات المربّعات باستخدام CSS.

النص والكتابة

تعرَّف على كيفية تنسيق النصوص على الويب.

طلبات البحث في الحاويات

على عكس طلبات البحث عن الوسائط، تتيح لك طلبات البحث عن الحاويات إجراء تعديلات أكثر تحديدًا على العناصر استنادًا إلى حجم العناصر الرئيسية أو الحاويات وحالتها.

الخاتمة والخطوات التالية

مراجع إضافية لمساعدتك في اتخاذ خطواتك اللاحقة

إذًا، هل أنت مستعد لتعلُّم CSS؟ لنبدأ.