من طرف هناك عدة اشياء
بالنسبة للروابط والصور يمكننا إعدادها والتحكم بها
وسنبدأ بالروابط
لكن قبل
البدأ هناك عدة حالات للروابط وهى
1. ظهور الروابط للمرة الأولى للزائر
(link)
2. رابط تم زيارته من قبل (visited)
3. الرابط عند مرور الفأرة عليه
(hover)
4. الرابط عند التركيز عليه (اى تم اختياره, عن طريق الضغط على زر tab
مثلا)
5. الحالة الأخيرة وهى active وهى تحدث عندما يبدأ المستخدم بالضغط على
الرابط
كل هذه الحالات يمكننا التحكم بشكل الروابط عند حدوث اى حالة
منهم للرابط.
ويتم التحكم بهم عن طريق تحديد عنصر الرابط اولا a ثم علامة :
ثم اسم الحالة
واليك الحالات التى تم وصفها اعلاه بنفس
الترتيب
كود
هكذا استطعنا الوصول لكل حالة, ويمكنك التحكم بها وإعداد نص الروابط كما تم
شرح التعامل مع النصوص فى الدرس السابق.
نذهب للجزء الثانى من الدرس وهو
الخلفيات المصورة Backgrounds
او جعل الصور خلفية للصفحة (او لجزء من
الصفحة)
وهناك عدة خصائص لكل خاصية منهم لها عدة قيم معينة نحن مقيدين
بها.
لكن قبل التطرق لهذه الخاصيات الخاصة بصور الـ backgrounds لنتعرف اولا
على الخاصية background لتعيين لون خلفية عادى للصفحة (او لأى جزء
منها)
كود:
هكذا تم إعداد لون
الخلفية الى اللون الأبيض.
اذا اردنا وضع صورة يتم الأمر بالشكل
التالى
كود
[/hide]
حيث
images/background.gif هو مكان الصورة التى ستوضع كاخلفية
لكن بهذا الشكل
الصورة سيتم عرضها بكامل الصفحة (وتكرارها اذا كانت صغيرة)
لكن مسألة
التكرار يمكننا التحكم بها ايضا عن طريق الخاصية background-repeat
ونضع لها
احد القيم التالية
اذا استخدمنا
الإختيار الثالث no-repeat هذا يجعلنا ننظر لأمور اخرى.
بمعنى اذا كانت الصفحة
كبيرة جدا (من حيث الطول مثلا)
اذن عندما يتم الذهاب بإستخدام الـ scroll bar
الى الأسفل ستختفى الخلفية.
ماذا اذا كنا نريدها ان تظل ثابتة؟ يتم الأمر عن
طريق الخاصية
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% من حجم الشاشة
ويتم الأمر بالشكل التالى
كامثال
كود:
حيث x هو الأبعاد
الأفقية بدأ من الجهة اليسرى
و y هو الأبعاد العمود بدأ من الأعلى
ويمكنك
ايضا اعداد الشئ نفسه بالبيكسل
مثلا
كود
هذا سوف يضع
الخلفية اعلى اليسار
وكلما زادت نسبة x كلما ابتعدت الخلفية عن اليسار
وهكذا
بالنسبة لـ y
كما يمكننا اختصار كل ماسبق بالشكل
التالى
كود:
حيث القيمة الأولى
هى الرقم
وبعدها مكان خلفية الصورة كما تلاحظ
بعدها موقع الخلفية بالنسبة
للصفحة
بعدها التحكم فى مسألة التكرار.
هذا هو كل مايمكن شرحه الأن عن
الخلفيات والروابط واتمنى انك تكون استفدت شئ جديد فى الـ css من خلال هذا
الدرس
بالنسبة للروابط والصور يمكننا إعدادها والتحكم بها
وسنبدأ بالروابط
لكن قبل
البدأ هناك عدة حالات للروابط وهى
1. ظهور الروابط للمرة الأولى للزائر
(link)
2. رابط تم زيارته من قبل (visited)
3. الرابط عند مرور الفأرة عليه
(hover)
4. الرابط عند التركيز عليه (اى تم اختياره, عن طريق الضغط على زر tab
مثلا)
5. الحالة الأخيرة وهى active وهى تحدث عندما يبدأ المستخدم بالضغط على
الرابط
كل هذه الحالات يمكننا التحكم بشكل الروابط عند حدوث اى حالة
منهم للرابط.
ويتم التحكم بهم عن طريق تحديد عنصر الرابط اولا a ثم علامة :
ثم اسم الحالة
واليك الحالات التى تم وصفها اعلاه بنفس
الترتيب
كود
هكذا استطعنا الوصول لكل حالة, ويمكنك التحكم بها وإعداد نص الروابط كما تم
شرح التعامل مع النصوص فى الدرس السابق.
نذهب للجزء الثانى من الدرس وهو
الخلفيات المصورة Backgrounds
او جعل الصور خلفية للصفحة (او لجزء من
الصفحة)
وهناك عدة خصائص لكل خاصية منهم لها عدة قيم معينة نحن مقيدين
بها.
لكن قبل التطرق لهذه الخاصيات الخاصة بصور الـ backgrounds لنتعرف اولا
على الخاصية background لتعيين لون خلفية عادى للصفحة (او لأى جزء
منها)
كود:
هكذا تم إعداد لون
الخلفية الى اللون الأبيض.
اذا اردنا وضع صورة يتم الأمر بالشكل
التالى
كود
[/hide]
حيث
images/background.gif هو مكان الصورة التى ستوضع كاخلفية
لكن بهذا الشكل
الصورة سيتم عرضها بكامل الصفحة (وتكرارها اذا كانت صغيرة)
لكن مسألة
التكرار يمكننا التحكم بها ايضا عن طريق الخاصية background-repeat
ونضع لها
احد القيم التالية
- repeat-y للتكرار العمودى فقط, يعنى يتم تكرار الصورة بالطول فقط
- repeat-x للتكرار الأفقى فقط. يتم تكرار الخلفية بالعرض فقط
- no-repeat يعنى بدون تكرار
اذا استخدمنا
الإختيار الثالث no-repeat هذا يجعلنا ننظر لأمور اخرى.
بمعنى اذا كانت الصفحة
كبيرة جدا (من حيث الطول مثلا)
اذن عندما يتم الذهاب بإستخدام الـ scroll bar
الى الأسفل ستختفى الخلفية.
ماذا اذا كنا نريدها ان تظل ثابتة؟ يتم الأمر عن
طريق الخاصية
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% من حجم الشاشة
ويتم الأمر بالشكل التالى
كامثال
كود:
حيث x هو الأبعاد
الأفقية بدأ من الجهة اليسرى
و y هو الأبعاد العمود بدأ من الأعلى
ويمكنك
ايضا اعداد الشئ نفسه بالبيكسل
مثلا
كود
هذا سوف يضع
الخلفية اعلى اليسار
وكلما زادت نسبة x كلما ابتعدت الخلفية عن اليسار
وهكذا
بالنسبة لـ y
كما يمكننا اختصار كل ماسبق بالشكل
التالى
كود:
حيث القيمة الأولى
هى الرقم
وبعدها مكان خلفية الصورة كما تلاحظ
بعدها موقع الخلفية بالنسبة
للصفحة
بعدها التحكم فى مسألة التكرار.
هذا هو كل مايمكن شرحه الأن عن
الخلفيات والروابط واتمنى انك تكون استفدت شئ جديد فى الـ css من خلال هذا
الدرس
