فهرس الدروس ( Microsoft Expression Web )
كنا في الدرس العاشر ExpressionWeb -
قد تحدثنا على الكتلة التغليفية wrapper والتي تضم كتل أخرى , كل الكتل هذه عبارة عن أقسام توسم بـ div
الوسم ككل كان كالتالي :
<body>
<div id="wrapper">
<div id="top">
<div id="logo"> </div>
<div id="social-media"> </div>
</div>
<div id="topnav">
<ul>
<li><a href="index.html"> أهلا وسهلا </a> </li>
<li><a href="about.html"> عن موقعنا </a> </li>
<li><a href="products.html"> المنتجات </a> </li>
<li><a href="services.html"> الخدمات </a> </li>
<li><a href="contact.html"> اتصل بنا </a> </li>
</ul>
</div>
<div id="banner">
<li> <img src="../ويب/صورة العنوان/Banner.jpg" /> </li>
</div>
<div id="subbanner">
<h3> العلم نـور وفي الأجواء منتشر والفخر بالعلم لا بالمال نفتخـرُ </h3>
</div>
<div id="content">
<h2> فوائد القراءة </h2>
<p> إن القراءة ترفع الجهل, وتطرد الحزن والهم , وتنور العقل, وتُكسب القارئ التجارب.</p>
<img src="book%201.jpg" />
<img src="book%202.jpg" />
<img src="book%203.jpg" />
<h2> من أقوال الدكتور سوس عن القراءة </h2>
<p> كلما قرأت أكثر كلما عرفت أشياء أكثر،كلما تعلمت أكثر كلما حققت إنجازات أكثر </p>
</div>
<div id="rightside">
<h2 class="auto-style1"> حكمة اليوم </h2>
<p> العلم نور والجهل ظلام </p>
<img src="صورة%20تقويم.jpg" />
</div>
<div id="footer">
<p>© copyright 2016 </p>
</div>
</div>
</body>
<div id="wrapper">
<div id="top">
<div id="logo"> </div>
<div id="social-media"> </div>
</div>
<div id="topnav">
<ul>
<li><a href="index.html"> أهلا وسهلا </a> </li>
<li><a href="about.html"> عن موقعنا </a> </li>
<li><a href="products.html"> المنتجات </a> </li>
<li><a href="services.html"> الخدمات </a> </li>
<li><a href="contact.html"> اتصل بنا </a> </li>
</ul>
</div>
<div id="banner">
<li> <img src="../ويب/صورة العنوان/Banner.jpg" /> </li>
</div>
<div id="subbanner">
<h3> العلم نـور وفي الأجواء منتشر والفخر بالعلم لا بالمال نفتخـرُ </h3>
</div>
<div id="content">
<h2> فوائد القراءة </h2>
<p> إن القراءة ترفع الجهل, وتطرد الحزن والهم , وتنور العقل, وتُكسب القارئ التجارب.</p>
<img src="book%201.jpg" />
<img src="book%202.jpg" />
<img src="book%203.jpg" />
<h2> من أقوال الدكتور سوس عن القراءة </h2>
<p> كلما قرأت أكثر كلما عرفت أشياء أكثر،كلما تعلمت أكثر كلما حققت إنجازات أكثر </p>
</div>
<div id="rightside">
<h2 class="auto-style1"> حكمة اليوم </h2>
<p> العلم نور والجهل ظلام </p>
<img src="صورة%20تقويم.jpg" />
</div>
<div id="footer">
<p>© copyright 2016 </p>
</div>
</div>
</body>
سأربط به صفحة منسقة بورقة الأنماط css :
CSS Box Modelهناك ما يُسمى بـ
أي نموذج صندوق ورقة الأنماط
إن ما يخص هذا الصندوق هو 3 أمور , نلخصها في كلمات مفتاحية ألا وهي:
border الحدود
margin الهامش
margin الهامش
الـ padding :
- يحيط بالكائن object والذي يمكن أن يكون كتلة div , نص p , رأس heading , أي عنصر من عناصر html
- الـ padding يقع بين الكائن والحدود border
- الـ padding يصيغ خلفية الكائن
الـ margin :
وهو أخير يحيط بالحدود .
وهو المنطقة العازلة buffer حول الكائن.
لنقل أن لدينا
5px padding
5px margin
1px border
لنطبق :
سنقوم بتنسيق ورقة css لنطبق على الكتلة التغليفية wrapper ,
سنستخدم صفة العرض width
#wrapper { width:900px; }
إذا استخدمت قيمة واحدة على الهامش فإنه سيتطبق على كافة الحدود الأربعة من أعلى وأسفل, يمين ويسار.
مثلا:
margin:20px;
أما لو استخدمت قيميتن , مثلا:
margin:20px 10px;
فإن سيطبق القيمة الأولى على الأعلى والاسفل والثانية على اليسار واليمين.
أما لو استخدمت أربعة قيم فإنه سيطبقها بأتجاه عقارب الساعة ( أعلى , يمين , أسفل , يسار )
مثلا:
margin:20px 10px 5px 30px;
أما إن أردت تعيين هامش محدد فقط وترك البقية على الـ default , مثلا نريد تعيين اليسار فقط- أو تعيين كل على حده
سيكون هكذا :
margin-left:30px;
margin-top:20px;
margin-right:5px;
margin-bottom:20px;
margin-top:20px;
margin-right:5px;
margin-bottom:20px;
ما سبق يمكن تطبيقه أيضا على التبطين (الحاشية) padding .
إذا لم ترد أي حاشية في ( الأعلى والأسفل) فستكون القيمة صفر مثال:
#wrapper { width:900px; margin:0px; }
أما إن أردت تعيين اليمين واليسار بنفس المسافة ليكون الوضع متوسط فسنستخدم الصفة auto بدون قيمة
يبدو ذلك cryptic أي (خفي, مشفر, مبهم )
مثال:
#wrapper { width:900px; margin:0px auto;}
لاحظ أن كلمة auto لم تُسبق بفاصلة منقوطة .
تلك الكلمة ستقوم أوتوماتيكيا بضبط الهامش الأيمن والأيسر بنفس المسافة
لتلوين البانر :
#banner { background-color:#FFFF99; }
إذا أردنا جعل البانر أكبر , سنطبق الحشو padding
مثلا سيكون الأعلى والأسفل 30 بكسل , واليمين واليسار صفر
سنجد أن البانر أصبح أكبر
هكذا :
#banner { background-color:#FFFF99; padding:30px 0px; }
أما لتعيين بقية الجهات فكما تعلمنا كعقارب الساعة :
مثال:
#banner { background-color:#FFFF99; padding:30px 0px 100px 0px; }
ولتطبيق الحدود سيكون هكذا:
#banner { background-color:#FFFF99; padding:30px 0px 100px 0px;
border:1px #FF6600 solid; }
الحشو هو الحافة بين الكائن والحدود .. (يعني من الداخل ) ..
لنجرب الهامش margin بنفس الكود لكن نغير مفردة padding بـ margin :
هكذا :
#banner { background-color:#FFFF99; margin:30px 0px 100px 0px;
border:1px #FF6600 solid; }
وعليه فالهامش سيكون المنطقة من الخارج ..
22:5
ليست هناك تعليقات:
إرسال تعليق