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

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

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

خاصية color في CSS

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

<body>
	<h1>Nusur Tech</h1>
</body>

و سيكون كود CSS بالشكل

h1 {
	color:#ff2200;
}

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

ملحوظة

الألوان يمكن أن تُحَدد بإستخدام نظام الأرقام الست عشري Hexa كما في المثال السابق أو بأن تختار إسم اللون "red" أو من خلال قيمة RGB و التي تعني ألأخضر و الأزرق و الأحمر (255.0.0).

خاصية background-color

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

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

body {
	background-color:#00ff00;
}
h1 {
	color:#ff2200;
}

عند تشغيل الكود في المتصفح سوف تكون خلفية الصفحة بالكامل باللون الأخضر.

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

body {
	background-color:#00ff00;
}
h1 {
	color:#ff2200;
	background-color:#909090;
}

و عند تشغيل الكود في المتصفح سوف تكون خلفية للوسم h1 في الصفحة.

خاصية backround-image

الخاصية backround-image تقوم بوضع خلفية لأي عنصر, و يُمكن إستخدامها على العنصر body لإعطاء خلفية للصفحة بأكملها, سوف نقوم بإعطاء صوره على العنصر body و سيكون الكود بالشكل

body {
	background-color:#00ff00;
	background-image:url("nusurtech");
}
h1 {
	color:#ff2200;
	background-color:#909090;
}

لقد إستدعينا صورة عن طريق background-image و الصورة كانت توجد ضمن مجلد العمل لهذا قمنا بإستدعاءها بإسمها و إ`متدادها.

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

خاصية background-repeat

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

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

مثال على عدم تكرار الصورة

body {
	background-color:#00ff00;
	background-image:url("nusurtech");
	background-repeat:no-repeat;
}
h1 {
	color:#ff2200;
	background-color:#909090;
}

هنا سوف يقوم فقط بإضافة الخلفية مرة واحدة و لن يكرر الصورة.

خاصية background-attachent

إن background-attachent تُحدد ما إذا كانت الصورة ثابتة أو متحركة مع محتويات العنصر, الصورة الثابتة لن تتحرك مع النص عندما يقوم القارئ بتحريك الصفحة بيمنا الصورة المتحركة ستتحرك مع الصفحة بمحتوياتها و هناك قيم تكون مع هذه الخاصية.

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

خاصية background-position

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

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

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

body {
	background-color:#00ff00;
	background-image:url("nusurtech");
	background-repeat:no-repeat;
	background-position:right;
}
h1 {
	color:#ff2200;
	background-color:#909090;
}

خاصية background

إن الخاصية background من خلالها يُمكن التحكم في جميع الخصائص التي شرحناها في الأعلى. و يمكن التحكم في كل هذا عن طريق background في سطر واحد, سوف نقوم بجمع كل ما سبق في سطر واحد في مثال

body {
	background: #00ff00 url(nusurtech.jpg) no-repeat right;
}
h1 {
	color:#ff2200;
	background-color:#909090;
}

عند تشغيل الكود في المتصفح سوف يجمع لنا جميع الخصائص السابقة.

نسور التقنية Nusur Tech

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