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

سكربت المقالات يتميز بإضافة الاقسام والمقالات والتعليقات والمشرفين ومحرك البحث الذكي والتصفح الخفيف والسريع

 
الخميس 4 ديسمبر 2008 الزوار 467066 المتواجدون 34 زوار الشهر 9104




موقع نواحي    مكتبة الدروس الدروس    css css    الخاصية color وتعبئة الحقول بالاوان او الصور الخاصية color وتعبئة الحقول بالاوان او الصور

الخاصية 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 للنص و لكن يمكننا أيضاً أن نحدد لون خلفي للنص كذلك .

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


الخاصية 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 ، هذا اللون الذي ستحدده بهذه الخاصية سوف يظهر في أثناء تحميل الصورة ، بالإضافة إلى أنه سوف يظهر من خلال أي منطقة شفافة في الصورة


سلبيات :

بالنسبة لكل الخصائص المتعلقة بالخلفية فإن المتصفح 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> فقط . و بالنسبة لقيمها فلديك اختياران :

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

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

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


الخاصية background-position :

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

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


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

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

الكلمات المفتاحية :

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

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

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

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

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

وحدات القياس :

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

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 }


تاريخ الإضافة تاريخ الإضافة : 20/3/2008
زيارات الصفحة زيارات الصفحة : 147
رابط ذو صلة رابط ذو صلة : http://www.nwahy.com
كاتب الموضوع كاتب الموضوع : موقع نواحي