شرح دورة الـ CSS للمبتدئين - الدرس الخامس عشر-ج1

نموذج الصندوق :-

فكره نموذج الصندوق : انه يعرفنا ما هى المسافات الفارغه قبل كتابه النص وكيف يمكن التحكم فيها

والفرق بين Margin & Border &Padding بالنسبه لوسم الBody 

التحكم فى الMargin (هامش - حافه ):-
هى المسافه بين حافه شاشه جهاز الكمبيوتر وبين بدايه حدود الايطار
ويمكن التحكم فى الحافه فى الاربع اتجاهات

Body {

             margin-top : 100 px ;

             margin - right : 40 px ;

            margin - bottom : 30 Px ;

            margin - left : 40 px ;

         }

OR

Body{ margin : 100px 40px 30px 40px;}

التحكم فى الBorder (الحدود) :

هى المسافه بين نهايه حافه الصفحه وبين بدايه حشو الكلام
ويمكن التحكم فى الاربع اتجاهات
فقد سبق شرح الحدود فى الدرس العاشر 

=================================================

التحكم فى الPadding (الحشو) :
الحشو هو المحتوى او الكلام نفسه .. فهو يحدد المسافه بين العنصر نفسه واطار العنصر

h2 {background : orange ;

       Padding- top: 120 px ;

       Padding-right : 100 px;

       padding- bottom : 130px ;}

       padding - left : 140 px; }

OR

h2{background :orange ;

     padding: 120px 100px 130px 140px ; }

=================================================

المحتوى (Content) :
1- مفهوم Float :
يقصد بها التعويم .. اى فى حاله صوره واعطاها خاصيه float:left الصوره تعوم وتتجهه ناحيه اليسار
وتأخذ قيم right , top ,bottom

CODE CSS:

#photo {width:200 Px;

             float : left ;}

CODE HTML:

<div  id : photo;>

<img src=mm.jpg;>

</div>

<p> Minds Human Capital Investment </p>

تفسير النتيجه :
1- هيطبق ال Id  على الصوره وتاخذ اتجاه اليسار
2-ينزل سطر بعد الصوره وهذه فائده ال Div tag
3-ستكون جمله Minds Human Capital Investment Team ملتفه حول الصوره

---------------------------------------------

2- مفهوم Clear :
 هى خاصيه مكمله لخاصيه الfloat حيث انها تتحكم فى وضعيه العناصر اللاحقه للعنصر الذى تم تعويمه لتغطى المساحه حول هذا العنصر 
وتاخذ قيم right , left , top , bottom
ولكن .. اذا اردنا ان يكون الكلام اسفل الصوره مثلا .. clear : both

CODE CSS:

#photo {width:200Px;

             float : left ;}

.test{ clear : both ;}

CODE HTML:

<div  id : photo;>

<img src=mm.jpg;>

</div>

<p class=test > Minds Human Capital Investment </p>

تفسير النتيجه:
1- هيطبق ال Id  على الصوره وتاخذ اتجاه اليسار
2- ينزل سطر بعد الصور وهذه فائده ال Div tag
3-ستكون جمله Minds Human Capital Investment بعد الصوره

==============================================

اضغط لمشاهده الكود