🎨 شرح background-color في CSS للمبتدئين | تغيير لون خلفية الصفحة
🎨 شرح background-color في CSS للمبتدئين | تغيير لون خلفية الصفحة
عندما نبدأ في تعلم CSS، من أول الأشياء التي نريد تعلمها هي كيفية تغيير شكل صفحة الويب وإضافة الألوان إليها.
ومن أبسط خصائص CSS التي تساعدنا على ذلك خاصية:
background-colorتُستخدم background-color لتحديد لون خلفية العنصر.
وفي هذا الدرس سنتعلم كيفية استخدامها مع عنصر body لتغيير لون خلفية صفحة الويب، مع مجموعة كبيرة من الأمثلة العملية.
🟢 ما هي background-color؟
خاصية background-color مسؤولة عن تحديد لون الخلفية.
الصيغة الأساسية:
background-color: color;مثال بسيط:
body {
background-color: blue;
}في هذا المثال قمنا بتغيير لون خلفية الصفحة إلى اللون الأزرق.
🧱 استخدام background-color مع body
عنصر body يحتوي على محتوى صفحة HTML، ولذلك يمكننا استخدامه لتحديد لون خلفية الصفحة.
لدينا ملف HTML:
<!DOCTYPE html>
<html>
<head>
<title>Background Color</title>
</head>
<body>
<h1>Hello World!</h1>
<p>Welcome to my website.</p>
</body>
</html>ونكتب في CSS:
body {
background-color: lightblue;
}الآن ستظهر صفحة الويب بخلفية زرقاء فاتحة.
🎨 استخدام أسماء الألوان
أسهل طريقة لتحديد لون الخلفية هي كتابة اسم اللون مباشرة.
مثال:
body {
background-color: red;
}ستصبح خلفية الصفحة حمراء.
مثال آخر:
body {
background-color: blue;
}ستصبح الخلفية زرقاء.
مثال:
body {
background-color: green;
}ستصبح الخلفية خضراء.
ويمكننا استخدام ألوان أخرى كثيرة.
🟡 الأصفر
body {
background-color: yellow;
}🟠 البرتقالي
body {
background-color: orange;
}🟣 البنفسجي
body {
background-color: purple;
}🩷 الوردي
body {
background-color: pink;
}⚫ الأسود
body {
background-color: black;
}⚪ الأبيض
body {
background-color: white;
}هذه الطريقة سهلة جدًا للمبتدئين، ولكنها لا توفر لنا كل درجات الألوان التي يمكن استخدامها في تصميم المواقع.
وهنا يأتي دور HEX.
🔢 استخدام HEX
يمكننا تحديد الألوان باستخدام نظام HEX.
تبدأ قيمة HEX عادةً بالرمز:
#ثم تأتي بعدها قيمة اللون.
مثال:
body {
background-color: #ff0000;
}هذا اللون هو الأحمر.
مثال للون الأزرق:
body {
background-color: #0000ff;
}مثال للون الأخضر:
body {
background-color: #00ff00;
}ويمكننا استخدام درجات كثيرة جدًا من الألوان باستخدام HEX.
مثلاً:
body {
background-color: #1e293b;
}هذا لون داكن مناسب جدًا للخلفيات.
مثال آخر:
body {
background-color: #f1f5f9;
}وهذا لون فاتح مناسب لخلفية صفحة بسيطة.
مثال:
body {
background-color: #0f172a;
}يمكن استخدامه كخلفية داكنة للموقع.
🌈 استخدام RGB
هناك طريقة أخرى لتحديد الألوان وهي استخدام rgb().
الصيغة الأساسية:
background-color: rgb(red, green, blue);تتكون RGB من ثلاثة أرقام تمثل:
Red 🔴
Green 🟢
Blue 🔵
وتكون قيم كل لون من 0 إلى 255.
مثال:
body {
background-color: rgb(255, 0, 0);
}هذا يعطينا اللون الأحمر.
مثال للون الأخضر:
body {
background-color: rgb(0, 255, 0);
}مثال للون الأزرق:
body {
background-color: rgb(0, 0, 255);
}ويمكننا دمج القيم للحصول على ألوان مختلفة.
مثال:
body {
background-color: rgb(30, 40, 60);
}ومثال آخر:
body {
background-color: rgb(240, 240, 240);
}وهكذا يمكننا التحكم في اللون باستخدام قيم RGB.
🧪 أمثلة كثيرة على background-color
الآن دعونا نجرب مجموعة من الألوان.
مثال 1 — خلفية حمراء
body {
background-color: red;
}مثال 2 — خلفية زرقاء
body {
background-color: blue;
}مثال 3 — خلفية خضراء
body {
background-color: green;
}مثال 4 — خلفية داكنة باستخدام HEX
body {
background-color: #1e293b;
}مثال 5 — خلفية زرقاء داكنة
body {
background-color: #0f172a;
}مثال 6 — خلفية فاتحة
body {
background-color: #f8fafc;
}مثال 7 — استخدام RGB
body {
background-color: rgb(30, 41, 59);
}مثال 8 — لون رمادي
body {
background-color: rgb(200, 200, 200);
}مثال 9 — لون أصفر باستخدام RGB
body {
background-color: rgb(255, 255, 0);
}مثال 10 — لون بنفسجي باستخدام HEX
body {
background-color: #800080;
}💻 مثال كامل
لنقم بإنشاء صفحة HTML بسيطة وتغيير لون خلفيتها.
ملف HTML
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Welcome to My Website</h1>
<p>I'm learning CSS!</p>
</body>
</html>ملف CSS
body {
background-color: #1e293b;
}الآن أصبحت خلفية الصفحة باللون الذي حددناه باستخدام HEX.
🔄 جرب تغيير اللون بنفسك
بدلًا من:
body {
background-color: #1e293b;
}جرب:
body {
background-color: #2563eb;
}ثم جرب:
body {
background-color: #16a34a;
}ثم:
body {
background-color: #facc15;
}ثم:
body {
background-color: #dc2626;
}ستلاحظ أن تغيير قيمة واحدة فقط يؤدي إلى تغيير لون خلفية الصفحة بالكامل.
⚠️ أخطاء شائعة
1. كتابة اسم الخاصية بطريقة خاطئة
خطأ:
body {
background-colour: red;
}الصحيح:
body {
background-color: red;
}لاحظ أن CSS تستخدم كلمة color وليس colour.
2. نسيان # عند استخدام HEX
خطأ:
body {
background-color: ff0000;
}الصحيح:
body {
background-color: #ff0000;
}3. كتابة RGB بطريقة خاطئة
خطأ:
body {
background-color: rgb(255);
}الصحيح:
body {
background-color: rgb(255, 0, 0);
}4. نسيان الفاصلة المنقوطة
يفضل كتابة:
body {
background-color: red;
}بدلًا من:
body {
background-color: red
}🚀 تطبيق نهائي
لننشئ صفحة صغيرة ونستخدم فيها background-color.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Learn CSS</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Learn CSS</h1>
<p>Today I learned background-color.</p>
</body>
</html>CSS
body {
background-color: #0f172a;
}يمكنك الآن تغيير اللون بنفسك.
جرب:
body {
background-color: #1d4ed8;
}أو:
body {
background-color: #15803d;
}أو:
body {
background-color: #ca8a04;
}أو:
body {
background-color: rgb(30, 41, 59);
}وحاول إنشاء ألوان مختلفة بنفسك.
📝 الخلاصة
تعلمنا اليوم خاصية مهمة وبسيطة في CSS وهي:
background-colorوتستخدم لتحديد لون خلفية العنصر.
وعند استخدامها مع body نستطيع تغيير لون خلفية صفحة الويب بالكامل.
يمكننا تحديد اللون باستخدام:
اسم اللون
body {
background-color: red;
}HEX
body {
background-color: #ff0000;
}RGB
body {
background-color: rgb(255, 0, 0);
}💡 نصيحة: لا تكتفِ بقراءة الأمثلة. افتح محرر الأكواد وجرب تغيير الألوان بنفسك، لأن أفضل طريقة لتعلم CSS هي التجربة ومشاهدة النتيجة مباشرة.
🔥 جرب لونًا جديدًا في كل مرة، ومع الوقت ستصبح كتابة CSS أسهل بكثير!
🎯 اختبر نفسك الآن !!!!
تهانينا! لقد أنهيت هذا الدرس بنجاح. 🎉
لكن هل فهمت كل ما تعلمته بالفعل؟
لا تكتفِ بالقراءة، بل اختبر معلوماتك من خلال الاختبار التفاعلي الذي صممته خصيصًا لهذا الدرس ضمن سلسلة Hisham Academy.
تعليم
🧠 مميزات الاختبار:
أسئلة متنوعة تقيس مدى فهمك.
نتيجة فورية بعد الانتهاء.
تصميم بسيط وسريع يعمل على الهاتف والكمبيوتر.
أجهزةاتصالات
يساعدك على معرفة نقاط القوة والجوانب التي تحتاج إلى مراجعتها.
🔗 ابدأ الاختبار الآن:
https://hishamabdulrashid999.github.io/test_8/
أضغط هنا للبدء في الأختبار
📚 تابع الدرس التالي في سلسلة Hisham Academy ولا تنسَ حفظ المقال ومشاركته مع من يريد تعلم برمجة الويب من الصفر.
وأخبرني رأيك في التعليقات هل فعلاً أستفدت من هذا المقال
