أولاً: طرق تحديد الألوان في CSS
يمكنك تعيين الألوان لعناصر الصفحة باستخدام الخاصيتين:
color: لتغيير لون النصbackground-color: لتغيير خلفية العنصر
طرق كتابة الألوان:
-
أسماء الألوان الجاهزة (Color Names):
color: red; background-color: blue; -
القيم الست عشرية (Hex Codes):
color: #ff0000; /* أحمر */ background-color: #0000ff; /* أزرق */ -
نظام RGB:
color: rgb(255, 0, 0); /* أحمر */ background-color: rgb(0, 0, 255); /* أزرق */ -
نظام RGBA (مع الشفافية):
background-color: rgba(0, 0, 0, 0.5); /* أسود بشفافية 50% */ -
نظام HSL و HSLA (درجة اللون، الإشباع، الإضاءة):
color: hsl(0, 100%, 50%); background-color: hsla(240, 100%, 50%, 0.3);
مثال عملي:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: #4CAF50; /* أخضر */
}
p {
background-color: rgba(255, 255, 0, 0.3); /* أصفر شفاف */
}
.blue-text {
color: rgb(0, 0, 255);
}
</style>
</head>
<body>
<h1>عنوان بلون مخصص</h1>
<p>فقرة بخلفية شفافة.</p>
<p class="blue-text">نص أزرق باستخدام RGB.</p>
</body>
</html>
نصائح مهمة:
- استخدم ألوان متناسقة لتجعل تجربة المستخدم مريحة.
- تجنب تباين ضعيف بين النص والخلفية.
- أداة اختيار الألوان من Google أو مواقع مثل coolors.co تساعدك في اختيار مجموعات لونية احترافية.
الواجب العملي:
- صمّم صفحة تحتوي على:
- عنوان بلون مختلف.
- فقرة ذات خلفية ملونة.
- مربع أو زر بلون مخصص وشفافية معينة.