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

الرمز:

h1{ color:red; }

أو

الرمز:

h1{ color:#FA0000; }

لتطبيق
لون على الخلفية نستخدم الخاصية
background-color
لو أردنا خلفية
الصفحة باللون الأسود سيكون الرمز هو

الرمز:

body{ background-color:#000000; }

و
كذلك لأي عنصر
فأيضا لو أردنا خلفية العنوان h1 باللون الأبيض سيكون
الرمز هو

الرمز:

h1{ color:red; background-color:white; }

هذا
عن الألوان فماذا عن الخلفيات؟؟
طبعا لو أردنا ان تكون الخلفية لونا
معينا سنطبق كما سبق لكن لو أردنا أن نضع صورة للخلفية سنستخدم الرمز
background-image
يعني
لو أردنا وضع صورة كخلفية للصفحة سيكون الرمز هو:

الرمز:

body{ background-image:url('back.jpg'); }

خصائص
الخلفية:
التكرار:
يمكن التحكم في تكرار الخلفية فالوضع الافتراضي
انك لو وضعت خلفية للصفحة ستتكرر
لتملأ الصفحة
ويمكن التحكم في
تكرار الخلفية عن طريق الرمز
background-repeat
يعني لو أردت مثلا
أن اجعل الخلفية تتكرر رأسيا فقط سيكون الرمز هو
body{
background-image:url('back.jpg');
background-repeat:repeat-y;
}
و
يمكن استخدام
repeat-x للتكرار الافقي فقط
repeat للتكرار رأسيا و
أفقيا
no-repeat لعدم التكرار
تثبيت الخلفية:
يمكن التحكم في
ثبوت الخلفية عن طريق
background-attachment
و معنى ثبوت الخلفية
أن تظل مكانها و لا تتحرك مع الصفحة صعودا وهبوطا
لو أردنا فعل ذلك
لخلفية الصفحة و جعلها ثابتة سيكون الرمز هو

الرمز:

body{ background-color:#000000; background-image:url('back.jpg'); background-repeat:repeat-y; background-attachment:fixed; }

fixed
خلفية ثابتة
scroll خلفية متحركة مع الصفحة صعودا و هبوطا
التحكم
في مكان الخلفية:
يمكن التحكم في مكان الخلفية عن طريق
background-position
فممكن
ان نجعلها في المنتصف أو بالاعلى او على اليمين أو اليسار او اعلى اليمين
وهكذا
مستخدمين في ذلك القيم :
center
right
left
يعني
مثلا لو أردنا ان نجعل خلفية الصفحة في أعلى اليمين سيكون الرمز :

الرمز:

body{ background-color:#000000; background-image:url('back.jpg'); background-repeat:no-repeat; background-attachment:fixed; background-position:top right; }

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

الرمز:

body{ background-color:#000000; background-image:url('back.jpg'); background-repeat:no-repeat; background-attachment:fixed; background-position:50% 25%; }

يمكن استخدام البكسل و
السنتيميتر أيضا في تحديد موضع الخلفية بدلا من النسبة المئوية
مثلا
لو أردنا ان تكون الخلفية على بعد 4cm من اليسار و 2cm من الاعلى سيكون
الرمز هو

الرمز:

body{ background-color:#000000; background-image:url('back.jpg'); background-repeat:no-repeat; background-attachment:fixed; background-position:4cm 2cm; }

يمكن جمع كل
خصائص الخلفية في سطر واحد هكذا

الرمز:

body{ background:#000000 url('back.jpg') no-repeat fixed top right;}

انتهى الدرس

المرة القادمة بغذن الله سيكون تطبيقا عمليا على الدرس

مشكور اخوى

شكرا لك

درس رائع
جزاك الله كل خير

شكرا لك سيادة المدير على الطرح