حاويات W3.CSS
هذا هو رأسي
هذه هي مقالتي
هذه المقالة باللون الرمادي الفاتح والنص بني. هذه المقالة باللون الرمادي الفاتح والنص بني. هذه المقالة باللون الرمادي الفاتح والنص بني. هذه المقالة باللون الرمادي الفاتح والنص بني. هذه المقالة باللون الرمادي الفاتح والنص بني.
هذا هو تذييل الخاص بي
فئة الحاوية
تضيف فئة w3-container حشوة يسار ويمين مقاس 16 بكسل إلى أي عنصر HTML.
تعتبر فئة w3-container هي الفئة المثالية للاستخدام لجميع عناصر حاوية HTML مثل:
<div> ، <article> ، <section> ، <header> ، <footer> ، <form> ، والمزيد.
توفر الحاويات المساواة
توفر حاوية w3 المساواة لجميع عناصر حاوية HTML:
- الهوامش المشتركة
- حشوات مشتركة
- المحاذاة المشتركة
- الخطوط الشائعة
- الألوان الشائعة
لاستخدام الحاوية ، ما عليك سوى إضافة فئة w3-container إلى أي عنصر:
مثال
<div class="w3-container">
<p>The w3-container class is an important
w3.CSS class.</p>
</div>
لإضافة لون ، ما عليك سوى إضافة فئة ألوان w3 :
مثال
<div class="w3-container w3-red">
<p>London is the capital city of England.</p>
</div>
الرؤوس والتذييلات
يمكن استخدام فئة حاوية w3 لتصميم الرؤوس:
رأس
مثال
<div class="w3-container w3-teal">
<h1>Header</h1>
</div>
مثال
<header class="w3-container w3-teal">
<h1>Header</h1>
</header>
لا يوجد فرق في الطريقة التي يتعامل بها W3.CSS مع عناصر <div> و <header>.
يمكن استخدام فئة حاوية w3 لتصميم التذييلات:
مثال
<div class="w3-container w3-teal">
<h5>Footer</h5>
<p>Footer information goes here</p>
</div>
مثال
<footer class="w3-container w3-teal">
<h5>Footer</h5>
<p>Footer information goes here</p>
</footer>
تستخدم العديد من صفحات الويب عناصر <div> بدلاً من عنصري <header> و <footer>.
المقالات والأقسام
يمكن استخدام فئة حاوية w3 لتصميم عناصر <article> و <section>:
مثال
<div class="w3-container">
<h2>London</h2>
<p>London
is the most populous city in the United Kingdom,
with a
metropolitan area of over 9 million inhabitants.</p>
</div>
<article class="w3-container">
<h2>Paris</h2>
<p>The
Paris area is one of the largest population centers in Europe,
with more than 2 million inhabitants.</p>
</article>
<section
class="w3-container">
<h2>Tokyo</h2>
<p>Tokyo is the
center of the Greater Tokyo Area,
and the most populous
metropolitan area in the world.</p>
</section>
تستخدم العديد من صفحات الويب عناصر <div> بدلاً من عناصر <article> و <section>.
مثال على صفحة الويب
رأس
السيارة عبارة عن مركبة آلية ذاتية التشغيل ذات عجلات تستخدم في النقل. تحدد معظم تعريفات المصطلح أن السيارات مصممة للعمل بشكل أساسي على الطرق. (ويكيبيديا)
مثال على استخدام عناصر HTML <div>
<div class="w3-container w3-red">
<h1>Header</h1>
</div>
<img src="img_car.jpg" alt="Car" style="width:100%">
<div
class="w3-container">
<p>A car is a wheeled, self-powered motor vehicle used for transportation. Most definitions of the term specify that cars are designed to run primarily on roads. (Wikipedia)</p>
</div>
<div class="w3-container
w3-red">
<h5>Footer</h5>
</div>
مثال على استخدام عناصر HTML الدلالية
<header class="w3-container w3-teal">
<h1>Header</h1>
</header>
<img src="img_car.jpg" alt="Car" style="width:100%">
<article
class="w3-container">
<p>A car is a wheeled, self-powered motor vehicle used for transportation. Most definitions of the term specify that cars are designed to run primarily on roads. (Wikipedia)</p>
</article>
<footer class="w3-container
w3-teal">
<h5>Footer</h5>
</footer>
حشوة الحاوية
The w3-container class has a default 16px left and right padding, and no top or bottom padding:
Example
<div class="w3-container w3-blue">
I have no top or bottom padding.
</div>
Normally you will not have to change the default padding of a container, because paragraphs and heading provide margins that will simulate padding.
I am a Heading
I am a paragraph.
Example
<div class="w3-container w3-blue">
<h1>I am a Heading</h1>
<p>I am a paragraph.</p>
</div>