الدرس التانى الألوان و الخلفيات

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

الرمز:

h1{
color:red;
}

أو

الرمز:

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

الرمز:

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

الرمز:

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

الرمز:

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

الرمز:

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

الرمز:

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

الرمز:

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

الرمز:

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

الرمز:

انتهى الدرس

» الدرس الذي يطلبة الكثيرون : عمل لمعة متحركة علي الصورة أو النص