دورة css كاملة للمبتدئين
الدرس السادس
الخاصية 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 التي يمكنك بواسطتها أن تحدد لون خلفية لأي عنصر في الصفحة بما في ذلك الصور .
القاعدة السابقة تم تطبيقها على هذه الفقرة . يمكنك تحديد اللون بواسطة أي من الطرق التي ذكرناها في الخاصية السابقة : أسماء الألوان أو القيم الست عشرية أو قيم 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 :
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 :
تستطيع من خلال هذه الخاصية أن تتحكم في المكان الذي سوف يبدأ منه عرض الصورة في خلفية العنصر الذي تريده .
عندما نطبق القاعدة السابقة على فقرة مثل هذه الفقرة ، فإن صورة الخلفية تأخذ موضعها في منتصف و أسفل الصندوق الذي يحدد هذه الفقرة ، (الكلمة الأولى center تشير إلى الموضع الأفقي ، و الكلمة الثانية bottom تشير إلى الموضع العمودي) . ثم تكرر الصورة نفسها إلى اليمين و إلى الأسفل بشكل طبيعي .
يمكنك تحديد مكان بدء الصورة بإعطاء القيم للخاصية background-position بثلاث طرق :
الكلمات المفتاحية :
1-قيمة top تجعل الصورة تحاذي أعلى العنصر الأمامي (الصندوق) .
2-قيمة bottom تجعل الصورة تحاذي أسفل (الصندوق) .
3-قيمة left تجعل الصورة تحاذي يسار الصندوق .
4-قيمة right تجعل الصورة تحاذي يمين الصندوق .
5-قيمة center تجعل الصورة في الوسط أفقياً إذا استُخدِمَت قبل الكلمة المفتاحية الأخرى ، أو عمودياً إذا استخدمت بعدها .
وحدات القياس :
وحدات القياس تعطيك تحكم أكبر في مكان بدء صورة الخلفية ، حيث يمكنك تحديد النقطة الأفقية و العمودية التي تبدأ من عندها الصورة بكل دقة :
يمكنك استخدام أي وحدة من وحدات القياس التي تكلمنا عنها من قبل مثل البكسل و النقطة و البوصة .. إلخ .
النسبة المئوية :
كذلك تستطيع أن تستخدم النسبة المئوية في تحديد مكان بدء صورة الخلفية .
الخاصية المختصرة background :
هذه الخاصية هي التي يجب أن تستعملها مع المتصفح IE 3 لأنها هي الوحيدة من بين خصائص الخلفيات التي تعمل معه بالإضافة إلى عملها مع المتصفحات الأخرى أيضاً .
بهذه الخاصية تستطيع أن تحدد لون للخلفية ، صورة للخلفية ، طريقة تكرار الصورة ، تجعل صورة الخلفية ثابتة أو منزلقة مع الصفحة ، تحديد مكان بدء الصورة :
هذه الفقرة تم تطبيق القاعدة السابقة عليها ، كما ترى فإن لون الخلفية هو أخضر فاتح ، و الصورة في الخلفية متكررة عمودياً فقط ، و تبدأ من الركن العلوي الأيمن للصندوق الذي يحيط بهذه الفقرة (تذكر أن المتصفح كوميونيكيتور لا يدعم خاصية تحديد مكان بدء صورة الخلفية) .
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) }
هذه الخاصية هي التي يجب أن تستعملها مع المتصفح IE 3 لأنها هي الوحيدة من بين خصائص الخلفيات التي تعمل معه بالإضافة إلى عملها مع المتصفحات الأخرى أيضاً .
بهذه الخاصية تستطيع أن تحدد لون للخلفية ، صورة للخلفية ، طريقة تكرار الصورة ، تجعل صورة الخلفية ثابتة أو منزلقة مع الصفحة ، تحديد مكان بدء الصورة :
P { background: url(images/background.gif) #CCFFCC repeat-y top right }
ليست هناك تعليقات:
إرسال تعليق