دورة برمجة مواقع الانترنت - لغة css - الدرس 4 - تنسيق الخلفية Styling Backgrounds - الجزء الأول

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

لون الخلفية background color

صيغة كتاية الكود على الشكل التالي :

العنصر  {background-color:اللون;}

طبعاً يوضع هذا الكود في جزء css كما تعلمنا سابقاً بشكل داخلي أو في الهيدر أو في ملف خارجي
نأتي الآن إلى الأمثلة لتوضيح الفكرة :

دورة برمجة مواقع الانترنت في منتدى طه سوفت للبرامج

في جزء css الموجود في الهيدر وضعنا خاصية تلوين الخلفية باللون الأصفر للعنصر body وهذا يعني لون لكامل صفحة الانترنت
والنتيجة ستكون صفحة بلون أصفر مهما كانت المحتويات



يمكن كتابة الكود السابق بالشكل التالي ( بشكل داخلي )

دورة برمجة مواقع الانترنت في منتدى طه سوفت للبرامج

والنتيجة ستكون نفسها
ويمكن وضع ملف الستايل كملف خارجي كما تعلمنا سابقاً

ملاحظة :
بالنسبة للون يوجد ثلاثة طرق لكتابة اللون و هي إما اسم اللون مثل كلمة yellow المذكورة سابقاً
أو كود اللون حيث أن لكل لون كود خاص به مثال :

دورة برمجة مواقع الانترنت في منتدى طه سوفت للبرامج

وهو نفس المثال السابق لكن هنا عبرنا عن اللون الأصفر بكتابة

#ffff00

والطريقة الثالثة بكتابة نسب خلط اللون ( قليلة الاستعمال )
حيث يمكن أن نعبر عن اللون الاصفر بـ

rgb(255,255,0)

والمثال السابق كاملاً يصبح كالتالي :

دورة برمجة مواقع الانترنت في منتدى طه سوفت للبرامج

و الآن إليكم جدولاً لكافة الألوان التي يمكن كتابتها كاسم و بجانب كل منها كود الون الممكن كتابته بدل الاسم
( إذا كانت سرعة اتصالك بطيئة انتظر قليلاً حتى تظهر كامل الصورة )


الخلاصة :
ذكرت لكم في الأعلى الطرق الممكنة ولكن بشكل عملي هل نعتمد على هذا الجدول أم ماذا
بصراحة لا نعتمد عليه و الطريقة الأفضل والأكثر شيوعاً للتعامل مع الألوان هي باستخدام برنامج photoshop
حيث أن برنامج الفوتوشوب من أساسيات مصمم مواقع الانترنت ولذلك فأفضل طريقة هي معرفة كود اللون ووضعه
في الصفحة عن طريق الفوتوشوب

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



في الصورة السابقة كود اللون الذي اخترناه هو :

 #32ce41

وبطريقة rgb يكتب الكود :

 rgb(50,206,65)

لاحظ الارقام في الصورة أخذناها بالتسلسل من جانب الأحرف R G B
وكما ذكرت هذه الطريقة ليست شائعة ولكن تم ذكرها لأخذ العلم

مثال على تطبيق اللون السابق على خلفية نص :

دورة برمجة مواقع الانترنت في منتدى طه سوفت للبرامج

أو يمكن كتابته بالشكل التالي :

دورة برمجة مواقع الانترنت في منتدى طه سوفت للبرامج

والنتيجة :


نكتفي بهذا القدر اليوم وسنتابع في الدرس التالي بقية الأمور التي تتعلق بالخلفية

وكوظيفة

حتى تتعملق الفكرة :
يرجى عمل جدول كالتالي بحيث أن كل خلية فيه تكون بلون مختلف عن الآخر
الصورة :

نلقاكم بود ونرجو عمل الوظيفة حتى نتابع معكم البقية