دليل شامل لتغيير لون خلفية عناصر HTML: خاصية background-color في CSS بالتفصيل

يُعد تغيير لون خلفية عناصر HTML من المهام الأساسية والمتكررة التي يواجهها مطورو الويب. ومع ذلك، قد تبدو هذه المهمة محيرة إذا لم يكن لديك فهم واضح لكيفية استخدام خاصية background-color في CSS. في هذا الدليل الشامل، سنستكشف معًا القيمة الافتراضية للون الخلفية لعناصر HTML، وكيفية تعديل لون خلفية عنصر div الشائع الاستخدام، والأجزاء المتأثرة من نموذج الصندوق (CSS Box Model) بخاصية background-color، بالإضافة إلى استعراض القيم المتنوعة التي يمكن أن تأخذها هذه الخاصية.

لون الخلفية الافتراضي لعناصر HTML

عندما لا تحدد لون خلفية لعنصر HTML، فإن القيمة الافتراضية لخاصية background-color هي transparent (شفاف). هذا يعني أن العنصر لن يمتلك لون خلفية خاص به، وبدلاً من ذلك سيعرض لون خلفية العنصر الأب (parent element) الذي يحتويه. على سبيل المثال، إذا لم تحدد لون خلفية لعنصر div، فإنه سيكشف عن لون خلفية العنصر الذي يقع بداخله، أو لون خلفية صفحة الويب بأكملها إذا لم يكن له أب محدد.

تغيير لون خلفية عنصر div: أمثلة عملية

لتوضيح كيفية تغيير لون خلفية عناصر div، سنقوم بتطبيق بعض التعديلات على الأمثلة التالية. يمكنك تجربة هذه الأكواد في ملف HTML خاص بك لمتابعة الشرح بشكل عملي.

بنية HTML الأولية

لنبدأ ببنية HTML بسيطة تتضمن ثلاثة عناصر div:

 < div class = "div-1" > I love HTML </ div >
 < div class = "div-2" > I love CSS </ div >
 < div class = "div-3" > I love JavaScript </ div >

بدون أي تنسيقات CSS، ستظهر هذه العناصر بالشكل الافتراضي التالي:

تطبيق الألوان باستخدام CSS

الآن، لنقم بتغيير لون خلفية هذه العناصر عن طريق إضافة تنسيقات CSS للفئات (classes) الخاصة بها:

 < style >
 .div-1 {
 background-color : #EBEBEB ;
 }
 .div-2 {
 background-color : #ABBAEA ;
 }
 .div-3 {
 background-color : #FBD603 ;
 }
 </ style >
 < body >
 < div class = "div-1" > I love HTML </ div >
 < div class = "div-2" > I love CSS </ div >
 < div class = "div-3" > I love JavaScript </ div >
 </ body >

بعد تطبيق هذه التنسيقات، ستبدو العناصر على النحو التالي، حيث تم تغيير لون خلفية كل div بنجاح:

كما رأينا، لقد نجحنا في تغيير لون خلفية عناصر div بسهولة. لننتقل الآن إلى فهم أعمق لكيفية تفاعل خاصية background-color مع نموذج الصندوق في CSS.

تأثير خاصية background-color على نموذج الصندوق (CSS Box Model)

يُعتبر نموذج الصندوق (CSS Box Model) مفهومًا أساسيًا في CSS، حيث يتم تمثيل جميع عناصر HTML كصناديق مستطيلة. يتكون كل صندوق من أربعة أجزاء رئيسية، كما يوضح الرسم التوضيحي أدناه:

إذا لم تكن على دراية بنموذج الصندوق، فننصحك بالاطلاع عليه لفهم أعمق لكيفية تنظيم العناصر في صفحة الويب. السؤال الذي يطرح نفسه هو: أي جزء من نموذج الصندوق يتأثر عند تغيير لون خلفية عنصر div؟

تأثير لون الخلفية على المحتوى والحشوة

الإجابة ببساطة هي أن خاصية background-color تؤثر على منطقتي المحتوى (content area) والحشوة (padding area). لتأكيد هذا الفهم، دعونا نلقي نظرة على المثال التالي:

 < style >
 body {
 background-color : #ABBAEA ; /* لون خلفية الجسم */
 }
 .child {
 height : 200px ;
 margin : 20px ;
 border : 5px solid;
 background-color : #FBD603 ; /* لون خلفية العنصر الابن */
 }
 </ style >
 < body >
 < div >
 < p > This is the parent div which contains the div we are testing </ p >
 < div class = "child" >
 < p > This example shows that changing the background color of a div does not affect the border and margin of the div. </ p >
 </ div >
 </ div >
 </ body >

سينتج عن هذا الكود الشكل التالي:

من المثال أعلاه، يتضح لنا أن منطقتي الهامش (margin area) والحدود (border area) لا تتأثران بتغيير لون الخلفية. تظل منطقة الهامش شفافة (transparent) وتعكس لون خلفية العنصر الأب الذي يحتويها. يمكننا تغيير لون الحدود بشكل مستقل باستخدام خاصية border-color، مما يؤكد أن لون الخلفية يقتصر تأثيره على المحتوى والحشوة فقط.

القيم المختلفة لخاصية background-color

تمامًا مثل خاصية color التي تحدد لون النص، يمكن لخاصية background-color أن تأخذ مجموعة متنوعة من القيم لتحديد لون الخلفية. دعونا نستعرض أهم هذه القيم مع أمثلة توضيحية.

القيم الأكثر شيوعًا: الكلمات المفتاحية، السداسي عشري، و RGB

في المثال التالي، سنقوم بتعيين لون خلفية div إلى اللون الأحمر باستخدام ثلاث طرق شائعة ومختلفة:

 < style >
 /* قيمة كلمة مفتاحية/اسم اللون */
 .div-1 {
 background-color : red;
 }
 /* قيمة سداسية عشرية (Hexadecimal) */
 .div-2 {
 background-color : #FF0000 ;
 }
 /* قيمة RGB (Red, Green, Blue) */
 .div-3 {
 background-color : rgb ( 255 , 0 , 0 );
 }
 </ style >
 < body >
 < div class = "div-1" >
 < p > يمكن لخاصية الخلفية أن تأخذ ست قيم مختلفة. </ p >
 </ div >
 < div class = "div-2" >
 < p > يمكن لخاصية الخلفية أن تأخذ ست قيم مختلفة. </ p >
 </ div >
 < div class = "div-3" >
 < p > يمكن لخاصية الخلفية أن تأخذ ست قيم مختلفة. </ p >
 </ div >
 </ body >

لاحظ أن جميع هذه الطرق تؤدي إلى نفس النتيجة البصرية، وهي خلفية حمراء اللون:

قيم إضافية لخاصية background-color

بالإضافة إلى القيم المذكورة أعلاه، يمكن لخاصية background-color أن تقبل قيمًا أخرى مثل HSL (Hue, Saturation, Lightness)، وقيم كلمات مفتاحية خاصة (special keyword values)، وقيمًا عامة (global values).

 /* قيمة HSL */
 background-color : hsl (0, 100%, 25%);

 /* قيم كلمات مفتاحية خاصة */
 background-color : currentcolor ;
 background-color : transparent ;

 /* قيم عامة */
 background-color : inherit ;
 background-color : initial ;
 background-color : unset ;

كل من هذه القيم توفر مرونة إضافية في التحكم بألوان الخلفية، حيث تسمح HSL بتحديد الألوان بناءً على درجة اللون والتشبع والإضاءة، بينما توفر الكلمات المفتاحية الخاصة مثل currentcolor و transparent سلوكيات محددة، وتسمح القيم العامة مثل inherit و initial و unset بالتحكم في كيفية وراثة القيم أو إعادة تعيينها.

ملاحظات هامة حول إمكانية الوصول وتباين الألوان

عند اختيار ألوان الخلفية لعناصر HTML، من الضروري للغاية الانتباه إلى نسبة التباين (contrast ratio) بين لون الخلفية ولون النص الموجود عليها. يضمن التباين العالي أن يتمكن الأشخاص ذوو الرؤية المنخفضة أو ضعاف البصر من قراءة المحتوى بسهولة ويسر، مما يجعل موقعك أكثر شمولية وإمكانية وصول.

لننظر إلى المثالين التاليين:

في المثال الأول، نلاحظ أن التباين بين لون الخلفية الفاتح ولون النص الفاتح غير كافٍ. هذا يجعل قراءة النص صعبة على العديد من المستخدمين. ما لم تكن أنت المستخدم الوحيد لموقعك وتتمتع ببصر حاد جدًا، فمن الأفضل تجنب مثل هذه التركيبات اللونية.

على النقيض، يظهر المثال الثاني تباينًا أفضل بكثير بين لون الخلفية ولون النص. هذا يجعله أكثر وضوحًا وسهولة في القراءة لجميع المستخدمين، ويعزز من إمكانية الوصول لموقع الويب الخاص بك. دائمًا ما يجب أن تكون إمكانية الوصول في صدارة أولوياتك عند تصميم واجهة المستخدم.

الخلاصة التقنية

في هذا المقال، استعرضنا بشكل مفصل كيفية تغيير لون خلفية عناصر div في HTML باستخدام خاصية background-color في CSS. تعلمنا أن القيمة الافتراضية هي transparent وكيف يمكننا تجاوزها. كما تعمقنا في فهم تأثير هذه الخاصية على نموذج الصندوق (CSS Box Model)، مؤكدين أنها تؤثر فقط على منطقتي المحتوى والحشوة، بينما تظل الحدود والهوامش مستقلة. أخيرًا، استعرضنا القيم المتنوعة التي يمكن أن تأخذها خاصية background-color، من الكلمات المفتاحية إلى القيم السداسية العشرية و RGB و HSL، بالإضافة إلى القيم الخاصة والعامة. لا يمكن التأكيد بما فيه الكفاية على أهمية مراعاة إمكانية الوصول وتباين الألوان لضمان تجربة مستخدم مثالية وشاملة للجميع. نأمل أن يكون هذا الدليل قد أضاف قيمة حقيقية لمعرفتك في تطوير الويب.