W3.CSS कंटेनर
यह मेरा हेडर है
यह मेरा लेख है
यह लेख हल्का भूरा है और पाठ भूरा है। यह लेख हल्का भूरा है और पाठ भूरा है। यह लेख हल्का भूरा है और पाठ भूरा है। यह लेख हल्का भूरा है और पाठ भूरा है। यह लेख हल्का भूरा है और पाठ भूरा है।
यह मेरा पाद है
कंटेनर वर्ग
W3- कंटेनर वर्ग किसी भी HTML तत्व में 16px बाएँ और दाएँ पैडिंग जोड़ता है।
W3- कंटेनर वर्ग सभी HTML कंटेनर तत्वों के लिए उपयोग करने के लिए एकदम सही वर्ग है जैसे:
<div>, <लेख>, <अनुभाग>, <शीर्ष लेख>, <पाद>, <फ़ॉर्म>, और बहुत कुछ।
कंटेनर समानता प्रदान करते हैं
W3- कंटेनर सभी HTML कंटेनर तत्वों के लिए समानता प्रदान करता है:
- सामान्य मार्जिन
- सामान्य पैडिंग
- सामान्य संरेखण
- सामान्य फोंट
- सामान्य रंग
एक कंटेनर का उपयोग करने के लिए, बस किसी भी तत्व में एक w3-कंटेनर वर्ग जोड़ें:
उदाहरण
<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> तत्वों का उपयोग करते हैं।
लेख और अनुभाग
W3-कंटेनर वर्ग का उपयोग <लेख> और <अनुभाग> तत्वों को स्टाइल करने के लिए किया जा सकता है:
उदाहरण
<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> तत्वों का उपयोग करते हैं।
वेब पेज उदाहरण
हैडर
कार एक पहिया, स्व-संचालित मोटर वाहन है जिसका उपयोग परिवहन के लिए किया जाता है। शब्द की अधिकांश परिभाषाएँ निर्दिष्ट करती हैं कि कारों को मुख्य रूप से सड़कों पर चलने के लिए डिज़ाइन किया गया है। (विकिपीडिया)
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>