الخلفيات و الألوان في لغة CSS - ProgrammerTech
Language:

Search

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

  • Share this:
الخلفيات و الألوان في لغة CSS

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

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

  1. color
  2. background-color
  3. background-image
  4. background-repeat
  5. background-attachment
  6. background-position
  7. background

 

خاصية color في CSS

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

<body>
	<h1>Programmer 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 في الصفحة.

وضع اللون كخلفية للصفحة في CSS

 

خاصية backround-image

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

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

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

عند تشغيل الكود السابق في التصفح ستكون نتيجته

اضافة خلفية لصفحة الويب عن طريق CSS

 

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

 

خاصية background-repeat

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

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

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

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

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

عدم تكرار خلفية صفحة الويب في CSS

 

خاصية background-attachent

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

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

 

خاصية background-position

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

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

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

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

 

خاصية background

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

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

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


Tags:
Muhammad Alush

Muhammad Alush

إسمي محمد تركي العلوش محب للتقنية و التعلم الذاتي, و جميع خبراتي تعلمتها ذاتياً, و اللغات البرمجية التي أتقنها هي html, css, javascript, php, c, python بالإضافة إلى حبي الكبير لمجال الشبكات.

موقعي programmer-tech.com