مختلف رنگوں کے ساتھ ڈبل بارڈر کیسے شامل کریں؟
CSS کا استعمال کرتے ہوئے کسی بھی شکل پر ڈبل بارڈر شامل کرنے کے لیے، ' :پہلے 'سلیکٹر مشہور ہے۔ یہ دونوں سرحدوں کو منفرد بنانے کے لیے رنگ بدلتا ہے۔ مختلف رنگوں کے ساتھ ڈبل بارڈر شامل کرنے کے لیے ذیل میں فراہم کردہ مرحلہ وار طریقہ کار:
مرحلہ 1: Div عنصر شامل کریں اور کلاسز تفویض کریں۔
HTML فائل میں، div عنصر کو
ٹیگ کے اندر شامل کریں اور تفویض کریں ' کلاس 'کے نام کے ساتھ' ڈبل بارڈر ' صارفین اپنی کلاس کا نام بھی بنا سکتے ہیں:< div کلاس = 'دوہری سرحد' >
< / div >
مرحلہ 2: اسٹائل ٹیگ بنائیں
اس مرحلے میں، کلاس کے لیے ایک حصہ بنائیں ' ڈبل بارڈر 'اور اسے ' کے ساتھ ایک کاپی بنائیں :پہلے 'سلیکٹر۔ اس طرح، سی ایس ایس کی خصوصیات ہماری کلاسوں پر لاگو ہوں گی:
< انداز >
.دگنا- سرحد {
}
.دگنا- سرحد :پہلے {
}
< / انداز >
مرحلہ 3: کلاس میں طرزیں شامل کریں۔
سی ایس ایس کی خصوصیات کا اطلاق div عنصر پر ہوتا ہے جس کی کلاس ' ڈبل بارڈر ' ذیل میں درج ذیل اسلوب کا ذکر کیا گیا ہے۔
.دگنا- سرحد {
پس منظر- رنگ : #ccc
سرحد : 4px ٹھوس سبز؛
پیڈنگ: 50px؛
چوڑائی : 16px;
اونچائی : 16px;
پوزیشن: رشتہ دار
مارجن: 0 آٹو
}
سی ایس ایس پراپرٹیز کی تفصیل ذیل میں دی گئی ہے:
- پہلے، شامل کریں ' پس منظر کا رنگ 'جو سرمئی ہے اور' سرحد 4px وزن اور سبز رنگ کا۔
- ' بھرتی ہر طرف سے 50px کی اندرونی جگہ بنانے کے لیے ” 50px کا۔
- آخر میں، ' چوڑائی 'اور' اونچائی' 16px کا۔ اس کے علاوہ، ' مارجن ” 0 آٹو ہے جس کا مطلب ہے اوپر اور نیچے کا مارجن صفر اور بائیں ہوگا۔
ویب صفحہ اس طرح لگتا ہے:
آؤٹ پٹ دکھاتا ہے کہ سرحد 'div' پر لاگو ہوتی ہے۔
مرحلہ 4: CSS سلیکٹر کا اضافہ
اب، اسٹائل ٹیگ میں دوسرے باکس کی طرف بڑھیں جس میں ' :پہلے منتخب کنندہ منسلک ہے، اور نیچے کا کوڈ لکھیں:
.دگنا- سرحد :پہلے {پس منظر : کوئی نہیں
سرحد : 4px ٹھوس نیلا؛
مواد : '' ;
پوزیشن: مطلق؛
اوپر: 4px؛
بائیں: 4px؛
دائیں: 4px؛
نیچے: 4px؛
}
خصوصیات ذیل میں بیان کی گئی ہیں:
- کا استعمال کرتے ہیں ' پوزیشن کسی عنصر کی پوزیشن کو طے کرنے کے لیے خاصیت۔
- اس کے بعد، ' اوپر، بائیں، دائیں، اور نیچے ” اصل سے نئی تخلیق کردہ شے کے مارجن کی وضاحت کرتا ہے۔
- ایک CSS سلیکٹر ': پہلے ” ایک منتخب عنصر کے سامنے مواد شامل کرتا ہے۔
آؤٹ پٹ اس طرح نظر آتا ہے:
اس طرح مختلف رنگوں کا استعمال کرتے ہوئے ڈبل بارڈر شامل کیا جا سکتا ہے۔
نتیجہ
ڈبل بارڈر شامل کرنے کے لیے پہلے ایک div عنصر بنائیں اور اسے کلاس میں تفویض کریں۔ پھر، CSS شامل کریں ' پوزیشن ' جائیداد جو رشتہ دار پر مقرر کی جانی چاہئے۔ اس کے بعد، اس میں CSS سلیکٹر ':before' شامل کریں تاکہ صارف منتخب کردہ عنصر سے پہلے مواد شامل کر سکیں۔ اس گائیڈ نے مختلف رنگوں کے ساتھ ڈبل بارڈرز کے استعمال کا مظاہرہ کیا ہے۔