مدونة عاشق النت: تحديد ألوان النصوص و الخلفيات بـCSS

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

كيفية تغيير ألوان النصوص .
كيفية وضع صورة كخلفية .
كيفية إضافة الظلال .

كل هذا و سحر الـCSS لا يزال في بدايته

.
الفهرس

ألوان النصوص .

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

.

تحديد الألوان بأسمائها
الطريقة الأبسط لتحديد اللون هي كتابة إسمه في قيمة الخاصية color و إسمه بالإنجليزية طبعا ، مثلا :

h1 { color: red;}

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

، على كل حال ستجد في هذه الصفحة من موقع W3Schools قائمة طويلة بالألوان و أسمائها .

h1 {
color: DodgerBlue;
}

ترميز HEX-Colors
إن شاهدت الألوان في الجدول على هذه الصفحة من موقع W3Schools ، ستجد ألوانا كثيرة ، لكنها قليلة جدا إن علمت أن شاشة الحاسوب تستطيع عرض 16 مليون لون مختلف .

لحسن الحظ قام مطوروا الوب باختراع طرق جميلة و ذكية لتحديد أي لون من كل تلك الألوان الكثيرة ، الطريقة الأولى هي عبر إستعمال ما يسمى الـHex-color ، إنها الطريقة الأكثر إستعمالا حاليا في كل مواقع الوب ، و لكن هناك طريق أخرى غيرها سنلقي نظرة عليها .

كل لون يوافق رمزا معينا يكتب على شكل xxxxxx# ، ( مثال : FF00AA# ) ، فهذه التركيبة من الأرقام و الأحرف تمكن من تحديد جميع الألوان الممكنة .
يجب علينا دائما أن نبدأ بعلامة ' # ' ، ثم نُتبعه بـ6 أحرف أو أرقام أو هما معا .
هذه الأحرف التي نكتبها تعمل زوجا بزوج ، حيث أن الحرفين الأولين يحددان كمية اللون الأحمر ، و الحرفين الثانيين يحددان كمية اللون الأخضر ، الحرفين الأخيرين يحددان كمية اللون الأزرق . فبخلط هذه الكميات من الألوان ( الأحمر - الأخضر - الأزرق ) يمكننا تحديد أي لون نريد .

بعض الألوان يجب أن تكون معروفة ، اللون الأسود هو 000000# و اللون الأبيض هو FFFFFF# .

هناك العديد من برامج الرسم و التصميم كالفوتوشوب تمكنك من معرفة الـHex-color الخاص بكل لون تحدده

ليس عمليا إستخدام الفوتوشوب في كل مرة تريد فيها تحديد الـHex-color الخاص بلون ما ، يمكنك إستخدام البرنامج الصغير في هذا المقال هنا .

طريقة RGB
ماذا تعني RGB ؟ إنها اختصار لـRed-Green-Blue ، و هي طريقة كالـHex-color تماما ، تمكننا من تحديد الألوان إنطلاقا من كميات الألوان المكونة لها .

يمكنك تحديد كميات كل من الألوان الأساسية الثلاث في كل لون تجده إنطلاقا من برنامج Paint فقط ، لكنني أشجع على تحميل برنامج Capture Color لأنه ببساطة يقدم كل المعلومات التي تتعلق باللون الذي تحدده .

بعد تحديد الـRGB الخاص باللون الذي تريد إدخاله ( مثلا red:61 , Green :122 , Blue: 214 ) نذهب إلى قيمة الخاصية color و نكتب :

h1 {
color:rgb(61,122,214);
}

ألوان الخلفية

لتحديد لون الخون الخلفية نستخدم الخاصية background-color ، و هي مثل الخاصية color ، تأخذ قيما تشير إلى الألوان حيث نحدد لون الخلفية بإسمه أو بالـHex-color الخاص به ، أو الـrgb .

لكي نغير لون خلفية الصفحة ، نقوم بتخصيص العنصر الكبير <body> ، ليست هناك أي مفاجأة هنا ، فكما نعلم العنصر <body> هو كل الصفحة التي نشاهدها على المتصفح . مثال :

body {
background-color:#FFFF99;
}

نفترض مثلا أنك أردت أن تجعل خلفية الموقع سوداء ، هذا يعني أنه عليك أن تجعل النصوص بيضاء لكي تظهر في الموقع ، فالخلفية السوداء بسيطة يمكنك تحديدها مثل ما سبق ، لكن النصوص : فهل ستضيف خاصية color:#FFFFFF إلى كل عناصر صفحتك ؟ بالطبع لا فهذا متعب و يتطلب الكثير . ببساطو يمكنك وضع الخاصية color:#FFFFFF في العنصر <body> و ستظهر جميع نصوص الموقع باللون الأبيض .
بصفة عامة ، إن طبقت خاصية color على عنصر ما في موقعك ، فإن تلك الخاصية تطبق على جميع العناصر الفرعية التي توجد داخل ذلك العنصر .

body {
color:#FFFFFF;
background-color:#000000;
}

يمكن تغيير لون خلفية العناصر أيضا ، فمثلا يمكننا جعل خلفية العنوان مختلفة . بمعنى اخر يمكن لجميع العناصر سواء كانت خاصة بالنصوص أو لا أن تحتوي على خاصيتي color و background-color . مثلا :

h1 {
color:DodgerBlue;
background-color:Orange;
}

نفس الشيء بالنسبة للعناصر الصغيرة كـ <span> ، <strong> ، <em> .

صورة الخلفية

في الأمثلة التالية ، سنتعرف على الخاصية الخاصة بإدخال الصور كخلفية للموقع ، هذه الخاصية لا تشتغل على العنصر <body> فقط ، بل تشتغل على على جميع العناصر كالخاصية السابقة تماما .

الخاصية التي تمكن من إدخل صورة الخلفية هي background-image ، و هي تأخذ كقيمة لها ("عنوان الصورة")url .

background-image:url("neige.png");

و بالطبع ليس ضروريا أن تكون صورة خلفيتك في نوع png ، يمكن أن تكون أي نوع اخر كـ jpg أو gif ...
العنوان الذي يتم إدخاه يمكن أن يكون عناوانا ثابثا ( //:http ) أو عنوانا من نوع relative كما في المثال .

بالنسبة لعنوان الصورة من نوع relative ، فإذا كنت تكتب الـCSS في ملف خارجي css. ، يجب أن تضع رابط الصورة بالنسبة لملف css. و ليس ملف html. .

خاصيات إضافية لصورة الخلفية

هناك بعض الخاصيات التي تكمل خاصية background-image ، و هي خاصيات تمكن من التحكم في الطريقة التي تظهر بها صورة الخلفية .
background-attachment
خاصية background-attachment تمكن من تتبيث صورة الخلفية بحيث يظهر محتوى الصفحة هو من ينزلق للأعلى و الأسفل ، و هذه الخاصية تأخذ قيمتين :

fixed : تظهر صورة الخلفية ثابثة .
scroll : تظهر صورة الخلفية عادي ( من الإعدادات إفتراضية )

body {
background-image:url("neige.png");
background-attachment:fixed; /* ستبقى الخلفية ثابثة */
}

background-repeat
في الإعدادات الإفتراضية تتكرر صورة الخلفية أفقيا و عموديا حتى تكسح مساحة الخلفية بأكملها ، و مع خاصية background-repeat ، يمكننا تغيير كل هذا ، و تأخذ هذه الخاصية 4 قيم :

no-repeat : صورة الخلفية لن تتكرر و ستظهر مرة واحدة فقط .
repeat-x : ستتكرر الصورة في السطر الأول فقط ( أفقيا ) .
repeat-y : ستتكرر الصورة في العمود الأول فقط ( عموديا ) .
repeat : ستتكرر الصورة عموديا و أفقيا كما في الإعدادات الإفتراضية .

body {
background-image:url("soleil.png");
background-repeat:no-repeat; /* لن تتكرر الصورة */
}

background-position
لتحيد المكان الذي نريد أن تكون فيه صورة الخلفية نستعمل خاصية background-position ، تستعمل عادة بجانب خاصية background-repeat حيث لا تتكرر الصورة .

تأخذ خاصية background-position قيمتين عدديتين يعبر عنهما بالوحدة بكسل ( px ) ، حيث تحدد القيمة الأولى المسافة بين الصورة و الطرف الأيسر للصفحة ، و القيمة الثانية تحدد المسافة بين الصورة و الطرف العلوي للصفحة .

background-position: 50px 30px;

بهذه الطريقة نحصل على صورة الخلفية على بعد مسافة 50px من الطرف الأيمن للصفحة و على بعد مسافة 30px من الطرف الأعلى للصفحة .

يمكن لخاصية background-position أن تأخذ قيم عديدية معبر عنها بوحدات أخرى غير البكسل كالـ cm و em و غيرها ، أو يمكنها أن تأخذ قيما أخرى :

top : الصورة ستظهر في أعلى الصفحة .
bottom : ستظهر في أسفل الصفحة .
left : على يسار الصفحة .
right : على يمين الصفحة .
center : في وسط الصفحة تماما .

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

background-position: top left;

بصفة عامة ، إن أردنا أن نضع صورة الشمس كخلفية الصفحة ، بحيث تظهر في أعلى اليسار و تبقى تابثة فإننا سنكتب :

body {
background-image: url("soleil.png");
background-repeat :no-repeat; /* لن تتكرر الصورة */
background-attachment: fixed; /* ستبقى الصورة ثابثة */
background-position: top left; /* ستظهر الصورة في أعلى اليسار */
}

إختزال الخصائص
أليس متعبا كتابة كل تلك الخصائص ، ما رأيكم في جمع كل ذلك في خاصية واحدة تقوم بالعمل كله ، و بالفعل توجد خاصية تجمع كل الخاصيات السابقة ، إنها خاصية background و هي تأخذ جميع القيم التي تأخذها الخاصيات السابقة :

إنها أول خاصية خارقة عرفناها حتى الان ، و هناك المزيد ، هذه الخاصية تتميز بما يلي :

لا يهم ترتيب القيم التي تدخلها في خاصية background ، المهم فقط هو أن تفصل بين هذه القيم بمساحات ( espace ) .
لستَ مجبرا على ذكر كل القيم في هذه الخاصية ، إذا أردت مثلا ألا تكتب قيمة fixed فيمكنك حذفها بكل بساطة .

إدخال عدة صور للخلفية
بفضل تسهيلات الـ CSS 3 ، أصبح يمكننا إدخل أكثر من صورة كخلفية لصفحاتنا ، من أجل ذلك يكفي أن ندخل قيم الصورة الأولى بالطريقة العادية و قبل إغلاق الخاصية نضع فاصلة , ثم قيم الصوة الثانية و هكذا ، مثال :

body {
background: url("soliel.png") no-repeat fixed top left , url("neige.png") fixed ;
}

الصورة الأولى ستظهر فوق الثانية ، و الثانية ستظهر فوق الثالثة و هكذا ... فترتيب الكود مهم هنا لذلك إنتبه

يجب الإنتباه إلى أن خاصية تعدد صور الخلفية لا تشتغل على جميع المتصفحات ، كالمتصفحات القديمة - التي ظهرت قبل الـ CSS 3 - ، لكن عموما فإن هذه الخاصية تشتغل على جميع المتصفحات المهمة كغوغل كروم

و فايرفوكس

قبل الإنتهام من فصل الخلفيات تذكر أنه يمكن تطبيق الخاصية background على جميع العناصر الأخرى ( العناوين ، الفقرات ، كل العناصر ... ) .

→ الفصل التالي الفصل السابق ←

إتصل بنا

مدونة عاشق النت

المقالات الأكثر مشاهدة

التسميات

المساهمون

في المدونة

إحصائيات

محافل مميزة

تحديد ألوان النصوص و الخلفيات بـCSS

تعليقات بلوجر