دورة تصميم المواقع باستخدام Css | الدرس الأول | تعلم css

بسم الله الرحمان الرحيم 

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

ما هو css ؟

ما هو css وكيفية تعلم css هي لغة تصف للمتصفح طريقة عرض أكواد html في صفحة الويب وأمكانها التي يجب أن تظهر بها وألوانها وما إلى ذلك، يتم تشغيل css باستخدام المتصفح ويعتبر مدعوماً من جميع المتصفحات بجميع إصداراتها عدا عن بعض الخصائص المتوفر في css3 الحديثة التي تدعمها بعض المتصفحات دون الأخرى  .

كيف يفيد تعلم css مصممي المواقع ؟

إذا كنت تقوم بتصميم المواقع باستخدام الفوتوشوب أو أي برامج تصميم أخرى فقد حان الوقت الآن للارتقاء إلى المرحلة التالي من تصميم مواقع الويب وذلك بتعلم كيفية تكويد الكود الخاص بك .

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

مستلزمات دورة تعلم css !

المعلومات التي يجب أن تكون تحصلت عليها قبل هذه الدورة هي بسيطة للغاية كل ما عليك هو معرفة بسيطة عن كيفية كتابة واستخدام الأكواد الأساسية في html  مثل dev p وغيرها من الأكواد الأكثر استخداما في اللغة .

هل لغة css هي لغة برمجة ؟

في الواقع لا يمكن إطلاق كلمة لغة برمجة على css ولا تعتبر من لغات البرمجة حيث إن لغات البرمجة هي التي تتم معالجتها من قبل السيرفر وتمكن من التعامل مع البيانات بشكل دينامكي والتعامل مع قواعد البيانات .

لكن يمكن إطلاق كلمة لغة متصفح على لغة css حيث يتم تفسيرها وترجمتها من قبل المتصفح عند تحميل الصفحة .

الدرس الأول

طريقة كتابة لغة Css

نلاحظ أن وصف طريقة عرض عنصر للمتصفح تشمل الخطوات التالية :

1- اختيار العنصر الذي نريد وصفه أو ما يسمى بـ Selector والمتمثل هنا في H1

2- الأقواس {} يتم وضع جميع الخصائص التي نريد وصف عنصر html بها في داخل هذه الأقواس حيث يمكن ان نصف العنصر بعدة خصائص وأوصاف في مرة واحدة ، فمثلا يمكننا اختيار لونه طوله عرضه نوع الخط إلى آخره .

3- الوصف : أو ما يعبر عنه بـ Property نقوم بإخبار المتصفح بنوع الوصف الذي نريد وصف العنصر به هل هو لون أو طول أو نوع خط مثلا .

4- القيمة : أو Value بعد ان نختار نوع الوصف علينا أن نحدد قيمته هل لونه أحمر أم أخضر مثلا ..

5- الفاصلة: ;  توضع هذه الفاصلة بعد نهاية كل وصف وقيمته للفصل بين الأوصاف المتعددة داخل القوسين مع ملاحظة أننا لا نضع الفاصلة بعد اغلاق القوس } فالمتصفح يفهم عن إغلاق القوس ان وصف هذا العنصر قد انتهى .

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

مثال حي لعنصر قد تم وصفه بالستخدام Css

بعد قراءة هذه المقدمة البسيطة هل تظن أنك مستعد لـ تعلم css  !