Css في رمضان - اليوم 9

[م أمين]

اليوم التاسع


السلام عليكم ورحمة الله وبركاته،

بسم الله الرحمن الرحيم

درسنا لليوم هو عن نموذج العلبة (Box Model) و أغلب دورات CSS تتطرّق إليه لذللك لن نخرج عن العادة ، فلنبدأ على بركة الله ؛



كنا رأينا بالأمس الوسوم DIV و هي ما سنسميه العلبة في هذا الدرس،

هذا نموذج العلبة الشهير

نشاهد هنا الكثير من الكلمات التي تبدوا غريبة، نعم فنحن ل نتطرق بعد لأغلبها و لكن سأشرحها

نرى في المركظ كلمة 'المحتوى' و تلك هي محتويات ال علبة، مثلا

<div>0123456789</div> 

هنا العلبة DIV تحتوي على الأرقام 0123456789، إذا فالأرقام هي المحتوى.

في CSS خواص كثيرة لم نرها لحد الآن و من بينها Width و Height (العرض و الارتفاع) و نستعملهما غالبا مع DIV بهذا الشكل

width:500px;

 height:400px;
 background-color:#F0F0F0; 

الكود السابق إذا وضعناه في تنسيق DIV فسنحصل على مستطيل بطول 500بكسل و عرض 400بكسل. و هو المكان الذي يمكن لمحتوى هذا ال DIV أن يشغله،

فلو وضعنا نصا طويلا بداخل هذا ال DIV فإن النص سيعود للسطر عند نهاية المساحة المخصصة له و هي أطراف الDIV في هذه الحالة.
المحتوى في الصورة محاط بإطار بخط متقطع و لكن في الحقيقة الخطوط المتقطعة في الصورة لمجرد الفهم فهي وهمية ووضعت لكي نتمكن من التفريق بين المساحات المختلفة.


خارج المحتوى تأتي طبقة تسمى Padding و لها نفس خلفية المحتوى فوضعنا في الصورة الخط المتقطع لنميزها عنها،

هذه الطبقة قيمتها الإفتراضية 0 لكن يمكننا التحكم فيها في CSS بهذا الشكل

padding:24px; 

حيث أعطينا للعلبة في هذا المثال padding بقسمة 24بكسل على كل الجوانب : الأعلى، الأسفل، اليمين و اليسار.

و لكن يمكننا إعطاؤها padding من الجهات التي نريد فقط من خلالpadding-left, padding-right, padding-top, padding-bottom فمثلا لجعل padding للعلبة بقيمة 24بكسل على اليمين و اليسار فقط نستعمل

paffing-left:24px;

 paffing-right:24px; 

الطبقة التالية هي طبقة الإطار Border و هي طبقة يمكن أن يكون لها لون مختلف عن خلفية المحتوى، و القيمة الإفتراضية للإطار هي0، و كنا في درس سابق تطرقنا للتعامل مع هذه الخاصية و شاهدنا Border-left, border-right, border-top و border-bottom.



الطبقة التالية هي الهامش Margin، و هي طبقة شفافة، أي لا لون لها و دورها هو التحكم في طريقة تعامل العلبة مع العلب و الكائنات الأخرى التي بجانبها، فلو وضعنا للعلبة هامشا على اليسار بقيمة 50بكسل فهذا يعني أنه لا يمكن لجسم آخر أن يقترب من العلبة من جهة اليسار لمسافة أقرب من 50بكسل.

و هذا مثال على الخاصية margin في نص

هذا الجزء HTML للمثال

<p>3456<span class='spacer'>+</span>789</p> 

و هذا الجزء CSS

.spacer{

 margin-left:50px;

 margin-right:50px;

 } 

لاحظ أن ال + وضعناه في span، و هذا ال Span أسندناه ل class خاص باسم spacer يمتلك هامش على اليمين و اليسار بقيمة 50بكسل، و النتيجة هكذا على المتصفح:

في المرة المقبلة بإذن الله سنبدأ أولى الخطوات لتصميم القوالب.

الملاحظات و الإقتراحات و الإضافات مرحب بها دائما.


سلام

[Mohamed Nasser]

للإضاافه فقط

 padding:24px; 

يعطى القيمه 24 بيكسل لجميع الاتجاهات

padding-right:24px; 

القيمه 24 بيكسل من اليمين

padding-left:24px; 

القيمه 24 بيكسل من اليسار

padding-top:24px; 

القيمه 24 بيكسل من الاعلى

padding-bottom:24px; 

القيمه 24 بيكسل من الأسفل

padding: 24px 50px 0px 50px; 

هو إختصار للكود

padding-top:24px;
padding-right:50px;
padding-bottom:0px;
padding-left:50px; 

حيث يكتب فى إتجاه عقارب الــساعه
الطريقه تسرى بنفس الشكل لداله margin

بارك الله فيك يا أستاذ أميـن على مجهودك الراائع ننتظر منك المزيد و كل عام و انت بخير رمضان مبارك