إتصل بنا

الاسم

بريد إلكتروني *

رسالة *

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

3 تعليقات

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

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

كالعادة ننطلق من تعريف الخاصية الجديدة ، ثم تحديد مختلف القيم التي تأخذها .
خاصية التحكم في لون النصوص هي 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: |background-color| |background-image| |background-repeat| |background-attachment| |background-position| 
background: #FFFFFF url("soleil.png") no-repeat fixed top left;

إنها أول خاصية خارقة عرفناها حتى الان ، و هناك المزيد ، هذه الخاصية تتميز بما يلي :
  • لا يهم ترتيب القيم التي تدخلها في خاصية background ، المهم فقط هو أن تفصل بين هذه القيم بمساحات ( espace ) .
  • لستَ مجبرا على ذكر كل القيم في هذه الخاصية ، إذا أردت مثلا ألا تكتب قيمة fixed فيمكنك حذفها بكل بساطة .
إدخال عدة صور للخلفية
بفضل تسهيلات الـ CSS 3 ، أصبح يمكننا إدخل أكثر من صورة كخلفية لصفحاتنا ، من أجل ذلك يكفي أن ندخل قيم الصورة الأولى بالطريقة العادية و قبل إغلاق الخاصية نضع فاصلة , ثم قيم الصوة الثانية و هكذا ، مثال :

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

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


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

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

الكاتب : Med Anass SDK

عاشق النت إسم على مسمى أعشق كل ما له علاقة بالوب و الإنترنت
مساحة إعلانية

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

  1. دروس رائعة ومميزة جداً .. شكراً لك

    ردحذف
  2. راااااااااااااااااااااااائع

    ردحذف
  3. جميل تابع ، أتمنى لك التوفيق ،

    ردحذف

لإدخال الأكواد بالتعليقات عليك تحويلها بـأداة ترميز أحرف HTML الخاصة