[الدرس الثاني] الألوان و الخلفيات

السلام عليكم ورحمة الله وبركاته
....................................
في هذا الدرس سنتعرف على تطبيق تغيير الألوان ولاخلفيات ووضع الخلفية
اولا الألون:
لتطبيق لون على عنصر 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;}

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