CSS Display Property Free web designing Course Tutorials #24
CSS Display Property
इस ट्यूटोरियल में, हम CSS डिस्प्ले प्रॉपर्टी के बारे में जानेंगे। प्रदर्शन सीएसएस गुण सेट करता है कि क्या किसी तत्व को ब्लॉक या इनलाइन तत्व के रूप में माना जाता है और इसके बच्चों के लिए उपयोग किया जाने वाला लेआउट, जैसे फ्लो लेआउट, ग्रिड या फ्लेक्स।
हम tut24.html के रूप में एक नई फ़ाइल बनाकर और हमेशा की तरह एक बॉयलरप्लेट जोड़कर शुरू करेंगे। <शीर्षक> टैग में शीर्षक को CSS डिस्प्ले प्रॉपर्टी के रूप में दें। फिर हम हेडर सेक्शन में "टॉप" के रूप में एक इमेज या लोगो और h3 हेडिंग जोड़ेंगे।
आइए कुछ CSS के साथ इमेज और हेडिंग को स्टाइल करें-
img {
margin: auto;
display: block;
width: 34px;
}
h3 {
text-align: center;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin: 0px;
}
क्रोम ब्राउज़र में दोनों तत्वों का निरीक्षण करके, हम देखते हैं कि छवि एक इनलाइन तत्व है और h3 शीर्षक ब्लॉक तत्व है। हमारा उद्देश्य सभी तत्वों को वेबपेज के केंद्र में लाना है। हम इसे ब्लॉक एलिमेंट की चौड़ाई यानी हेडिंग को एडजस्ट करके हासिल कर सकते हैं। निम्नलिखित का संबंधित कोड है-
header {
border: 2px solid red;
margin: auto;
width: 1200px;
}
"आईएमजी" का प्रदर्शन इनलाइन है और इसलिए, इसे केंद्र में लाने के लिए, हमें संपत्ति प्रदर्शन को ब्लॉक के रूप में निम्नानुसार सेट करना होगा-
img {
margin: auto;
display: block;
width: 34px;
}
अगली समस्या जो उत्पन्न होती है वह यह है कि जब हम पृष्ठ की पूरी चौड़ाई बढ़ाते हैं, तो शीर्षक में पाठ बाईं ओर चला जाता है। तो इसे केंद्र की ओर ले जाने के लिए, हम टेक्स्ट-एलाइनमेंट की संपत्ति को केंद्र के रूप में सेट कर सकते हैं।
डिस्प्ले इनलाइन का मतलब है कि यह एलिमेंट के साइज के हिसाब से स्पेस लेगा। डिस्प्ले ब्लॉक का मतलब है कि हम इसकी चौड़ाई और मार्जिन द्वारा मैन्युअल रूप से सेट कर सकते हैं।
अब मान लीजिए कि हम किसी एलीमेंट को इनलाइन बनाने के साथ-साथ उसकी चौड़ाई को भी कस्टमाइज़ करना चाहते हैं, तो उस स्थिति में हम इनलाइन-ब्लॉक का उपयोग कर सकते हैं। इसे समझने के लिए पहले हम इसमें कुछ टेक्स्ट के साथ तीन डिव जोड़ेंगे और फिर इसे स्टाइल करेंगे। उन्हें एक बॉक्स के रूप में प्रदर्शित करने के लिए, हम कंटेनर और बॉक्स क्लास की मदद ले सकते हैं। हम बॉक्स तत्व को इस प्रकार स्टाइल कर सकते हैं !
.box {
border: 4px solid black;
background-color: grey;
margin: 4px 0px;
padding: 23px;
width: 33%;
box-sizing: border-box;
display: inline-block;
}
यहां इनलाइन-ब्लॉक संपत्ति हमें इनलाइन तत्वों की चौड़ाई को भी बदलने की अनुमति देती है। यह सुनिश्चित करने के लिए कि सभी तीन ब्लॉक एक ही पंक्ति में आते हैं, हम संपत्ति बॉक्स-आकार का उपयोग कर सकते हैं। यह सुनिश्चित करता है कि हम जो चौड़ाई प्रदान करते हैं वह पैडिंग और मार्जिन सहित नहीं बदली है।
तो मेरा मानना है कि आप CSS Display Property की अवधारणा को स्पष्ट रूप से समझ गए होंगे। भविष्य में और अधिक आकर्षक वेबसाइट बनाने के लिए ट्यूटोरियल के साथ बने रहें। तब तक अभ्यास करते रहें।
Code:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS Display property</title>
<style>
*{
box-sizing: border-box;
}
header {
border: 2px solid red;
margin: auto;
width: 1200px;
}
img {
margin: auto;
display: block;
width: 34px;
}
h3 {
text-align: center;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin: 0px;
}
.box {
border: 4px solid black;
background-color: grey;
margin: 4px 0px;
padding: 23px;
width: 33%;
box-sizing: border-box;
display: inline-block;
}
.container{
margin: auto;
width: 1200px;
}
</style>
</head>
<body>
<header class="top">
<img src="https://codewithharry.com/static/common/img/photo.png" alt="">
<h3>Welcome to Harry's Blog</h3>
</header>
<div class="container">
<div class="box">
<h4 class="heading">Heading</h4>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Maiores, harum ipsam aliquid deleniti, vitae
labore cum laudantium a blanditiis est voluptates dolorum consequuntur. Aliquam corporis, fuga
consectetur rerum molestias consequatur tempora natus sed laborum recusandae fugit harum soluta
inventore enim. Aspernatur aperiam cum reprehenderit!</p>
</div><div class="box">
<h4 class="heading">Heading</h4>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Maiores, harum ipsam aliquid deleniti, vitae
labore cum laudantium a blanditiis est voluptates dolorum consequuntur. Aliquam corporis, fuga
consectetur rerum molestias consequatur tempora natus sed laborum recusandae fugit harum soluta
inventore enim. Aspernatur aperiam cum reprehenderit!</p>
</div><div class="box">
<h4 class="heading">Heading</h4>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Maiores, harum ipsam aliquid deleniti, vitae
labore cum laudantium a blanditiis est voluptates dolorum consequuntur. Aliquam corporis, fuga
consectetur rerum molestias consequatur tempora natus sed laborum recusandae fugit harum soluta
inventore enim. Aspernatur aperiam cum reprehenderit!</p>
</div>
</div>
</body>
</html>
