التحكم فى الروابط و الخلفيات Backgrounds In CSS

هناك عدة اشياء بالنسبة للروابط والصور يمكننا إعدادها والتحكم بها
وسنبدأ بالروابط
لكن قبل البدأ هناك عدة حالات للروابط وهى

1. ظهور الروابط للمرة الأولى للزائر (link)
2. رابط تم زيارته من قبل (visited)
3. الرابط عند مرور الفأرة عليه (hover)
4. الرابط عند التركيز عليه (اى تم اختياره, عن طريق الضغط على زر tab مثلا)
5. الحالة الأخيرة وهى active وهى تحدث عندما يبدأ المستخدم بالضغط على الرابط

كل هذه الحالات يمكننا التحكم بشكل الروابط عند حدوث اى حالة منهم للرابط.

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

واليك الحالات التى تم وصفها اعلاه بنفس الترتيب
كود:

الكود:: a:link { color: blue; }
a:visited { color: purple; }
a:hover { text-decoration: none; }
a:focus { color: yellow; }
a:active { color: red; }

هكذا استطعنا الوصول لكل حالة, ويمكنك التحكم بها وإعداد نص الروابط كما تم شرح التعامل مع النصوص فى الدرس السابق.

نذهب للجزء الثانى من الدرس وهو الخلفيات المصورة Backgrounds

او جعل الصور خلفية للصفحة (او لجزء من الصفحة)

وهناك عدة خصائص لكل خاصية منهم لها عدة قيم معينة نحن مقيدين بها.

لكن قبل التطرق لهذه الخاصيات الخاصة بصور الـ backgrounds لنتعرف اولا على الخاصية background لتعيين لون خلفية عادى للصفحة (او لأى جزء منها)
كود:

الكود:: p{
background: #ffffff;
}

هكذا تم إعداد لون الخلفية الى اللون الأبيض.

اذا اردنا وضع صورة يتم الأمر بالشكل التالى
كود:

الكود:: p{
background-image: url(images/background.gif);
}

حيث images/background.gif هو مكان الصورة التى ستوضع كاخلفية

لكن بهذا الشكل الصورة سيتم عرضها بكامل الصفحة (وتكرارها اذا كانت صغيرة)

لكن مسألة التكرار يمكننا التحكم بها ايضا عن طريق الخاصية background-repeat

ونضع لها احد القيم التالية

* repeat-y للتكرار العمودى فقط, يعنى يتم تكرار الصورة بالطول فقط
* repeat-x للتكرار الأفقى فقط. يتم تكرار الخلفية بالعرض فقط
* no-repeat يعنى بدون تكرار

اذا استخدمنا الإختيار الثالث no-repeat هذا يجعلنا ننظر لأمور اخرى.
بمعنى اذا كانت الصفحة كبيرة جدا (من حيث الطول مثلا)
اذن عندما يتم الذهاب بإستخدام الـ scroll bar الى الأسفل ستختفى الخلفية.

ماذا اذا كنا نريدها ان تظل ثابتة؟ يتم الأمر عن طريق الخاصية
background-attachment واعطائها القيمة fixed

فيكون كامل كود الخلفية بالشكل التالى
كود:

الكود:: background-image: url(images/background.gif);
background-repeat: no-repeat;
background-attachment: fixed;

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

لكن هذا المكان للخلفية ربما لا يبدوا جيدا

ونريد تغييره. يتم الأمر عن طريق الخاصية background-position

هذه الخاصية فى الحقيقة لها عدة انواع من القيم يمكن ان نضعها لها.
اول هذه القيم هى
left و right و top و bottom و center
واظن كل قيمة معناها واضح.
لكن يمكننا ايضا ان نضع لها مثلا
top right يعنى اعلى اليمين او top left اعلى اليسار,
او bottom left اسفل اليسار او bottom right اسفل اليمين
او top center او bottom center

او مثلا center right او center left

هذا بالنسبة للنوع الأول للقيم التى يمكن ان نضعهم لهذه الخاصية.

هناك نوع اخر للقيم بإستخدام %

وبهذا النوع من القيم, يعنى x% من حجم الشاشة
ويتم الأمر بالشكل التالى كامثال
كود:

الكود:: background-position: x% y%;

حيث x هو الأبعاد الأفقية بدأ من الجهة اليسرى
و y هو الأبعاد العمود بدأ من الأعلى

ويمكنك ايضا اعداد الشئ نفسه بالبيكسل
مثلا
كود:

الكود:: background-position: 0px 0px;

هذا سوف يضع الخلفية اعلى اليسار
وكلما زادت نسبة x كلما ابتعدت الخلفية عن اليسار
وهكذا بالنسبة لـ y

كما يمكننا اختصار كل ماسبق بالشكل التالى
كود:

الكود:: background: #ffffff url(images/background.gif) 0px 0px no-repeat;

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

شكرا لك
بارك الله فيك

éMy DoUçé

» بعض الخلفيات الغريبة من تصميمي