شرح دورة الـ CSS للمبتدئين - الدرس الثامن | مايندز | علم ينتفع به
الأتصال بنا 61109-264-012

السبت، 2 نوفمبر 2013

شرح دورة الـ CSS للمبتدئين - الدرس الثامن

css.L9.slogn1
خصائص او اوامر المؤثره على الخلفيات :
1- Background-Color :الخاصيه المتحكمه فى لون خلفيه اى عنصر
body{background-color : red ;}                                                              تاخذ قيمه اسم اللون مباشره
body{background-color : rgb(123,76a,abc) ;}                                             RGB لمراجعه ما هو
----------------------------------------------------------------------------------------------------------
2-Background-Image : الخاصيه المتحكمه فى اضافه صوره كخلفيه للصفحه
 هناك ثلاثه حالات لاضافه صوره:-
 الحاله الاولى : ان تكون الصوره المراد اضافتها فى نفس الفولدر المخزن فيه الصفحه التى بها الكود
body{background-image : url(" minds.gif ") ;}                                
      اسم الصوره  minds.gif

الحاله الثانيه : ان تكون الصوره المراد اضافتها تكون فى فولدر غير الفولدر المخزن فيه الصفحه التى بها الكود
body {background-image : url ("../images/minds.gif ") ;}    اسم الفولدر  المحتوى على الصوره images

الحاله الثالثه: ان تكون الصوره المراد اضاقتها فى البارتشن مباشرا وليس مخزنه فى اى فولدر
body {background-image : url ("E:/minds.gif " ) ;}                        اسم البارتشن المخزن عليه الصور  E
------------------------------------------------------------------------------------------------------------
3-Background-repeat : الخاصيه المتحكمه فى تكرار الصوره المضافه كخلفيه
هناك اربع حالات للتكرار:-
body{Background-repeat :repeat-x ; }   فى حاله تكرار الصوره رأسيا 
body{Background-repeat : repeat-y ; }  فى حاله تكرار الصوره افقيا
body{Background-repeat : repeat ; }     فى حاله تكرار الصوره رأسيا وافقيا
body{Background-repeat :no-repeat ; } فى حاله عدم التكرار 
------------------------------------------------------------------------------------------------------------
4-Background-attachment : الخاصيه المتحكمه فى ثبات او تحريك الخلفيه .. عندما تنزل بالصفحه لاخرها
body{ background-attachment : scroll ;} هو الوضع الافتراضى .. وهى فى حاله تحريك الخلفيه
body{background-attachment : fixed ;} فى حاله ثبات الخلفيه
------------------------------------------------------------------------------------------------------------
5-Background-Position: خاصيه مسؤله عن وضع صوره الخلفيه فى مكان معين فى الصفحه وهى تاخد قيم left , right , top and bottom او تأخد قيمه بالpx  مثل 100px  او قيمه بالنسبه المئويه مثل 50%
الوضع الافتراضى اعلى يسار 
body{ background-position : 100px 200px ;}   قيمه اليسار 100 وقيمه الاعلى 200
body{ background-position : 25% 50% ;} قيمه اليسار 25 وقيمه الاعلى 50
body { background-position : bottom right ;}
------------------------------------------------------------------------------------------------------------
6-Background:الخاصيه التى يمكن تجميع كل  الخواص السابقه فى سطر واحد ..
body {background: background-color  background-Image  background-repeat background-attachment  background-position ;}
body { background: red url("mm.jpg") no-repeat scroll right bottom ;}
----------------------------------------------------------------------------------------------------------
الآن .. أختبـــــــــــــــــــــــــــــ(ـنفسك)ــــــــــــــــــــــــــــــــــــــر..
1- انسخ كل كود على حدا على برنامج ++Notepad وشاهد النتيجه بنفسك
2- اكتب الكود بالطريقه الثالثه وشاهد النتجيه بنفسك