Home-theater-designers
CSS ڈسپلے پراپرٹی ویب ڈیزائنرز کے لیے ایک طاقتور ٹول ہے۔ یہ آپ کو کم سے کم اسٹائل کے ساتھ ویب سائٹ کے عنصر کی ترتیب کو کنٹرول کرنے دیتا ہے، سادہ اقدار کے ساتھ جو یاد رکھنے میں آسان ہیں۔
لیکن ان میں سے ہر ایک قدر کیا کرتی ہے، اور وہ کیسے کام کرتی ہیں؟ آئیے معلوم کرتے ہیں۔
دن کی ویڈیو کا میک یوز
سی ایس ایس ڈسپلے پراپرٹی کیا ہے؟
ڈسپلے کی خاصیت ویب پیج پر HTML عناصر کے لیے استعمال ہونے والے باکس رینڈرنگ کی قسم کی وضاحت کرتی ہے۔ اس کے نتیجے میں مختلف طرز عمل ہوتے ہیں، بشمول بالکل ظاہر نہ ہونا۔ آپ ان اقدار کو اپنی ویب سائٹ پر اسٹائل شیٹ یا مناسب CSS حسب ضرورت سیکشنز کے ذریعے ایڈٹ کر سکتے ہیں۔ CMS ٹولز جیسے ورڈپریس .
عناصر کو سی ایس ایس ڈسپلے کے ساتھ لائن میں رکھیں: ان لائن
چوڑائی اور اونچائی کی اقدار ان لائن ڈسپلے والے عنصر پر لاگو نہیں ہوتی ہیں۔ اندر کا مواد اپنے طول و عرض کا تعین کرتا ہے۔ ان لائن 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 عناصر کے ساتھ بنائے گئے متن کی ایک لائن دکھائے گا۔
فلیش ڈرائیو پر ونڈوز 10 انسٹال کرنے کا طریقہ
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 عناصر بن جاتے ہیں۔ اس کنفیگریشن میں بنیادی عنصر ایک فلیکس باکس ہے۔
Flexboxes پہلے سے طے شدہ متغیرات جیسے چوڑائی اور اونچائی کے ساتھ جوابی ڈیزائن بناتے ہیں۔ یہ قابل قدر ہے HTML/CSS flexboxes کے بارے میں سیکھنا آپ شروع کرنے سے پہلے.
4B8553AF011488B693BBC238B69A5F102CBFFFFAFفلیکس باکسز کو ڈسپلے کے ساتھ ساتھ ساتھ رکھیں: ان لائن فلیکس
Inline-flex ایک عام فلیکس باکس کی طرح برتاؤ کرتا ہے، عنصر کے اضافی فائدے کے ساتھ دوسرے عناصر کے ساتھ بیٹھنے کے قابل ہوتا ہے۔
رسبری پائی کے ساتھ بنانے کی چیزیں۔
<!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>سی ایس ایس ڈسپلے کے ساتھ پیچیدہ میزیں بنائیں: ٹیبل
ڈسپلے ٹیبل ویلیو ویب سائٹ کے ڈیزائن کے پرانے دنوں کی یاد تازہ کرتی ہے۔ اگرچہ زیادہ تر ویب سائٹیں آج اپنے لے آؤٹ کے لیے ٹیبلز کا استعمال نہیں کرتی ہیں، لیکن وہ اب بھی ڈیٹا اور مواد کو پڑھنے کے قابل فارمیٹ میں دکھانے کے لیے درست ہیں۔
ٹیبل ویلیو کو 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 ڈسپلے پراپرٹی HTML مارک اپ کو تبدیل کیے بغیر ویب سائٹ کے عنصر کے ڈھانچے کو ایڈجسٹ کرنے کا ایک آسان طریقہ پیش کرتی ہے۔ یہ ان لوگوں کے لیے مثالی ہے جو مواد کی ترسیل کے پلیٹ فارم جیسے Shopify یا WordPress استعمال کرتے ہیں، لیکن یہ عام ویب ڈیزائن کے لیے بھی کارآمد ثابت ہو سکتا ہے۔