Nwahy Articles V3 pro

الخاصية color وتعبئة الحقول بالاوان او الصور

الخاصية color وتعبئة الحقول بالاوان او الصور

القسم css - الزيارات 8819 - التاريخ 20/3/2008
[color=FA0309]الخاصية color : [/color]

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

B { color: #CCFFFF }


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

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

أسماء الألوان : و هي أسماء الألوان التي تعودنا عليها ، الألوان ال16

الأساسية هي : aqua سماوي , black أسود , blue أزرق , fochsia قرمزي , gray رمادي , green أخضر , lime أخضر فسفوري , maroon أحمر داكن , navy أزرق داكن , olive زيتوني , purple أرجواني , red أحمر , silver فضي , teal أخضر داكن , white أبيض , yellow أصفر . و لكن المتصفحان كوميونيكيتور و إنترنت إكسبلورر يستطيعان التعرف على المئات من أسماء الألوان الأخرى . و تستطيع أن ترى أسماء هذه الألوان .

رقام الست عشرية : لتستطيع التحكم بدرجة أكبر في الألوان استخدم قيمها الست عشرية التي يمكنك أن تراها في صيغة #336699 على سبيل المثال . صفحات الأنماط المتعاقبة أيضاً تدعم الاختصارات الخاصة ببعض القيم الست عشرية ، مثلاً إذا كانت القيمة #336699 فإنها يمكن إعلانها هكذا #369 .

قيم RGB : و أخيراً .. فإن هناك طريقة جديد لتحديد اللون لهؤلاء المعتادين على رموز RGB و التي تستخدم عادة في برامج الرسوميات مثل فوتوشوب ، و سوف تبدو الخاصية color المحددة بقيم RGB هكذا :
B { color: rgb(52,204,0) }


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

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

--------------------------------------------------------------------------------



[color=FA0309]الخاصية background-color :[/color]

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

P.yellow { background-color: #FFFF66 }


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

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

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

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

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

--------------------------------------------------------------------------------



[color=FA0309]الخاصية background-image : [/color]

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

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

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

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

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


سلبيات :

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

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

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

--------------------------------------------------------------------------------



[color=FA0309]الخاصية background-repeat : [/color]

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

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


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


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



[color=FA0309]الخاصية background-attachment : [/color]

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

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


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


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

1-قيمة scroll ، و معها سوف تنزلق الصورة مع الصفحة صعوداً و هبوطاً .

2-قيمة fixed ، و معها لن تنزلق الصورة مع الصفحة على الإطلاق

--------------------------------------------------------------------------------



[color=FA0309]الخاصية background-position : [/color]

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

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


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

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

[color=FA0309]الكلمات المفتاحية : [/color]

1-قيمة top تجعل الصورة تحاذي أعلى العنصر الأمامي (الصندوق) .

2-قيمة bottom تجعل الصورة تحاذي أسفل (الصندوق) .

3-قيمة left تجعل الصورة تحاذي يسار الصندوق .

4-قيمة right تجعل الصورة تحاذي يمين الصندوق .

5-قيمة center تجعل الصورة في الوسط أفقياً إذا استُخدِمَت قبل الكلمة المفتاحية الأخرى ، أو عمودياً إذا استخدمت بعدها .

[color=FA0309]وحدات القياس : [/color]

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

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


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

[color=FA0309]النسبة المئوية : [/color]

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

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


--------------------------------------------------------------------------------



[color=FA0309]الخاصية المختصرة background : [/color]

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

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

P { background: url(images/background.gif) #CCFFCC repeat-y top right }
مشاركة الموضوع
Facebook Twitter Google+ Pinterest Reddit StumbleUpon Linkedin Tumblr Google Bookmarks Email
كن أول من يقيم الموضوع
12345

أضف تعليقك على الموضوع