Home-theater-designers
CSS डिस्प्ले प्रॉपर्टी वेब डिज़ाइनरों के लिए एक शक्तिशाली टूल है। यह आपको याद रखने में आसान सरल मानों के साथ न्यूनतम स्टाइल के साथ वेबसाइट तत्व लेआउट को नियंत्रित करने देता है।
लेकिन इनमें से प्रत्येक मूल्य क्या करता है, और वे कैसे काम करते हैं? चलो पता करते हैं।
दिन का मेकअप वीडियो
CSS डिस्प्ले प्रॉपर्टी क्या है?
डिस्प्ले प्रॉपर्टी वेबपेज पर HTML तत्वों के लिए उपयोग किए जाने वाले बॉक्स रेंडरिंग के प्रकार को निर्दिष्ट करती है। इसके परिणामस्वरूप कई तरह के व्यवहार होते हैं, जिसमें बिल्कुल भी नहीं दिखाना शामिल है। आप इन मूल्यों को अपनी वेबसाइट पर स्टाइल शीट या उपयुक्त सीएसएस अनुकूलन अनुभागों के माध्यम से संपादित कर सकते हैं वर्डप्रेस जैसे सीएमएस टूल .
तत्वों को सीएसएस डिस्प्ले के अनुरूप रखें: इनलाइन
चौड़ाई और ऊंचाई मान इनलाइन डिस्प्ले वाले तत्व पर लागू नहीं होते हैं; अंदर की सामग्री इसके आयाम निर्धारित करती है। इनलाइन HTML तत्व अन्य तत्वों के साथ कंधे से कंधा मिलाकर बैठ सकते हैं, जैसा व्यवहार करते हैं a <अवधि> . टेक्स्ट के लिए डिस्प्ले इनलाइन का सबसे अधिक उपयोग किया जाता है।
विंडोज़ प्रारूप को पूरा करने में असमर्थ है
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Display Values</title>
<style>
.inline {
display: inline;
font-size: 3rem;
}
#inline-1 {
background-color: yellow;
padding: 10px 0px 10px 10px;
}
#inline-2 {
background-color: lightgreen;
padding: 10px 10px 10px 0px;
}
</style>
</head>
<body>
<h1>CSS Display Inline</h1>
<div class="inline" id="inline-1">This is text</div>
<div class="inline" id="inline-2">with the inline property value.</div>
</body>
</html>
ऊपर दिया गया यह HTML मार्कअप और CSS डिस्प्ले इनलाइन वैल्यू का एक अच्छा उदाहरण है। जब एक साथ उपयोग किया जाता है, तो यह दो अलग-अलग HTML तत्वों से बने टेक्स्ट की एक पंक्ति प्रदर्शित करेगा।
CSS डिस्प्ले के साथ वेबसाइट लेआउट को नियंत्रित करें: ब्लॉक
कुछ मायनों में, डिस्प्ले ब्लॉक वैल्यू इनलाइन वैल्यू के विपरीत है। ऊंचाई और चौड़ाई के आयाम सेट किए जा सकते हैं, और इस मान वाले तत्व एक दूसरे के बगल में नहीं बैठ सकते। ऊपर दिया गया उदाहरण दो तत्वों को ब्लॉक मान के साथ दिखाता है। ब्लॉक प्रदर्शन वाले तत्व अपने मूल तत्व की अधिकतम चौड़ाई पर डिफ़ॉल्ट रूप से प्रदर्शित होते हैं।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Display Values</title>
<style>
.block {
display: block;
font-size: 3rem;
width: fit-content;
}
#block-1 {
background-color: yellow;
padding: 10px 10px 10px 10px;
}
#block-2 {
background-color: lightgreen;
padding: 10px 10px 10px 10px;
}
</style>
</head>
<body>
<h1>CSS Display Block</h1>
<div class="block" id="block-1">This is text</div>
<div class="block" id="block-2">with the block property value.</div>
</body>
</html>इनलाइन शैली उदाहरण के विपरीत, यह प्रदर्शन ब्लॉक मान उदाहरण टेक्स्ट की पंक्तियों को दो अलग-अलग पंक्तियों में विभाजित करता है। फ़िट-सामग्री चौड़ाई मान पाठ की लंबाई से मेल खाने के लिए तत्वों की चौड़ाई निर्धारित करता है।
सीएसएस डिस्प्ले के साथ साइड-बाय-साइड HTML एलिमेंट्स: इनलाइन-ब्लॉक
CSS डिस्प्ले इनलाइन-ब्लॉक मान एक नियमित इनलाइन मान की तरह ही काम करता है, केवल विशिष्ट आयाम जोड़ने की क्षमता के साथ। यह बिना मूल तत्वों के ग्रिड-जैसे लेआउट बनाना संभव बनाता है। पिछले उदाहरण पर वापस जाने पर, इनलाइन-ब्लॉक मान जोड़ने से तत्व एक दूसरे के बगल में बैठ सकते हैं।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Display Values</title>
<style>
.inline-block {
display: inline-block;
font-size: 3rem;
width: fit-content;
}
#inline-block-1 {
background-color: yellow;
padding: 10px 10px 10px 10px;
}
#inline-block-2 {
background-color: lightgreen;
padding: 10px 10px 10px 10px;
}
</style>
</head>
<body>
<h1>CSS Display Inline-Block (width set)</h1>
<div class="inline-block" id="inline-block-1">This is text</div>
<div class="inline-block" id="inline-block-2">with the inline-block property
value.</div>
</body>
</html>
इनलाइन-ब्लॉक मान इनलाइन मान से बहुत अलग नहीं दिखता है। यह ध्यान रखना महत्वपूर्ण है कि आप इस मान के साथ तत्वों के आयाम निर्धारित कर सकते हैं, हालांकि, कुछ मामलों में काम करना आसान बनाते हैं।
CSS डिस्प्ले के साथ वेबसाइट तत्वों को छुपाएं: कोई नहीं
सबसे सरल प्रदर्शन मान 'कोई नहीं' है। यह मान मार्जिन और अन्य रिक्ति गुणों के साथ तत्व और किसी भी चाइल्ड तत्व को छुपाता है। CSS डिस्प्ले वाले तत्व कोई भी मान अभी भी ब्राउज़र निरीक्षकों के भीतर दिखाई नहीं दे रहे हैं।
CSS डिस्प्ले के साथ लचीले और उत्तरदायी तत्व बनाएं: flex
डिस्प्ले फ्लेक्स नवीनतम सीएसएस लेआउट मोड में से एक है। जब डिस्प्ले फ्लेक्स मूल तत्व पर होता है, तो इसके अंदर के सभी तत्व लचीले सीएसएस तत्व बन जाते हैं। इस कॉन्फ़िगरेशन में मूल तत्व एक फ्लेक्सबॉक्स है।
फ्लेक्सबॉक्स चौड़ाई और ऊंचाई जैसे पूर्वनिर्धारित चर के साथ उत्तरदायी डिजाइन बनाते हैं। इसकी कीमत है HTML/CSS flexboxes के बारे में सीखना आरंभ करने से पहले।
आप वीडियो को लाइव फोटो कैसे बनाते हैं
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Display Values</title>
<style>
.flex {
display: flex;
font-size: 3rem;
}
#flex-1 {
background-color: yellow;
width: 40%;
height: 100px;
}
#flex-2 {
background-color: lightgreen;
width: 25%;
height: 100px;
}
#flex-3 {
background-color: lightblue;
width: 35%;
height: 100px;
}
</style>
</head>
<body>
<h1>CSS Display Flex</h1>
<div class="flex">
<div id="flex-1"></div>
<div id="flex-2"></div>
<div id="flex-3"></div>
</div>
</body>
</html> स्थिति Flexboxes साथ-साथ प्रदर्शन के साथ: इनलाइन-फ्लेक्स
इनलाइन-फ्लेक्स एक नियमित फ्लेक्सबॉक्स की तरह व्यवहार करता है, जिसमें तत्व के अतिरिक्त लाभ अन्य तत्वों के बगल में बैठने में सक्षम होते हैं।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Display Values</title>
<style>
.inline-flex {
display: inline-flex;
font-size: 3rem;
width: 49.8%;
}
#inline-flex-1 {
background-color: yellow;
width: 40%;
height: 100px;
}
#inline-flex-2 {
background-color: lightgreen;
width: 25%;
height: 100px;
}
#inline-flex-3 {
background-color: lightblue;
width: 35%;
height: 100px;
}
</style>
</head>
<body>
<h1>CSS Display Inline-Flex</h1>
<div class="inline-flex">
<div id="inline-flex-1"></div>
<div id="inline-flex-2"></div>
<div id="inline-flex-3"></div>
</div>
<div class="inline-flex">
<div id="inline-flex-1"></div>
<div id="inline-flex-2"></div>
<div id="inline-flex-3"></div>
</div>
</body>
</html>CSS डिस्प्ले के साथ कॉम्प्लेक्स टेबल्स बनाएं: टेबल
डिस्प्ले टेबल वैल्यू वेबसाइट डिजाइन के पुराने दिनों की याद दिलाती है। जबकि अधिकांश वेबसाइटें आज अपने लेआउट के लिए तालिकाओं का उपयोग नहीं करती हैं, फिर भी वे डेटा और सामग्री को पढ़ने योग्य प्रारूप में दिखाने के लिए मान्य हैं।
HTML तत्व में तालिका मान जोड़ने से यह तालिका तत्व की तरह कार्य करेगा, लेकिन आपको अपनी तालिका को ठीक से काम करने के लिए अतिरिक्त मानों की आवश्यकता है।
सीएसएस डिस्प्ले: टेबल-सेल
तालिका-कोशिका मान वाले तत्व मुख्य तालिका में अलग-अलग कक्षों के रूप में कार्य करते हैं। और तालिका-स्तंभ और तालिका-पंक्ति मान इन व्यक्तिगत कक्षों को एक साथ समूहित करते हैं।
सीएसएस डिस्प्ले: टेबल-पंक्ति
तालिका-पंक्ति मान
सीएसएस डिस्प्ले: टेबल-कॉलम
तालिका-स्तंभ मान तालिका-पंक्ति मान के समान काम करता है, केवल यह आपकी तालिका को विभाजित नहीं करता है। इसके बजाय, आप इस मान का उपयोग पहले से मौजूद विभिन्न स्तंभों में विशिष्ट CSS नियमों को जोड़ने के लिए कर सकते हैं।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Display Values</title>
<style>
.table {
display: table;
font-size: 3rem;
}
.header {
display: table-header-group;
font-size: 3rem;
}
#column-1 {
display: table-column-group;
background-color: yellow;
}
#column-2 {
display: table-column-group;
background-color: lightgreen;
}
#column-3 {
display: table-column-group;
background-color: lightblue;
}
#row-1 {
display: table-row;
}
#row-2 {
display: table-row;
}
#row-3 {
display: table-row;
}
#cell {
display: table-cell;
padding: 10px;
width: 20%;
}
</style>
</head>
<body>
<h1>CSS Display Table</h1>
<div class="table">
<div id="column-1"></div>
<div id="column-2"></div>
<div id="column-3"></div>
<div class="header">
<div id="cell">Name</div>
<div id="cell">Age</div>
<div id="cell">Country</div>
</div>
<div id="row-1">
<div id="cell">Jeff</div>
<div id="cell">21</div>
<div id="cell">USA</div>
</div>
<div id="row-2">
<div id="cell">Sue</div>
<div id="cell">34</div>
<div id="cell">Spain</div>
</div>
<div id="row-3">
<div id="cell">Boris</div>
<div id="cell">57</div>
<div id="cell">Singapore</div>
</div>
</div>
</body>
</html>सीएसएस डिस्प्ले के साथ साइड-बाय-साइड टेबल बनाएं: इनलाइन-टेबल
अन्य इनलाइन वेरिएंट की तरह, जिन्हें हमने पहले ही देखा है, इनलाइन-टेबल टेबल तत्वों को अन्य तत्वों के बगल में रखना संभव बनाता है।
एआर जोन ऐप क्या है
सीएसएस डिस्प्ले के साथ उत्तरदायी वेबसाइट लेआउट बनाएं: ग्रिड
CSS डिस्प्ले ग्रिड मान तालिका मान के समान है, केवल ग्रिड के कॉलम और पंक्तियों में लचीला आकार हो सकता है। यह वेब पेजों के लिए मुख्य लेआउट बनाने के लिए ग्रिड को आदर्श बनाता है। वे पूर्ण-चौड़ाई वाले हेडर और फ़ुटर के लिए जगह छोड़ते हैं, जबकि विभिन्न आकारों के सामग्री क्षेत्रों को भी संभव बनाते हैं।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Display Values</title>
<style>
.grid {
display: grid;
font-size: 3rem;
grid-template-areas:
'header header header header'
'left-sidebar content content right-sidebar'
'footer footer footer footer';
gap: 10px;
}
#grid-1 {
grid-area: header;
background-color: yellow;
height: 100px;
padding: 20px;
text-align: center;
}
#grid-2 {
grid-area: left-sidebar;
background-color: lightgreen;
height: 200px;
padding: 20px;
text-align: center;
}
#grid-3 {
grid-area: content;
background-color: lightblue;
height: 200px;
padding: 20px;
text-align: center;
}
#grid-4 {
grid-area: right-sidebar;
background-color: lightgreen;
height: 200px;
padding: 20px;
text-align: center;
}
#grid-5 {
grid-area: footer;
background-color: yellow;
height: 100px;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<h1>CSS Display Grid</h1>
<div class="grid">
<div id="grid-1">Header</div>
<div id="grid-2">Left Sidebar</div>
<div id="grid-3">Content</div>
<div id="grid-4">Right Sidebar</div>
<div id="grid-5">Footer</div>
</div>
</body>
</html>
ग्रिड फ्लेक्सबॉक्स के समान होते हैं, केवल वे तत्वों को एक दूसरे के नीचे और बगल में रख सकते हैं। इसके लिए ग्रिड-टेम्पलेट-क्षेत्रों की संपत्ति महत्वपूर्ण है। जैसा कि आप कोड से देख सकते हैं, हमारे शीर्षलेख और पाद लेख सरणी में चार रिक्त स्थान लेते हैं, क्योंकि वे पूर्ण-चौड़ाई वाले हैं। साइडबार प्रत्येक में एक स्लॉट लेते हैं, जबकि सामग्री दो लेती है, प्रभावी रूप से ग्रिड की मध्य पंक्ति को तीन स्तंभों में विभाजित करती है।
सीएसएस डिस्प्ले: इनलाइन-ग्रिड
इनलाइन-ग्रिड मान का उपयोग करने से आपका ग्रिड इस गाइड के अन्य इनलाइन मानों की तरह ही अन्य तत्वों के बगल में बैठने में सक्षम होगा।
वेब डिज़ाइन के लिए CSS डिस्प्ले का उपयोग करना
CSS डिस्प्ले प्रॉपर्टी HTML मार्कअप को बदले बिना वेबसाइट एलिमेंट स्ट्रक्चर को एडजस्ट करने का एक आसान तरीका प्रदान करती है। यह शोपिफाई या वर्डप्रेस जैसे कंटेंट डिलीवरी प्लेटफॉर्म का उपयोग करने वालों के लिए आदर्श है, लेकिन यह सामान्य वेब डिज़ाइन के लिए भी उपयोगी हो सकता है।