CSS डिस्प्ले प्रॉपर्टी वेब डिज़ाइनरों के लिए एक शक्तिशाली टूल है। यह आपको याद रखने में आसान सरल मानों के साथ न्यूनतम स्टाइल के साथ वेबसाइट तत्व लेआउट को नियंत्रित करने देता है।
लेकिन इनमें से प्रत्येक मूल्य क्या करता है, और वे कैसे काम करते हैं? चलो पता करते हैं।
CSS डिस्प्ले प्रॉपर्टी क्या है?
डिस्प्ले प्रॉपर्टी वेबपेज पर HTML तत्वों के लिए उपयोग किए जाने वाले बॉक्स रेंडरिंग के प्रकार को निर्दिष्ट करती है। इसके परिणामस्वरूप कई तरह के व्यवहार होते हैं, जिसमें बिल्कुल भी नहीं दिखाना शामिल है। आप इन मूल्यों को अपनी वेबसाइट पर स्टाइल शीट या उपयुक्त सीएसएस अनुकूलन अनुभागों के माध्यम से संपादित कर सकते हैं वर्डप्रेस जैसे सीएमएस टूल.
तत्वों को सीएसएस डिस्प्ले के अनुरूप रखें: इनलाइन
चौड़ाई और ऊंचाई मान इनलाइन डिस्प्ले वाले तत्व पर लागू नहीं होते हैं; अंदर की सामग्री इसके आयाम निर्धारित करती है। इनलाइन HTML तत्व अन्य तत्वों के साथ कंधे से कंधा मिलाकर बैठ सकते हैं, जैसा व्यवहार करते हैं a. टेक्स्ट के लिए डिस्प्ले इनलाइन का सबसे अधिक उपयोग किया जाता है।
<!DOCTYPE html>
<एचटीएमएल लैंग ="एन">
<सिर>
<मेटा वर्णसेट =
"यूटीएफ-8">
<शीर्षक>सीएसएस प्रदर्शन मान</title>
<शैली>
।इन - लाइन {
प्रदर्शन: इनलाइन;
फ़ॉन्ट-आकार: 3rem;
}
#इनलाइन-1 {
पृष्ठभूमि-रंग: पीला;
पैडिंग: 10px 0px 10px 10px;
}
#इनलाइन-2 {
पृष्ठभूमि-रंग: हल्का हरा;
पैडिंग: 10px 10px 10px 0px;
}
</style>
</head>
<तन>
<एच 1>सीएसएस डिस्प्ले इनलाइन</h1>
<डिव क्लास ="इन - लाइन" आईडी ="इनलाइन-1">यह पाठ है</div>
<डिव क्लास ="इन - लाइन" आईडी ="इनलाइन-2">इनलाइन संपत्ति मूल्य के साथ।</div>
</body>
</html>
ऊपर दिया गया यह HTML मार्कअप और CSS डिस्प्ले इनलाइन वैल्यू का एक अच्छा उदाहरण है। जब एक साथ उपयोग किया जाता है, तो यह दो अलग-अलग HTML तत्वों से बने टेक्स्ट की एक पंक्ति प्रदर्शित करेगा।
CSS डिस्प्ले के साथ वेबसाइट लेआउट को नियंत्रित करें: ब्लॉक
कुछ मायनों में, डिस्प्ले ब्लॉक वैल्यू इनलाइन वैल्यू के विपरीत है। ऊंचाई और चौड़ाई के आयाम सेट किए जा सकते हैं, और इस मान वाले तत्व एक दूसरे के बगल में नहीं बैठ सकते। ऊपर दिया गया उदाहरण दो तत्वों को ब्लॉक मान के साथ दिखाता है। ब्लॉक प्रदर्शन वाले तत्व अपने मूल तत्व की अधिकतम चौड़ाई पर डिफ़ॉल्ट रूप से प्रदर्शित होते हैं।
<!DOCTYPE html>
<एचटीएमएल लैंग ="एन">
<सिर>
<मेटा वर्णसेट ="यूटीएफ-8">
<शीर्षक>सीएसएस प्रदर्शन मान</title>
<शैली>
।खंड मैथा {
प्रदर्शन क्षेत्र;
फ़ॉन्ट-आकार: 3rem;
चौड़ाई: फिट-सामग्री;
}
#ब्लॉक-1 {
पृष्ठभूमि-रंग: पीला;
पैडिंग: 10px 10px 10px 10px;
}
#ब्लॉक-2 {
पृष्ठभूमि-रंग: हल्का हरा;
पैडिंग: 10px 10px 10px 10px;
}
</style>
</head>
<तन>
<एच 1>सीएसएस डिस्प्ले ब्लॉक</h1>
<डिव क्लास ="खंड मैथा" आईडी ="ब्लॉक-1">यह पाठ है</div>
<डिव क्लास ="खंड मैथा" आईडी ="ब्लॉक-2">ब्लॉक संपत्ति मूल्य के साथ।</div>
</body>
</html>इनलाइन शैली उदाहरण के विपरीत, यह प्रदर्शन ब्लॉक मान उदाहरण टेक्स्ट की पंक्तियों को दो अलग-अलग पंक्तियों में विभाजित करता है। फ़िट-सामग्री चौड़ाई मान पाठ की लंबाई से मेल खाने के लिए तत्वों की चौड़ाई निर्धारित करता है।
सीएसएस डिस्प्ले के साथ साइड-बाय-साइड HTML एलिमेंट्स: इनलाइन-ब्लॉक
CSS डिस्प्ले इनलाइन-ब्लॉक मान एक नियमित इनलाइन मान की तरह ही काम करता है, केवल विशिष्ट आयाम जोड़ने की क्षमता के साथ। यह बिना मूल तत्वों के ग्रिड-जैसे लेआउट बनाना संभव बनाता है। पिछले उदाहरण पर वापस जाने पर, इनलाइन-ब्लॉक मान जोड़ने से तत्व एक दूसरे के बगल में बैठ सकते हैं।
<!DOCTYPE html>
<एचटीएमएल लैंग ="एन">
<सिर>
<मेटा वर्णसेट ="यूटीएफ-8">
<शीर्षक>सीएसएस प्रदर्शन मान</title>
<शैली>
.इनलाइन-ब्लॉक {
प्रदर्शन: इनलाइन-ब्लॉक;
फ़ॉन्ट-आकार: 3rem;
चौड़ाई: फिट-सामग्री;
}
#इनलाइन-ब्लॉक-1 {
पृष्ठभूमि-रंग: पीला;
पैडिंग: 10px 10px 10px 10px;
}
#इनलाइन-ब्लॉक-2 {
पृष्ठभूमि-रंग: हल्का हरा;
पैडिंग: 10px 10px 10px 10px;
}
</style>
</head>
<तन>
<एच 1>CSS डिस्प्ले इनलाइन-ब्लॉक (चौड़ाई सेट)</h1>
<डिव क्लास ="इनलाइन-ब्लॉक" आईडी ="इनलाइन-ब्लॉक-1">यह पाठ है</div>
<डिव क्लास ="इनलाइन-ब्लॉक" आईडी ="इनलाइन-ब्लॉक-2">इनलाइन-ब्लॉक संपत्ति के साथ
मूल्य।</div>
</body>
</html>
इनलाइन-ब्लॉक मान इनलाइन मान से बहुत अलग नहीं दिखता है। यह ध्यान रखना महत्वपूर्ण है कि आप इस मान के साथ तत्वों के आयाम निर्धारित कर सकते हैं, हालांकि, कुछ मामलों में काम करना आसान बनाते हैं।
सबसे सरल प्रदर्शन मान "कोई नहीं" है। यह मान मार्जिन और अन्य रिक्ति गुणों के साथ तत्व और किसी भी चाइल्ड तत्व को छुपाता है। CSS डिस्प्ले वाले तत्व कोई भी मान अभी भी ब्राउज़र निरीक्षकों के भीतर दिखाई नहीं दे रहे हैं।
CSS डिस्प्ले के साथ लचीले और उत्तरदायी तत्व बनाएं: flex
डिस्प्ले फ्लेक्स नवीनतम सीएसएस लेआउट मोड में से एक है। जब डिस्प्ले फ्लेक्स मूल तत्व पर होता है, तो इसके अंदर के सभी तत्व लचीले सीएसएस तत्व बन जाते हैं। इस कॉन्फ़िगरेशन में मूल तत्व एक फ्लेक्सबॉक्स है।
फ्लेक्सबॉक्स चौड़ाई और ऊंचाई जैसे पूर्वनिर्धारित चर के साथ उत्तरदायी डिजाइन बनाते हैं। इसकी कीमत है HTML/CSS flexboxes के बारे में सीखना आरंभ करने से पहले।
<!DOCTYPE html>
<एचटीएमएल लैंग ="एन">
<सिर>
<मेटा वर्णसेट ="यूटीएफ-8">
<शीर्षक>सीएसएस प्रदर्शन मान</title>
<शैली>
।मोड़ना {
प्रदर्शन: फ्लेक्स;
फ़ॉन्ट-आकार: 3rem;
}
#फ्लेक्स-1 {
पृष्ठभूमि-रंग: पीला;
चौड़ाई: 40%;
ऊंचाई: 100 पीएक्स;
}
#फ्लेक्स-2 {
पृष्ठभूमि-रंग: हल्का हरा;
चौड़ाई: 25%;
ऊंचाई: 100 पीएक्स;
}
#फ्लेक्स-3 {
पृष्ठभूमि-रंग: हल्का नीला;
चौड़ाई: 35%;
ऊंचाई: 100 पीएक्स;
}
</style>
</head>
<तन>
<एच 1>सीएसएस डिस्प्ले फ्लेक्स</h1>
<डिव क्लास ="मोड़ना">
<डिव आईडी ="फ्लेक्स-1"></div>
<डिव आईडी ="फ्लेक्स-2"></div>
<डिव आईडी ="फ्लेक्स-3"></div>
</div>
</body>
</html>स्थिति Flexboxes साथ-साथ प्रदर्शन के साथ: इनलाइन-फ्लेक्स
इनलाइन-फ्लेक्स एक नियमित फ्लेक्सबॉक्स की तरह व्यवहार करता है, जिसमें तत्व के अतिरिक्त लाभ अन्य तत्वों के बगल में बैठने में सक्षम होते हैं।
<!DOCTYPE html>
<एचटीएमएल लैंग ="एन">
<सिर>
<मेटा वर्णसेट ="यूटीएफ-8">
<शीर्षक>सीएसएस प्रदर्शन मान</title>
<शैली>
.इनलाइन-फ्लेक्स {
प्रदर्शन: इनलाइन-फ्लेक्स;
फ़ॉन्ट-आकार: 3rem;
चौड़ाई: 49.8%;
}
#इनलाइन-फ्लेक्स-1 {
पृष्ठभूमि-रंग: पीला;
चौड़ाई: 40%;
ऊंचाई: 100 पीएक्स;
}
#इनलाइन-फ्लेक्स-2 {
पृष्ठभूमि-रंग: हल्का हरा;
चौड़ाई: 25%;
ऊंचाई: 100 पीएक्स;
}
#इनलाइन-फ्लेक्स-3 {
पृष्ठभूमि-रंग: हल्का नीला;
चौड़ाई: 35%;
ऊंचाई: 100 पीएक्स;
}
</style>
</head>
<तन>
<एच 1>सीएसएस डिस्प्ले इनलाइन-फ्लेक्स</h1>
<डिव क्लास ="इनलाइन-फ्लेक्स">
<डिव आईडी ="इनलाइन-फ्लेक्स-1"></div>
<डिव आईडी ="इनलाइन-फ्लेक्स-2"></div>
<डिव आईडी ="इनलाइन-फ्लेक्स-3"></div>
</div>
<डिव क्लास ="इनलाइन-फ्लेक्स">
<डिव आईडी ="इनलाइन-फ्लेक्स-1"></div>
<डिव आईडी ="इनलाइन-फ्लेक्स-2"></div>
<डिव आईडी ="इनलाइन-फ्लेक्स-3"></div>
</div>
</body>
</html>CSS डिस्प्ले के साथ कॉम्प्लेक्स टेबल्स बनाएं: टेबल
डिस्प्ले टेबल वैल्यू वेबसाइट डिजाइन के पुराने दिनों की याद दिलाती है। जबकि अधिकांश वेबसाइटें आज अपने लेआउट के लिए तालिकाओं का उपयोग नहीं करती हैं, फिर भी वे डेटा और सामग्री को पढ़ने योग्य प्रारूप में दिखाने के लिए मान्य हैं।
HTML तत्व में तालिका मान जोड़ने से यह तालिका तत्व की तरह कार्य करेगा, लेकिन आपको अपनी तालिका को ठीक से काम करने के लिए अतिरिक्त मानों की आवश्यकता है।
सीएसएस डिस्प्ले: टेबल-सेल
तालिका-कोशिका मान वाले तत्व मुख्य तालिका में अलग-अलग कक्षों के रूप में कार्य करते हैं। और तालिका-स्तंभ और तालिका-पंक्ति मान इन व्यक्तिगत कक्षों को एक साथ समूहित करते हैं।
सीएसएस डिस्प्ले: टेबल-पंक्ति
तालिका-पंक्ति मान a. की तरह ही काम करता है
सीएसएस डिस्प्ले: टेबल-कॉलम
तालिका-स्तंभ मान तालिका-पंक्ति मान के समान काम करता है, केवल यह आपकी तालिका को विभाजित नहीं करता है। इसके बजाय, आप इस मान का उपयोग पहले से मौजूद विभिन्न स्तंभों में विशिष्ट CSS नियमों को जोड़ने के लिए कर सकते हैं।
<!DOCTYPE html>
<एचटीएमएल लैंग ="एन">
<सिर>
<मेटा वर्णसेट ="यूटीएफ-8">
<शीर्षक>सीएसएस प्रदर्शन मान</title>
<शैली>
।मेज़ {
प्रदर्शन: टेबल;
फ़ॉन्ट-आकार: 3rem;
}
.शीर्षक {
डिस्प्ले: टेबल-हेडर-ग्रुप;
फ़ॉन्ट-आकार: 3rem;
}
#कॉलम-1 {
प्रदर्शन: तालिका-स्तंभ-समूह;
पृष्ठभूमि-रंग: पीला;
}
#कॉलम-2 {
प्रदर्शन: तालिका-स्तंभ-समूह;
पृष्ठभूमि-रंग: हल्का हरा;
}
#कॉलम-3 {
प्रदर्शन: तालिका-स्तंभ-समूह;
पृष्ठभूमि-रंग: हल्का नीला;
}
#पंक्ति-1 {
प्रदर्शन: टेबल-पंक्ति;
}
#पंक्ति-2 {
प्रदर्शन: टेबल-पंक्ति;
}
#पंक्ति-3 {
प्रदर्शन: टेबल-पंक्ति;
}
#कक्ष {
प्रदर्शन: टेबल-सेल;
पैडिंग: 10px;
चौड़ाई: 20%;
}
</style>
</head>
<तन>
<एच 1>सीएसएस प्रदर्शन तालिका</h1>
<डिव क्लास ="मेज़">
<डिव आईडी ="कॉलम-1"></div>
<डिव आईडी ="कॉलम-2"></div>
<डिव आईडी ="कॉलम-3"></div>
<डिव क्लास ="हैडर">
<डिव आईडी ="कक्ष">नाम</div>
<डिव आईडी ="कक्ष">आयु</div>
<डिव आईडी ="कक्ष">देश</div>
</div>
<डिव आईडी ="पंक्ति-1">
<डिव आईडी ="कक्ष">जेफ</div>
<डिव आईडी ="कक्ष">21</div>
<डिव आईडी ="कक्ष">अमेरीका</div>
</div>
<डिव आईडी ="पंक्ति-2">
<डिव आईडी ="कक्ष">मुक़दमा चलाना</div>
<डिव आईडी ="कक्ष">34</div>
<डिव आईडी ="कक्ष">स्पेन</div>
</div>
<डिव आईडी ="पंक्ति-3">
<डिव आईडी ="कक्ष">बोरिस</div>
<डिव आईडी ="कक्ष">57</div>
<डिव आईडी ="कक्ष">सिंगापुर</div>
</div>
</div>
</body>
</html>सीएसएस डिस्प्ले के साथ साइड-बाय-साइड टेबल बनाएं: इनलाइन-टेबल
अन्य इनलाइन वेरिएंट की तरह, जिन्हें हमने पहले ही देखा है, इनलाइन-टेबल टेबल तत्वों को अन्य तत्वों के बगल में रखना संभव बनाता है।
सीएसएस डिस्प्ले के साथ उत्तरदायी वेबसाइट लेआउट बनाएं: ग्रिड
CSS डिस्प्ले ग्रिड मान तालिका मान के समान है, केवल ग्रिड के कॉलम और पंक्तियों में लचीला आकार हो सकता है। यह वेब पेजों के लिए मुख्य लेआउट बनाने के लिए ग्रिड को आदर्श बनाता है। वे पूर्ण-चौड़ाई वाले हेडर और फ़ुटर के लिए जगह छोड़ते हैं, जबकि विभिन्न आकारों के सामग्री क्षेत्रों को भी संभव बनाते हैं।
<!DOCTYPE html>
<एचटीएमएल लैंग ="एन">
<सिर>
<मेटा वर्णसेट ="यूटीएफ-8">
<शीर्षक>सीएसएस प्रदर्शन मान</title>
<शैली>
।जाल {
प्रदर्शन: ग्रिड;
फ़ॉन्ट-आकार: 3rem;
ग्रिड-टेम्पलेट-क्षेत्र:
'हैडर हैडर हैडर हैडर'
'लेफ्ट-साइडबार कंटेंट कंटेंट राइट-साइडबार'
'पाद लेख पाद लेख पाद लेख';
अंतर: 10px;
}
#ग्रिड-1 {
ग्रिड-क्षेत्र: शीर्षलेख;
पृष्ठभूमि-रंग: पीला;
ऊंचाई: 100 पीएक्स;
पैडिंग: 20px;
पाठ-संरेखण: केंद्र;
}
#ग्रिड 2 {
ग्रिड-क्षेत्र: लेफ्ट-साइडबार;
पृष्ठभूमि-रंग: हल्का हरा;
ऊंचाई: 200px;
पैडिंग: 20px;
पाठ-संरेखण: केंद्र;
}
#ग्रिड-3 {
ग्रिड-क्षेत्र: सामग्री;
पृष्ठभूमि-रंग: हल्का नीला;
ऊंचाई: 200px;
पैडिंग: 20px;
पाठ-संरेखण: केंद्र;
}
#ग्रिड-4 {
ग्रिड-क्षेत्र: दायां साइडबार;
पृष्ठभूमि-रंग: हल्का हरा;
ऊंचाई: 200px;
पैडिंग: 20px;
पाठ-संरेखण: केंद्र;
}
#ग्रिड-5 {
ग्रिड-क्षेत्र: पादलेख;
पृष्ठभूमि-रंग: पीला;
ऊंचाई: 100 पीएक्स;
पैडिंग: 20px;
पाठ-संरेखण: केंद्र;
}
</style>
</head>
<तन>
<एच 1>सीएसएस डिस्प्ले ग्रिड</h1>
<डिव क्लास ="जाल">
<डिव आईडी ="ग्रिड-1">हैडर</div>
<डिव आईडी ="ग्रिड 2">बाईं साइडबार</div>
<डिव आईडी ="ग्रिड-3">विषय</div>
<डिव आईडी ="ग्रिड-4">राइट साइडबार</div>
<डिव आईडी ="ग्रिड-5">फ़ुटबाल</div>
</div>
</body>
</html>
ग्रिड फ्लेक्सबॉक्स के समान होते हैं, केवल वे तत्वों को एक दूसरे के नीचे और बगल में रख सकते हैं। इसके लिए ग्रिड-टेम्पलेट-क्षेत्रों की संपत्ति महत्वपूर्ण है। जैसा कि आप कोड से देख सकते हैं, हमारे शीर्षलेख और पाद लेख सरणी में चार रिक्त स्थान लेते हैं, क्योंकि वे पूर्ण-चौड़ाई वाले हैं। साइडबार प्रत्येक में एक स्लॉट लेते हैं, जबकि सामग्री दो लेती है, प्रभावी रूप से ग्रिड की मध्य पंक्ति को तीन स्तंभों में विभाजित करती है।
सीएसएस डिस्प्ले: इनलाइन-ग्रिड
इनलाइन-ग्रिड मान का उपयोग करने से आपका ग्रिड अन्य तत्वों के बगल में बैठ जाएगा, ठीक इस गाइड के अन्य इनलाइन मानों की तरह।
वेब डिज़ाइन के लिए CSS डिस्प्ले का उपयोग करना
CSS डिस्प्ले प्रॉपर्टी HTML मार्कअप को बदले बिना वेबसाइट एलिमेंट स्ट्रक्चर को एडजस्ट करने का एक आसान तरीका प्रदान करती है। यह शोपिफाई या वर्डप्रेस जैसे कंटेंट डिलीवरी प्लेटफॉर्म का उपयोग करने वालों के लिए आदर्श है, लेकिन यह सामान्य वेब डिज़ाइन के लिए भी उपयोगी हो सकता है।
