[color=FA0309]الخاصية color : [/color]
هذه الخاصية تماثل في عملها اسمها تماماً ، فهي تحدد لون عنصر ما ، و تأخذ نفس قيم اللون في هتمل :
سلبيات : بالنسبة لكل الخصائص المتعلقة بالخلفية فإن المتصفح IE 3 لا يدعم سوى الخاصية المختصرة background . و عندما تستخدم صفحات أنماط موصولة فإن IE 3 لا يظهر صور الخلفية على الإطلاق . المتصفح كوميونيكيتور (لكل من ويندوز و ماكنتوش) و IE 4 (للماكنتوش) في بعض الأحيان لا تتجاوب بطريقة جيدة عندما تحدد صورة خلفية لجزء من فقرة ما ، قد لا يعرضها على الإطلاق ، أو ربما يضيف فواصل سطور حول النص الذي يحوي الصورة كخلفية له . إذا حددت صورة خلفية و لون للخلفية فإن المتصفح كوميونيكيتور في بعض الأحيان يعامل اللون على أنه أكثر أهمية و يعرضه فوق الصورة و ليس تحتها .
[color=FA0309]الخاصية background-attachment : [/color] قد تكون اعتدت على الصور الخلفية التي تنزلق مع الصفحة صعوداً أو هبوطاً ، لكن مع صفحات الأنماط يمكنك أن تجعل الصورة ثابتة لا تصعد أو تنزل مهما زلقت الصفحة صعوداً أو هبوطاً باستخدام الخاصية background-attachment :
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 }
