صفحات الأنماط المتعاقبة

 

الدرس السابع

 

 

الخاصية color :

هذه الخاصية تماثل في عملها اسمها تماماً ، فهي تحدد لون عنصر ما ، و تأخذ نفس قيم اللون في هتمل :

B { color: #CCFFFF }

بهذه القاعدة سيعرض المتصفح أي نص سميك مثل هذا النص باللون المحدد . و في الواقع يسمى هذا بتحديد اللون الأمامي للنص .

هناك ثلاث طرق لتحديد اللون الذي تريد استخدامه مع هذه الخاصية :

B { color: rgb(52,204,0) }

إذا لم تكن تألف قيم RGB فإن مداها يتراوح بين 0 و 255 في قيمة كل لون من الألوان الثلاثة الأساسية الأحمر و الأخضر و الأزرق . المتصفح IE 3 لا يدعم استخدام قيم RGB ، و لكن المتصفحان IE 4 و IE 5 يدعمانها .

حتى الآن كنا نتكلم عن تحديد لون أمامي foreground للنص و لكن يمكننا أيضاً أن نحدد لون خلفي للنص كذلك .

 

الخاصية background-color :

في الهتمل عندما كنت تريد أن تضع لون خلفي وراء عنصر ما كنت تضعه في جدول و تجعل لون خلفية الجدول باللون الذي تريده . الآن أصبح هذا الأمر من أسهل ما يمكن عمله مع الخاصية background-color التي يمكنك بواسطتها أن تحدد لون خلفية لأي عنصر في الصفحة بما في ذلك الصور .

P.yellow { background-color: #FFFF66 }

القاعدة السابقة تم تطبيقها على هذه الفقرة . يمكنك تحديد اللون بواسطة أي من الطرق التي ذكرناها في الخاصية السابقة : أسماء الألوان أو القيم الست عشرية أو قيم RGB .

لا يلزمك أن تحدد لون لخلفية الفقرة كلها ، بل يمكنك أن تضع اللون في خلفية كلمة واحدة فقط إذا أردت .

في المتصفحان IE 3 و نتسكيب كوميونيكيتور لون الخلفية في الفقرة الأولى لا يمتد لنفس المسافة في كل سطر ، و لكنه في المقابل يظهر فقط خلف الكلمات نفسها . أما في المتصفحان IE 4 و IE 5 فإن اللون يمتد لمسافة أكبر قليلاً مكوناً مستطيل كبير حول الفقرة بكاملها (تماماً كما رأينا مع الإطارات) .

ملحوظة هامة : المتصفح IE 3 لا يدعم الخاصية background-color على الإطلاق ، و لكنه في المقابل يدعم الخاصية background و هي خاصية مختصرة تحقق نفس التأثير (سنتكلم عنها لاحقاً) .

تستطيع أن تعطي الخاصية background-color القيمة transparent أي "شفاف" و هذا يعني أن الخلفية التي ستراها هي نفس لون الخلفية في الصفحة - أي أن كل القيم الموروثة من واصفات أخرى سيتم تجاهلها .

 

 

الخاصية background-image :

تستطيع بواسطة هذه الخاصية أن تضع صورة GIF أو JPG في خلفية اي عنصر :

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

يمكنك أيضاً أن تطبق هذه الخاصية على كلمتين فقط إذا أردت . و إذا كنت تريد أن تملأ نافذة المتصفح بالكامل بصورة خلفية تستطيع أن تطبق هذه الخاصية على الواصفة <BODY> .

يمكنك أن تحدد عنوان الصورة Image URL بشكل تقريبي Relative أو كامل Full URL .

إذا استخدمت القيمة none مع هذه الخاصية فسوف تجعل المتصفح يتخطى أي قيمة موروثة من عنصر آخر و تجعل خلفية النص هي نفس خلفية الصفحة .

عندما تستخدم الخاصية background-image ، قد يكون من الجيد أيضاً أن تستخدم معها الخاصية background-color ، هذا اللون الذي ستحدده بهذه الخاصية سوف يظهر في أثناء تحميل الصورة ، بالإضافة إلى أنه سوف يظهر من خلال أي منطقة شفافة في الصورة :

CSS MAKES THE WORLD MORE BRIGHT

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

سلبيات :

بالنسبة لكل الخصائص المتعلقة بالخلفية فإن المتصفح IE 3 لا يدعم سوى الخاصية المختصرة background . و عندما تستخدم صفحات أنماط موصولة فإن IE 3 لا يظهر صور الخلفية على الإطلاق .

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

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

 

 

الخاصية background-repeat :

هذه الخاصية تمكنك من التحكم في تكرار صورة الخلفية أو عدم تكرارها :

B { background-repeat: no-repeat; background-image: url(images/background.gif) }

القاعدة السابقة تم تطبيقها على هذه الفقرة بالكامل ، و استخدمنا نفس الصورة التي استخدمناها من قبل و لكنها هذه المرة لم تكرر نفسها لأننا استخدمنا القيمة no-repeat مع الخاصية background-repeat و لهذا فقد ظهرت مرة واحدة فقط .

إذا كنت تريد أن تكرر الصورة الخلفية نفسها عمودياً فقط أو أفقياً فقط ، فيمكنك استخدام القيمة repeat-x لتجعل الصورة تكرر نفسها أفقياً فقط (كما ترى في خلفية هذه الفقرة) ، أو استخدام القيمة repeat-y لجعل الصورة تكرر نفسها عمودياً فقط ، أما إذا استخدمت القيمة repeat فسوف تكرر نفسها في كلا الاتجاهين .

 

 

الخاصية background-attachment :

قد تكون اعتدت على الصور الخلفية التي تنزلق مع الصفحة صعوداً أو هبوطاً ، لكن مع صفحات الأنماط يمكنك أن تجعل الصورة ثابتة لا تصعد أو تنزل مهما زلقت الصفحة صعوداً أو هبوطاً باستخدام الخاصية background-attachment :

BODY { Background-attachment: fixed; background-image: url(images/background.jpg) }

و سوف تجد هذه القاعدة مطبقة في هذه الصفحة . (هذه الخاصية لا تعمل مع المتصفح كوميونيكيتور و لكنها تعمل مع المتصفح إنترنت إكسبلورر) .

هذه الخاصية لا تعمل إلا مع الواصفة <body> فقط . و بالنسبة لقيمها فلديك اختياران :

 

 

الخاصية background-position :

تستطيع من خلال هذه الخاصية أن تتحكم في المكان الذي سوف يبدأ منه عرض الصورة في خلفية العنصر الذي تريده .

P { background-position: center bottom; background-image: url(images/background.gif) }

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

يمكنك تحديد مكان بدء الصورة بإعطاء القيم للخاصية background-position بثلاث طرق :

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

P { background-position: 70px 10px; background-repeat: repeat-y; background-image: url(images/background.gif) }

يمكنك استخدام أي وحدة من وحدات القياس التي تكلمنا عنها من قبل مثل البكسل و النقطة و البوصة .. إلخ .

كذلك تستطيع أن تستخدم النسبة المئوية في تحديد مكان بدء صورة الخلفية .

P { background-position: 75% 50%; background-image: url(background.gif) }

 

 

الخاصية المختصرة background :

هذه الخاصية هي التي يجب أن تستعملها مع المتصفح IE 3 لأنها هي الوحيدة من بين خصائص الخلفيات التي تعمل معه بالإضافة إلى عملها مع المتصفحات الأخرى أيضاً .

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

P { background: url(images/background.gif) #CCFFCC repeat-y top right }

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

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

 

 

 

 

الدرس التالي