التخطي إلى المحتوى
شرح دورة الـ CSS للمبتدئين – الدرس الثامن

خصائص او اوامر المؤثره على الخلفيات :
1- BackgroundColor :الخاصيه المتحكمه فى لون خلفيه اى عنصر

body{background-color : red ;}                                                              تاخذ قيمه اسم اللون مباشره
body{background-color : rgb(123,76a,abc) ;}                                             RGB لمراجعه ما هو
———————————————————————————————————-
2-BackgroundImage : الخاصيه المتحكمه فى اضافه صوره كخلفيه للصفحه
 هناك ثلاثه حالات لاضافه صوره:-
 الحاله الاولى : ان تكون الصوره المراد اضافتها فى نفس الفولدر المخزن فيه الصفحه التى بها الكود
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-Backgroundrepeat : الخاصيه المتحكمه فى تكرار الصوره المضافه كخلفيه
هناك اربع حالات للتكرار:-
body{Background-repeat :repeat-x ; }   فى حاله تكرار الصوره رأسيا 
body{Background-repeat : repeat-y ; }  فى حاله تكرار الصوره افقيا
body{Background-repeat : repeat ; }     فى حاله تكرار الصوره رأسيا وافقيا
body{Background-repeat :no-repeat ; } فى حاله عدم التكرار 

————————————————————————————————————

4-Backgroundattachment : الخاصيه المتحكمه فى ثبات او تحريك الخلفيه .. عندما تنزل بالصفحه لاخرها
body{ background-attachment : scroll ;} هو الوضع الافتراضى .. وهى فى حاله تحريك الخلفيه
body{background-attachment : fixed ;} فى حاله ثبات الخلفيه
————————————————————————————————————
5-BackgroundPosition: خاصيه مسؤله عن وضع صوره الخلفيه فى مكان معين فى الصفحه وهى تاخد قيم 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 ;}
———————————————————————————————————-
<html>
<head>
<title>Minds</title>
</head>
<body style=" color:red;
         background-image:url(1.png);
      background-repeat:repeat-y;
   background-attachment:scroll;">
 <!--  ""ملحوظه هامه .. عدم وضع اسم الصوره بين 
 وهذه الملحوظه فى الطريقه الاولى فقط-->
<p>
Minds human capital investment</p>
</body>
</html>
<html>
<head>
<title>Minds</title>
<style >
body {background-image:url("1.png");
      background-repeat:repeat-y;
   background-attachment:scroll;
   }  
</style>
</head>
<body>
<h1>
<p>
minds human capital investment
</p>
</h1>
</body>
</html>
الآن .. أختبـــــــــــــــــــــــــــــ(ـنفسك)ــــــــــــــــــــــــــــــــــــــر..
1- انسخ كل كود على حدا على برنامج ++Notepad وشاهد النتيجه بنفسك
2- اكتب الكود بالطريقه الثالثه وشاهد النتجيه بنفسك

عن الكاتب

التعليقات

أضف تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *

Shares