صفحه بندی در W3.CSS
کلاس container
کلاس w3-container یک padding چپ و راست به اندازه 16px به هر عنصر HTML می افزاید.
کلاس w3-container برای استفاده در کلیه عناصر HTML مانند زیر مناسب است:
<div>, <article>, <section>, <header>, <footer>, <form>, و ....
container ها ویژگی های مشابه برای عناصر فراهم میکنند
عنصری که شامل کلاس w3-container باشد، ویژگی های زیر برای آن تنظیم خواهد شد:
- marginهای پیشفرض
- paddingهای پیشفرض
- تراز بندی های پیشفرض
- فونت های پیشفرض
- رنگ های پیشفرض
تنها لازم است کلاس w3-container را به هر عنصر اضافه کنید تا یک container با ویژگی های تعیین شده داشته باشید.
مثال
<p>The w3-container class is an important w3.CSS class.</p>
</div>
برای افزودن رنگ ،کلاس w3-color را اضافه کنید :
مثال
<p>London is the capital city of England.</p>
</div>
سربرگ ها و پاصفحه ها (Header/Footer)
کلاس w3-container میتواند برای سبک دهی به سربرگ ها مورد استفاده قرار گیرد:
فرقی میان عملکرد عناصر <div> و <header> نمی باشد. البته برای امروزه بیشتر از تگ header برای نمایش سربرگ یک مقاله استفاده می شود.
کلاس w3-container میتواند برای پا صفحه ها نیز مورد استفاده قرار گیرد.
مثال
<h5>Footer</h5>
<p>Footer information goes here</p>
</div>
مثال
<h5>Footer</h5>
<p>Footer information goes here</p>
</footer>
بیشتر صفحات وب از عناصر <header> و<footer > بجای div استفاده میکنند.
مقالات و قسمت ها (Article/Section)
کلاس w3-container میتواند برای سبک دهی به <section> و <article> نیز مورد استفاده قرار گیرد :
مثال
<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>
بیشتر صفحات وب به جای <article> و <section> از عنصر <div> استفاده میکنند.
مثال صفحه وب
مثال استفاده از عناصر <div>
<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
<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>
فاصله Container
کلاس w3-container یک مقدار padding چپ و راست به اندازه 16px به عنصر میدهد ولی padding بالا و پایین نمیدهد :
مثال
I have no top or bottom padding.
</div>
به صورت نرمال نیازی به تغییرمقدار padding پیش فرض عناصر نگهدارنده نیست، زیرا پاراگراف ها و سربرگ ها margin هایی فراهم میکنندکه padding را شبیه سازی میکند.
من یک سربرگ هستم
مثال
<h1>I am a Heading</h1>
<p>I am a paragraph.</p>
</div>
- نوشته شده توسط زهرا داوودی
- بازدید: 5197
