الخلفيات و الألوان في لغة CSS الدرس |3|

الخلفيات و الألوان لغة CSS

سوف نتعلم كيفية ادارج الألوان و الخلفيات عن طريق CSS, توجد هناك بعض الخصائص التي تستخدم لإدارج الألوان و الخلفيات وهي :

color
background-color
background-image
background-repeat
background-attachment
background-position
background

الخصائص التي تستخدم لإدراج الألوان و الخلفيات

توجد عدة خصائص لأجل ادراج الوان و خلفيات للصفحة عن طريق الـ CSS و هي

خاصية color

تصنف تلك الخاصية على انها احد عناصر html, على سبيل المثال نريد ان يكون كل العناوين بلون احمر, لدي مجموعة من العناوين داخل html فمن خلال css يمكننا اعطاء لون معين لكل تلك العناوين, وسيكون هذا داخل ملف index.html بالشكل

ويكون داخل ملف style.css بهذا الشكل

ويظهر في المتصفح في ذلك الشكل

خاصية background-color

هذه الخاصية تحدد لون خلفية اي عنصر مثل العنصر body يظم جميع محتويات وثيقة html لذلك لتغيير خلفية الصفحة بأكملها يجب علينا تفعيل هذه الخاصية على العنصر body ويمكن ايضاً تفعيل هذه الخاصية على اي عنصر آخر مثل العناوين و النصوص وغيره.

مثال

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

وستكون النتيجة داخل المتصفح بهذا الشكل

وكما يمكن تحديد هذا على أي عنصر, في المثال القادم سوف نستخدم هذه الخاصية على العنصر h1 الموجود مسبقاً داخل html وسيكون بذلك الشكل

وستكون النتيجة داخل المتصفح بهذا الشكل

خاصية backround-image

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

وسوف يظهر في المتصفح بهذا الشكل

وكما يمكن استخدامها على اي عنصر آخر, مثل العناوين و النصوص .....الخ.

لكن لاحظوا في الصورة في style.css هناك ايضا قمنا بإعطاء لون, لكن حين استدعاء اي صورة يختفي هذا اللون, لكن في حين حصل اي اخطاء في الصورة داخل المتصفح سوف يظهر هذا اللون كخلفية للصفحة.

خاصية background-repeat

تتحكم هذه الخاصية بتكرار الصورة, في المثال السابق لاحظنا كيف تكررت الصورة في المتصفح لكن مع استخدام هذه الخاصية يمكنك التحكم في تكرار الصورة, وهذه معها مجموعه من القيم للتحكم.

background-repeat: repeat-x  تكرار الصورة افقيا
background-repeat: repeat-y  تكرار الصورة عمودياً
background-repeat: repeat-3  تكرار الصورة افقياً وعمودياً
background-repeat: repeat-4  تكرار الصورة بكل الاشكال

نأخذ مثال على عدم تكرار الصورة

وسيكون الناتج في المتصفح بهذا الشكل 

باقي القيم جربوها بأنفسكم.

خاصية background-attachent

هذا الخاصية تحدد ما اذا كانت الصورة ثابتة او متحركة مع محتويات العنصر.

الصورة الثابتة لن تتحرك مع النص عندما يقوم القارئ بتحريك الصفحة بيمنا الصورة المتحركة ستتحرك مع الصفحة بمحتوياتها وهناك قيم تكون مع هذه الخاصية.

background-attachent:scroll  الصورة تتحرك مع الصفحة
background-attachent:fixed  تكون الصورة ثابتة

جربو مثال بأنفسكم لتكتشفوا الفرق بين المتحركة scroll و الثابتة fixed.

خاصية background-position

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

left  يسار الصفحة
right  يمين الصفحة
top  اعلى الصفحة
bottom  اسفل الصفحة
center  منتصف الصفحة

ويمكنك تحريك الصورة عن طريق البكسل, مثال لوضع الصوره على يمين الصفحة

وسيكون في المتصفح بهذا الشكل 

خاصية background

من خلال هذه الخاصية يمكن التحكم في جميع الخصائص الذي شرحناها بالاعلى.

ويمكن التحكم في كل هذا عن طريق background  في سطر واحد, سنقوم بجمع كل ما سبق في سطر واحد  في مثال

وسيكون في المتصفح بذلك الشكل 

لمتابعة قناتنا في تلجرام اضغطوا على الصورة التالية