تقسّم هذه الدورة أساسيات CSS إلى أجزاء واضحة وسهلة الاستيعاب. من خلال الوحدات القليلة التالية، ستتعرف على الجوانب الأساسية لـ CSS وكيفية استخدامها بفعالية في مشاريعك. استخدم جزء القائمة إلى جانب شعار "تعلم CSS" للتنقل بين الوحدات.
ستتعلم أساسيات CSS مثل نموذج المربع، والتتالي والخصوصية، وflexbox، والشبكة، وz-index. وستتعرف أيضًا على الدوال وأنواع الألوان والتدرجات والخصائص المنطقية والتوريث لجعلك مطورًا جيدًا للواجهة الأمامية وجاهزًا للتعامل مع أي واجهة مستخدم.
كل وحدة مليئة بالعروض التوضيحية التفاعلية والتقييمات الذاتية لاختبار معلوماتك. بالإضافة إلى التعلُّم من خلال القراءة والعروض التوضيحية، هناك حلقة بودكاست مرفقة بكل موضوع كطريقة أخرى للتعلّم ومواصلة توسيع نطاق معرفتك.
تم إنشاء هذه الدورة التدريبية لمطوّري خدمة CSS المبتدئين والمتقدمين. يمكنك تصفُّح السلسلة من البداية إلى النهاية للحصول على معلومات عامة حول لغة CSS من الأعلى إلى الأسفل، أو يمكنك استخدامها كمرجع لموضوعات أنماط محدّدة. بالنسبة إلى المبتدئين في مجال تطوير الويب بشكل عام، يُرجى الاطّلاع على مقالة تعلّم HTML لمعرفة كيفية كتابة الترميز وربط أوراق الأنماط.
إليك ما ستتعلمه:
نموذج Box
بما أنّ جميع ما تعرضه CSS هي عبارة عن مربّع، فإنّ فهم آلية عمل نموذج CSS Box هو أساس أساسي لخدمة CSS.
أدوات الاختيار
لتطبيق CSS على عنصر، تحتاج إلى تحديده. توفّر لك خدمة CSS عددًا من الطرق المختلفة لإجراء ذلك، ويمكنك استكشافها في هذه الوحدة.
الشلال
في بعض الأحيان، يمكن تطبيق قاعدتين أو أكثر من قواعد CSS على أحد العناصر. تعرَّف على الطريقة التي يختار بها المتصفّح الإعدادات التي سيستخدمها، وكيفية التحكّم في هذا الاختيار.
الدقة
تأخذ هذه الوحدة نظرة أعمق على الخصوصية، وهي جزء أساسي من الشلال.
الاكتساب
يتم اكتساب بعض خصائص CSS إذا لم تحدّد قيمة لها. تعرَّف على آلية عمل هذه الميزة وكيفية الاستفادة منها في هذه الوحدة.
اللون
هناك عدة طرق مختلفة لتحديد اللون في CSS. تفحص هذه الوحدة قيم الألوان الأكثر استخدامًا.
وحدات المقاس
تعرَّف على كيفية تحديد حجم العناصر باستخدام CSS والعمل باستخدام الوسيط المرن على الويب.
التصميم
نظرة عامة على طرق التنسيق المختلفة التي يجب الاختيار من بينها عند إنشاء تصميم مكوّن أو صفحة
Flexbox
Flexbox هي آلية تصميم مصمَّمة لتنظيم مجموعات من العناصر في بُعد واحد. تعَرّف على كيفية استخدامها في هذه الوحدة.
شبكة
يوفر تنسيق شبكة CSS نظام تصميم ثنائي الأبعاد يتحكّم في التنسيق في الصفوف والأعمدة. اكتشِف كل ما تقدّمه الشبكة.
الخصائص المنطقية
ترتبط الخصائص والقيم المنطقية والنسبية بالتدفق بتدفق النص، وليس بالشكل المادي للشاشة. اطّلِع على كيفية الاستفادة من هذا النهج الأحدث في التعامل مع خدمات مقارنة الأسعار (CSS).
التباعد
تعرَّف على طريقة اختيار أفضل طريقة لتباعد العناصر وفقًا لطريقة التنسيق التي تستخدمها والمكوِّن الذي تريد إنشاءه.
العناصر الزائفة
العنصر الزائف يشبه إضافة عنصر إضافي أو استهدافه بدون الحاجة إلى إضافة المزيد من HTML. لديهم مجموعة متنوّعة من الأدوار، ويمكنك الاطّلاع على معلومات عنها في هذه الوحدة.
الصفوف الزائفة
تتيح لك الفئات الزائفة تطبيق لغة CSS استنادًا إلى تغييرات الحالة. ويعني ذلك أنّ التصميم قد يتفاعل مع إدخالات المستخدمين، مثلاً عنوان بريد إلكتروني غير صالح.
الحدود الجغرافية
يوفر الحد إطارًا للصناديق. تعرَّف على كيفية تغيير حجم الحدود ونمطها ولونها باستخدام لغة CSS.
الظلال
هناك عدة طرق لإضافة الظلال إلى النص والعناصر في CSS. تعرّف على كيفية استخدام كل خيار والمهام التي صُممت من أجلها.
التركيز
افهم أهمية التركيز في تطبيقات الويب الخاصة بك. ستتعرّف على كيفية إدارة التركيز وكيفية التأكّد من أنّ المسار المؤدي إلى صفحتك يناسب كلاً من الأشخاص الذين يستخدمون الماوس والأشخاص الذين يستخدمون لوحة المفاتيح للتنقّل.
سياقات مؤشر Z وتجميعها
تعرَّف على كيفية التحكّم في ترتيب العناصر الظاهرة فوق بعضها باستخدام مؤشر z وسياق تكديس العناصر.
الدوالّ
تشتمل CSS على مجموعة من الدوال المضمنة. تعرَّف على بعض الدوال الأساسية وكيفية استخدامها.
التدرجات
في هذه الوحدة، ستتعرف على كيفية استخدام الأنواع المختلفة من التدرجات المتاحة في CSS. ويمكن أن تنشئ التدرجات مجموعة كاملة من التأثيرات المفيدة، بدون الحاجة إلى تطبيقات الرسومات لإنشاء الصور.
الصور المتحركة
تشكّل الصور المتحركة طريقة رائعة لتسليط الضوء على العناصر التفاعلية وإضافة اهتمام ومرح إلى تصميماتك. تعرَّف على كيفية إضافة تأثيرات الصور المتحركة والتحكّم فيها باستخدام CSS.
الفلاتر
تعني الفلاتر في CSS أنّه يمكنك تطبيق تأثيرات قد تظن أنّها ممكنة فقط في تطبيق رسومات. في هذه الوحدة، يمكنك اكتشاف ما هو متاح.
أوضاع الدمج
أنشِئ تأثيرات تركيبية من خلال مزج طبقتَين أو أكثر، وتعلَّم كيفية عزل صورة بخلفية بيضاء في هذه الوحدة حول أوضاع المزج.
القوائم
تتألف القائمة، هيكليًا، من عنصر حاوية قائمة مليء بعناصر القائمة. في هذه الوحدة، ستتعلم طريقة تصميم جميع أجزاء القائمة.
عمليات النقل
تعرّف على كيفية تحديد الانتقالات بين حالات العنصر. استخدِم الانتقالات لتحسين تجربة المستخدم من خلال تقديم ملاحظات مرئية حول تفاعل المستخدم.
تجاوز
تجاوز السعة هو كيفية التعامل مع المحتوى الذي لا يتناسب مع حجم رئيسي محدد. في هذه الوحدة، ستفكر في مواضيع غير تقليدية وتتعلم كيفية تصميم محتوى كامل.
الخلفيات
تعرَّف على كيفية تصميم خلفيات المربعات باستخدام CSS.
النص وأسلوب الخط
تعرَّف على كيفية تصميم نص على الويب.
الخاتمة والخطوات التالية
موارد إضافية لمساعدتك في اتخاذ خطواتك التالية.
إذًا، هل أنت مستعد لتعلم CSS؟ لنبدأ.