الدرس الثالث : التحكم فى الروابط و الخلفيات

مرحبا بكم

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


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;

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

هذا هو كل مايمكن شرحه الأن عن الخلفيات والروابط واتمنى انك تكون استفدت شئ جديد فى الـ css من خلال هذا الدرس
واراكم بالدرس المقبل بإذن الله.

مشكور

شكرا لك

مشكوووووووووووورة أختي

درس ممتاز جدا الله يعطيك العافيه

يعطيكأ العافية أخوي , ماشاء الله شرح واضح ومفهومـ

تسلم عالدرس

مششـكـوووور آللهـ يع ـطيك الع ـآفيهـ

يسلموووو يا غاليــــــ

شكرا لك على الدرس المميز..

درس روعة