الرئيسيةبحـثالتسجيلس .و .جالأعضاءالمجموعاتدخول

شاطر | 
 

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

اذهب الى الأسفل 
كاتب الموضوعرسالة
المهندس صافى
مؤسس المنتدى والمدير العام

avatar

احترام القوانين :
ذكر تاريخ الميلاد : 25/07/1998
عدد المساهمات : 1044
نقاط : 3102
تاريخ التسجيل : 29/08/2009
العمر : 19
الموقع : الاسكندرية

مُساهمةموضوع: الدرس الثالث : التحكم فى الروابط و الخلفيات    الجمعة مارس 04, 2011 7:54 am

مرحبا بكم

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


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 من خلال هذا الدرس
واراكم بالدرس المقبل بإذن الله.
الرجوع الى أعلى الصفحة اذهب الى الأسفل
معاينة صفحة البيانات الشخصي للعضو http://www.toty.arabstar.biz
mohamed_m
مشرف عام
مشرف عام
avatar

احترام القوانين :
ذكر تاريخ الميلاد : 16/07/1998
عدد المساهمات : 447
نقاط : 853
تاريخ التسجيل : 29/08/2009
العمر : 19

مُساهمةموضوع: رد: الدرس الثالث : التحكم فى الروابط و الخلفيات    السبت ديسمبر 17, 2011 7:48 am

gamda fa7t
shokran 3la al shar7
الرجوع الى أعلى الصفحة اذهب الى الأسفل
معاينة صفحة البيانات الشخصي للعضو
ti2oo
عضو محبوب فى المنتدى


احترام القوانين :
تاريخ الميلاد : 18/09/1990
عدد المساهمات : 138
نقاط : 287
تاريخ التسجيل : 29/08/2009
العمر : 27

مُساهمةموضوع: رد: الدرس الثالث : التحكم فى الروابط و الخلفيات    الأحد ديسمبر 18, 2011 11:49 am

shokran lek 3la el shar7 al ra2e3 da

شكرا ليك على الشرح الرائع دى
الرجوع الى أعلى الصفحة اذهب الى الأسفل
معاينة صفحة البيانات الشخصي للعضو
المهندس صافى
مؤسس المنتدى والمدير العام

avatar

احترام القوانين :
ذكر تاريخ الميلاد : 25/07/1998
عدد المساهمات : 1044
نقاط : 3102
تاريخ التسجيل : 29/08/2009
العمر : 19
الموقع : الاسكندرية

مُساهمةموضوع: رد: الدرس الثالث : التحكم فى الروابط و الخلفيات    الخميس ديسمبر 22, 2011 7:03 am

العفو يا تيتو على ايه
وننتظر جديدك

وتقبل تحياتى
الرجوع الى أعلى الصفحة اذهب الى الأسفل
معاينة صفحة البيانات الشخصي للعضو http://www.toty.arabstar.biz
 
الدرس الثالث : التحكم فى الروابط و الخلفيات
الرجوع الى أعلى الصفحة 
صفحة 1 من اصل 1

صلاحيات هذا المنتدى:لاتستطيع الرد على المواضيع في هذا المنتدى
 :: المهندس صافى فعالياتنا :: !…»§ ●[ــــودΞا لغات البرمجة Ξالـــ] ●§«…! :: !…»§ ●[ــــودΞ دورة تعلم css Ξالـــ] ●§«…!-
انتقل الى:  

أكوادcss|اكواد Template| الأسئلة الشائعة | تقنيات متقدمة |لغات البرمجة|اشهار المواقع والمنتديات |اقسام التصميم |اشهار المنتديات|دليل شركات الاستضافه|عروض المنتديات  |الابداع والجرافيزم |الفوتوشوب|البرامج  |


مركز تبادل الاعلانات العربيه

 دردشة | المهندس صافى