MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

This translation is incomplete. Please help translate this article from English.

 

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

 المتطلبات

 قبل البدأ في هذا في هذا الفصل يجب  أولا أن تكون لديك

  1. معرفة أساسية بالحواسيب و إستعمال الويب كمتفرج (أي مجرد النظر إليه، واستهلاك المحتوى).
  2. بيئة عمل أساسية يتم إعدادها كما تم تفسيره بالتفاصيل في Installing basic software و فهم أساسي لكيفية إنشاء و إدارة الملفات المفسرة بالتفاصيل فيDealing with files.
  3. فهم أساسي للHTML كما تم النقاش فيها في فصل Introduction to HTML 

ملحوظة:إذا كنت تعمل على حاسوب أو لوحة إلكترونية أو هاتف حيث لا يسمح لك بإنشاء ملفاتك الخاصة يمكنك تجريب (أغلب) الكود المستعمل في الأمثلة في برنامج تكويد على الإنترنيت مثلJSBin أو Thimble.

الإرشادات

هذا الفصل يحتوي على المقالات التالية التي سترافقك خلال تعلم أساسيات الCSS و التي ستمنحك فرصة لإختبار بعض المهارات

كيف تعمل الCSS
في هذ الفصل سنبدأ بتمهيد أرضية نظرية ، بالنظر إلى ماهي الCSS و كيف يحول المتصفح الHTML إلى  DOM,كيف يطبق الCSS إلى أجزاء ال DOM وبعض الأمثلة الأساسيّة جدّا لطريقة كتابة الكود و ما هو الكود الذي نستعمله لتضمين كود ال فعلا في صفحة الويب الخاصة بنا.
تركيبة كود الCSS
قادما، سنغوص في تركيبة كود ال بتفاصيل أدق بالنظر إلى كيف تشكل الخواص و قيمها معا الإعلانات و كيف تشكل هذه الإعلانات كتلة و كيف أن مجموعة أو كتلة الإعلانات هذه مع محددات العناصر قواعد CSS كاملة و سننهي جولتنا بالنظر إلى ميزات أخرى لطريقة كتابة رموز أو كود الCSS كالتعليقات والمسافات البيضاء أو الفارغة.
محددات العناصر
محددات العناصر تم ذكرهم في مقال سابق لكن في هذا الدليل  سنتعمق أكثر في التفاصيل و سنتناول أنواع محددات العناصر المتوفرة و كيفية عملها.
قيم الCSS و وحداتها
هناك العديد من أنواع من القيم لكل خاصية في الCSS ، نجد قيم رقمية أو ألوان أو دوال تقوم بوظيفة معينة متل تدوير عنصر بدرجة معينة  أو إضافة خلفية له ..
البعض من هذه القيم تعتمد على وحدات قيس لتحديد القيمة المحددة بالظبط. هل تريد المربع الذي أنشئته أن يكون عرضه30% أو 30pxأو2em
في هذا الدليل سنتناول بعض القيم المتداولة مثل اللون و الطول و بعض الدوال البسيطة كما سنتناول خصائص أقل تداولا أيضا مثل الدرجات أو حتى قيم بدون وحدات قيس 
التتالي و الوراثة
تملك الCSS نظامين مختلفين لكن مترابطين لحل إشكالات معينة عندما تصير صراعات بين محددات العناصر(أكثر من محدد عنصر يستهدفون نفس العنصر فمن يفوز و يطبق التنسيقات الخاصة به ) و عناصر في وسط عنصر أب (بعض التنسيقات الخاصة بالأب ترشا هذه عناصرعن الأب والبعض لا) .
هذا المقال يغطي النظمين بتفاصيل كافية ومفيدة لكن ليس بصفة مبالغة فيها
نموذج الصندوق
نموذج الصندوق في الCSS هو أساس التنسيق في الويب ـ كل عنصر يتم تمثيله كصندوق مربع الشكل بمحتواه و بالمسافات الفارغه داخله و الحشوة كذلك الحدود و المسافات الخارجية التي تفصله عن العناصر الأخرى.
عندما يقووم المتصفح بتقديم صفحة الويب ، يقوم بتحديد التنسيقات المطبقة علىكل عنصر من محتوى و المسافات التي تفصل بين العناصر و مكانه في الصفحة.
قبل فهم كيفية إنشاء تصميمات و تنسيقات CSS عليك أن تفهم مفهوم نموذج الصندوق
تصحيح أخطاء ال CSS
في  آخر مقال في هذا الفصل  سوف تلقي نظرة على أساسيات تصحيح الأخطاء في ال CSS بما في ذلك إستكشاف الCSS الخاص بصفحة ويب و بعض الأدوات التي ستساعدك على إيجاد الأخطاء في كود الCSS الخاص بك

 تقييمات

التقييمات التالية ستخربر مدى فهمك لأساسيات اللغة التي تم تغطيتها في الدليل فوق.

فهم أساسي للCSS 
هذا التقييم سيختبر مدىفهمك للدليل مع بعض التمرينات المفيدة. 

إقرأ أيضا

تعلم القراءة و الكتابة في الويب : مقدمة للCSS 
دورة ممتازة لمنظمة الموزيلا التي تكشف و تختبر مهارات تم الحديث عنها في فصل تمهيد للCSS. تعلم تنسيق عناصر ال HTML في صفحة ويب و تعلم إستعمال محددات العناصر و الصفات و القيم

Document Tags and Contributors

 Contributors to this page: BelhassenChelbi
 Last updated by: BelhassenChelbi,