HTML صفحات میں بارڈرز کا استعمال مواد کی حد بندی اور نمایاں کرنے کے لئے کیا جاتا ہے۔ جب کسی صفحے پر بہت ساری معلومات موجود ہوں اور آپ صارف کی توجہ مخصوص حصوں کی طرف مبذول کروانا چاہیں تو اس مشمول کے اطراف کی سرحدیں استعمال کریں۔ سی ایس ایس میں بارڈرز کے بارے میں اس مضمون میں میں مندرجہ ذیل عنوانات پر گفتگو کروں گا۔
- بارڈرز کا استعمال کب کریں
- CSS میں بارڈرز
- سی ایس ایس بارڈر کی خصوصیات
- بارڈر اوصاف کے لئے پہلے سے طے شدہ اقدار
- شارٹ ہینڈ میں بارڈرز کی وضاحت کریں
- سی ایس ایس میں بارڈرز ڈیزائن کرتے وقت دھیان میں رکھنے کے لئے پوائنٹس
بارڈرز کا استعمال کب کریں
معیاری پریکٹس یہ ہے کہ HTML صفحات میں سرحدوں کی وضاحت کے لئے سی ایس ایس بارڈر ٹیگ کا استعمال کریں:
- اہم عنوانات کے ارد گرد
- پوسٹ اسکرپٹ یا اہم نوٹ کو اجاگر کرنے کے لئے
- تصاویر ، عکاسی ، لوگوں کے حوالوں ، ویڈیوز کو منسلک کرنے کے لئے
- قیمتوں کا تعین ، ٹائم لائنز یا اس طرح کی اہم معلومات کی طرف توجہ مبذول کروانا
آپ پر پڑھنا چاہیں گے سی ایس ایس سرحدوں کے بارے میں سیکھنے سے پہلے۔
سی ایس ایس کے جامع سبق کے لئے ، ملاحظہ کریں ابتدائیوں کے لئے ایڈورکا سی ایس ایس ٹیوٹوریل . HTML ویب ڈیزائن کو بڑھانے کے لئے جس طرح سی ایس ایس کا استعمال کیا جائے گا اس پر آپ کو ایک عمدہ ہیڈ اپ ملے گی۔
CSS میں بارڈرز
سی ایس ایس بارڈرز کو HTML پیج کے مختلف حصوں میں تفویض کیا جاسکتا ہے ، چاہے وہ ہیڈنگنگ یا پیراگراف کو منسلک کرنا ہو۔ آئیے ایک مثال کے ساتھ شروع کرتے ہیں۔ یہاں ہم سرخی کے چاروں طرف ایک سرحد اور پیراگراف متن کے ارد گرد ایک اور سرحد کی وضاحت کرتے ہیں۔
باڈی {بیک گراؤنڈ کا رنگ: لائٹ بلو} h1 {ٹیکسٹ - سیدھ کریں: سینٹر بارڈر اسٹائل: ٹھوس} p {فونٹ فیملی: آرڈانا فونٹ سائز: 20px بارڈر اسٹائل: بندیدار}پیراگراف کے ارد گرد بھی سرحد!
سی ایس ایس بارڈر کی خصوصیات
سی ایس ایس کی سرحدوں میں ان کی 3 اہم صفات ہیں
- انداز:اسٹائلانتساب سرحد کے طرز کی وضاحت کرتا ہے۔
- رنگ: رنگ سی ایس ایس رنگوں کے ذریعہ بیان کردہ سیٹ میں سے کوئی بھی ہوسکتا ہے۔
- چوڑائی: اس کی چوڑائی کو حد سے زیادہ موثر بنانے کے ل is استعمال کیا جاتا ہے۔
مندرجہ بالا مثال میں ، ہم نے دیکھا کہ صرف ایک بارڈر وصف کی تعریف کی گئی ہے ، وہ اس کا انداز ہے۔ دوسری خصوصیات جب تعریف نہیں ہوتی ہیں تو پہلے سے طے شدہ اقدار پر عمل پیرا ہوتے ہیں۔ رداس نامی ایک اور صفت ہے ، جو کم استعمال ہوتی ہے۔ یہ سرحد کے کناروں کو گول بنانے کے لئے استعمال ہوتا ہے۔
جاوا میں سکینر استعمال کرنے کا طریقہ
- بارڈر اسٹائل وصف
انداز | تفصیل |
بارڈر طرز: ٹھوس | |
بارڈر طرز: ڈبل | |
بارڈر طرز: نالی | |
بارڈر طرز: رج | |
بارڈر طرز: inset | |
بارڈر طرز: آغاز | |
بارڈر طرز: کوئی بھی نہیں | |
بارڈر طرز: چھپا ہوا | |
بارڈر طرز: بندیدار | |
بارڈر طرز: ڈیشڈ |
آپ دیکھیں گے کہ یہاں کوئی 'سرحد نہیں' اور 'پوشیدہ بارڈر' اختیار بھی ہے۔ ایک ڈویلپر آسانی سے کسی سرحد کی تعریف کرنے سے گریز کرسکتا ہے ، کیوں اسے واضح طور پر ’پوشیدہ بارڈر‘ سے تعبیر کرتے ہیں؟ اس صفحے کے دوسرے عناصر کے ساتھ جگہ استعمال اور صف بندی کے مقاصد کے لئے کیا گیا ہے۔
ایک عنصر میں بھی بارڈر شیلیوں کو ملایا جاسکتا ہے۔ اس مقصد کے لئے ، 4 انفرادی بارڈر اطراف کو مختلف شیلیوں کے ساتھ الگ سے بیان کیا جاسکتا ہے۔ یہ 2 طریقوں سے کیا جاسکتا ہے۔ یا تو ایک ہی ٹیگ میں تمام 4 اطراف کی وضاحت کریں۔ اس صورت میں ، گنتی اوپر لائن سے شروع ہوتی ہے اور پھر گھڑی کی سمت بڑھتی ہے۔ متبادل کے طور پر ، ہر ایک 4 لائن لائن کو انفرادی ٹیگ میں بھی بیان کیا جاسکتا ہے۔ دونوں ہی صورتوں کو اگلی مثال میں دکھایا گیا ہے۔
انداز | تفصیل |
بارڈر اسٹائل: ڈاٹڈ ڈیشڈ ٹھوس ڈبل بارڈر ٹاپ اسٹائل: بندیدار بارڈر دایاں طرز: ڈیشڈ سرحد کے نیچے کی طرز: ٹھوس بارڈر بائیں طرز: ڈبل |
- بارڈر رنگ وصف
بارڈر کے لئے رنگ صفت متعدد طریقوں سے طے کی جاسکتی ہے۔ یہ دوسرے عناصر کے ل color رنگ ترتیب دینے کے مترادف ہے۔ رنگوں کو مندرجہ ذیل طریقوں میں سے کسی ایک کے ذریعہ ترتیب دیا جاسکتا ہے:
- نام - رنگ کا نام بتائیں ، جیسے 'نیلے'۔ آپ رنگین اختیارات جیسے 'بلانچڈ آلمنڈ' کو بھی آزما سکتے ہیں!
- ہیکس - ایک ہیکس ویلیو کی وضاحت کریں ، جیسے '# ff0000'
- آر جی بی - آرجیبی کوڈ مقرر کریں۔ مثال کے طور پر ، rgb (255،255،0) کا مطلب پیلا ہے۔
- ترتیب - جیسے 'شفاف' یا 'مبہم'
- سرحد کی چوڑائی وصف:
چوڑائی کی خاصیت ، جیسا کہ نام سے پتہ چلتا ہے ، 4 سرحدی اطراف کی موٹائی کی وضاحت کرتا ہے۔ اگر ایک قدر کی وضاحت کی گئی ہے تو ، یہ تمام اطراف کے لئے ہے ، بصورت دیگر چوڑائی کی انفرادی اقدار بھی طے کی جاسکتی ہیں۔
چوڑائی کسی بھی معیاری یونٹ جیسے پکسلز (‘px’) ، پوائنٹس (‘pt’) میں یا سینٹی میٹر (‘سینٹی میٹر’) میں مخصوص کی جاسکتی ہے۔ آپ ’موٹی‘ ، ’پتلی‘ اور ’میڈیم‘ کی پہلے سے طے شدہ قدروں کا استعمال کرتے ہوئے چوڑائی بھی واضح کرسکتے ہیں۔
انداز | تفصیل |
سرحد کی چوڑائی: 10px | |
سرحد کی چوڑائی: 0.1 سینٹی میٹر | |
سرحد کی چوڑائی: میڈیم |
- بارہ رداس وصف
رداس کی وضاحت کا مقصد سرحد کے لئے گول کونے حاصل کرنا ہے۔ رداس عنصر گولپن کی حد کی وضاحت کرتا ہے۔ بڑی قدر ، زیادہ مڑے ہوئے کونے بن جاتے ہیں۔ ایک معیاری پریکٹس کے طور پر ، رداس قدروں کو سرحد کی چوڑائی کا 1-3 گنا درمیان رکھا جاتا ہے۔
مندرجہ ذیل کوڈ تیار کرے گا:
ڈبل کو انٹیجر جاوا میں تبدیل کریں
سرحد کی چوڑائی: 10px
سرحد کا رداس: 30px
بارڈر اوصاف کے لئے طے شدہ اقدار
صرف لازمی وصف ہے اسٹائل . اگر انداز غائب ہے تو ، سرحد ظاہر نہیں ہوگی۔
اگر رنگ متعین نہیں کیا گیا ہے تو ، بنیادی عنصر سے رنگ بنیادی قیمت کے طور پر لیا جاتا ہے۔ مثال کے طور پر ، اگر کسی پیراگراف کے متن کے رنگ کو ’نیلے‘ رنگ سے تعبیر کیا گیا ہے ، تو پہلے سے طے شدہ سرحد کا رنگ بھی نیلا ہوگا۔ اگر عنصر کے لئے یہاں تک کہ رنگین تعریف موجود نہیں ہے ، تو پہلے سے طے شدہ رنگ ‘کالا’ ہوتا ہے۔
چوڑائی کی پہلے سے طے شدہ قدر ’میڈیم‘ ہے۔
شارٹ ہینڈ میں بارڈرز کی وضاحت کریں
کچھ ڈویلپرز مختص ون لائن ٹیگ میں سرحدی صفات کی وضاحت کرنا ترجیح دیتے ہیں۔ یہ شارٹ ہینڈ فارمیٹ کوڈ کی لائنوں کو کم کرنے میں مدد کرتا ہے اور ماہر ڈویلپرز اس فارمیٹ کو ترجیح دیتے ہیں۔ شارٹ ہینڈ فارمیٹ کو استعمال کرنے کی سفارش کی جاتی ہے جب سرحد کی تعریف آسان اور منصفانہ معیاری ہو۔ تاہم ، اگر آپ کو سرحد کے ہر اطراف کو مختلف انداز میں اجاگر کرنے کی ضرورت ہے تو ، پھر آپ کو انفرادی ٹیگ کی وضاحت کی شکل پر قائم رہنا ہوگا۔
مندرجہ ذیل کوڈ استعمال کیا جاتا ہے:
بارڈر طرز: ڈیشڈ
بارڈر رنگ: سبز
سرحد کی چوڑائی: 5px
بارڈر: گرا ہوا سبز 5px
سی ایس ایس میں بارڈرز ڈیزائن کرتے وقت دھیان میں رکھنے کے لئے پوائنٹس
کسی صفحے میں بہت زیادہ بارڈرز استعمال نہ کریں ، یہ پریشان کن ہوسکتا ہے اور صارف کی توجہ مرکوز کرنا مشکل بن سکتا ہے۔
سرحدی انداز اور رنگوں میں مستقل مزاجی کو برقرار رکھنا ضروری ہے۔ ایک صفحے میں درجہ بندی کے اسی درجے کے عناصر کا یکساں حد کے لئے مماثل سرحدی طرز اور چوڑائی ہونی چاہئے۔ مثال کے طور پر ، اگر پیراگراف ٹھوس بارڈر اور 5px چوڑائی کے ساتھ تعریف کی گئی ہے ، دوسرے میں بھی اس شکل کو برقرار رکھیں پیراگراف ویب سائٹ ڈیزائن کے دوران عناصر.
INT میں ڈبل تبدیل کرنے کا طریقہ
ٹیگ تعریفوں کے ایک طرز پر قائم رہیں۔ کچھ ڈویلپر شارٹ کٹ تعریفوں کے ساتھ آرام دہ ہیں جس میں ایک ہی کو دی گئی تمام اقدار ہیں بارڈر ٹیگ کچھ دوسرے چوڑائی ، رنگ اور انداز کے لئے تمام ٹیگوں کی واضح فہرست سازی کو ترجیح دیتے ہیں۔ کنونشن یہ ہے کہ جب کسی صفحے میں بارڈر وسیع سجاوٹ کی ضرورت ہوتی ہے تو ، انفرادی ٹیگ الگ الگ درج ہوتے ہیں۔ اس طرح کی تخصیص کردہ سرحدی تعریفوں کو ڈیبگ کرنے کے دوران مدد ملتی ہے۔ عام معاملات کے ل just ، صرف ایک شارٹ کٹ تعریف ہوگی۔
امید ہے کہ سی ایس ایس بارڈرز پر آپ کو وہ معلومات مل گئ تھیں جن کی آپ تلاش کر رہے تھے ، اوراس کے ساتھ ، ہم سی ایس ایس آرٹیکل میں اس سرحدوں کا اختتام کرتے ہیں۔
ہمارے چیک کریں جو انسٹرکٹر کی زیر قیادت براہ راست تربیت اور حقیقی زندگی کے منصوبے کے تجربے کے ساتھ آتا ہے۔ یہ تربیت آپ کو بیک اینڈ اور فرنٹ اینڈ ویب ٹیکنالوجیز کے ساتھ کام کرنے کی مہارت میں مہارت حاصل کرتی ہے۔ اس میں ویب ڈویلپمنٹ ، jQuery ، انجولر ، نوڈ جے ایس ، ایکسپریس جے ایس ، اور مونگو ڈی بی کی تربیت شامل ہے۔
ہمارے لئے ایک سوال ہے؟ براہ کرم 'سی ایس ایس میں بارڈر' بلاگ کے تبصرے سیکشن میں اس کا تذکرہ کریں اور ہم آپ کو واپس ملیں گے۔