التخطي إلى المحتوى
شرح دورة الـ 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 بعد الصوره

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

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

عن الكاتب

التعليقات

أضف تعليقاً

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

Shares