سی ایس ایس میں سیڈو عناصر سے پہلے اور بعد میں کیسے استعمال کریں۔

سی ایس ایس میں سیڈو عناصر سے پہلے اور بعد میں کیسے استعمال کریں۔

سیڈو عناصر ایک جدید ترین سلیکٹر ہیں جو CSS میں استعمال کے لیے دستیاب ہیں۔ ان سلیکٹرز کے پیچھے بنیادی مقصد ایچ ٹی ایم ایل دستاویز میں تبدیلی کے بغیر منفرد سٹائل بنانا ہے جو کہ دیے گئے ویب پیج کا بنیادی ڈھانچہ بنانے کے لیے استعمال ہوتا ہے۔





سی ایس ایس میں چھدم عناصر کو استعمال کرنے کا طریقہ یہاں ہے۔



ونڈوز 10 ری سائیکل بن کا آئیکن غائب ہے۔

عام سیڈو عناصر۔

چھدم عناصر کی ایک وسیع فہرست موجود ہے جو ویب ڈویلپر کی زندگی کو آسان بنانے کے لیے دستیاب ہے۔ ان چھدم عناصر میں سے کچھ شامل ہیں:





  • پہلے۔
  • کے بعد۔
  • پس منظر
  • پہلی قطار
  • پہلا خط

مخصوص حالات میں ، کچھ سیڈو عناصر دوسروں کے مقابلے میں زیادہ موزوں ثابت ہوں گے ، لیکن ایک چیز جو مستقل رہتی ہے وہ ہے کسی بھی سیڈو عنصر کو استعمال کرنے کے لیے عمومی ڈھانچہ۔

سیوڈو عناصر کی ساخت کی مثال


selector::pseudo-element{
/* css code */
}

اگرچہ آپ HTML عنصر کو بطور سلیکٹر استعمال کر سکتے ہیں ، یہ تجویز کی جاتی ہے کہ آپ اپنی ترتیب میں غیر ارادی عناصر کو نشانہ بنانے سے بچنے کے لیے کلاس یا آئی ڈی استعمال کریں۔ وہ عنصر ، سٹائل یا ڈیٹا جسے آپ مطلوبہ پوزیشن پر ڈالنا چاہتے ہیں اسے گھوبگھرالی منحنی خطوط وحدانی کے درمیان رکھنا چاہیے۔



سیوڈو عناصر سے پہلے اور بعد میں فہرست میں سب سے زیادہ مقبول ہیں ، اور یہ کہ ان کو استعمال کرنے کے کئی عملی طریقے ہیں-یہ دیکھنا مشکل نہیں ہے کہ کیوں۔

سی ایس ایس میں پری سیڈو عنصر کا استعمال۔

اگرچہ ناممکن نہیں ، سی ایس ایس میں پڑھنے کے قابل متن کے ساتھ تصاویر کو چڑھانا مشکل ہے۔ یہ زیادہ تر اس وجہ سے ہے کہ تصویر اور متن ویب پیج پر ایک ہی پوزیشن پر قابض ہوں گے۔



یہ نسبتا easy آسان ہے۔ متن کے گروپ کے پس منظر میں ایک تصویر بھیجیں۔ ، لیکن جب یہ تصویر بہت زیادہ روشن ہوتی ہے تو اس کے اوپر موجود متن کو مغلوب کر دیتی ہے۔ ان مثالوں میں ، اگلا مرحلہ دھندلاپن پراپرٹی کا استعمال کرتے ہوئے تصویر کو کم مبہم بنانے کی کوشش کرنا ہے۔

مسئلہ صرف یہ ہے کہ چونکہ تصویر اور متن ایک ہی پوزیشن پر قابض ہیں اس لیے متن بھی کچھ حد تک شفاف ہو جائے گا۔



اس مسئلے کو حل کرنے کے چند مؤثر طریقوں میں سے ایک یہ ہے کہ پہلے سیڈو عنصر کا استعمال کریں۔

سیڈو عنصر سے پہلے کی مثال کا استعمال۔


.landingPage{
/* Arranges the text on the image overlay */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
/*sets the page to adjust to different screen sizes*/
height: 100vh;
}
.landingPage::before{
content:'';
/*imports an image*/
background: url(https://source.unsplash.com/_1EYIHRG014/1600x900)
no-repeat center/cover;
/*places an overlay on top of the image*/
opacity: 0.4;
/*makes the image visible*/
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

مندرجہ بالا کوڈ ذیل میں HTML لینڈنگ پیج کلاس کے ساتھ مل کر استعمال کرنے کے لیے بنایا گیا ہے۔ جیسا کہ مذکورہ کوڈ میں دکھایا گیا ہے ، پہلے سیوڈو عنصر کا استعمال کرتے ہوئے ہم تصویر کو نشانہ بناسکتے ہیں اور تصویر کو متن کے ساتھ جوڑنے سے پہلے اس پر دھندلاپن پراپرٹی استعمال کرسکتے ہیں۔





This is the result of using the before pseudo-element
to overlay and image with readable text.


اس کے نتیجے میں تصویر پر ایک اوورلے رکھا جائے گا اور واضح متن اوپر دکھایا جائے گا ، جیسا کہ نیچے دی گئی تصویر میں دکھایا گیا ہے:

سی ایس ایس میں آفٹر سیڈو عنصر کا استعمال۔

سیڈو عنصر کے بعد ایک عملی استعمال HTML فارم بنانے میں مدد کرنا ہے۔ زیادہ تر فارم فیلڈز کے ایک سیٹ کے ساتھ بنائے جاتے ہیں جن کے لیے فارم کو کامیابی کے ساتھ جمع کرانے کے لیے ڈیٹا درکار ہوتا ہے۔

اس بات کی نشاندہی کرنے کا ایک طریقہ کہ کسی فارم میں کسی فیلڈ کو ڈیٹا کی ضرورت ہوتی ہے وہ یہ ہے کہ اس فیلڈ کے لیبل کے بعد ایک ستارہ لگا دیا جائے۔ بعد کا سیوڈو عنصر آپ کو ایسا کرنے کا ایک عملی طریقہ فراہم کرتا ہے۔

سیڈو عنصر کی مثال کے بعد استعمال کرنا۔


.required::after{
content: '*';
color: red;
}

مندرجہ بالا کوڈ کو اپنے فارم کے سی ایس ایس سیکشن میں داخل کرنا اس بات کو یقینی بنائے گا کہ ہر لیبل جس میں مطلوبہ کلاس ہو اس کے بعد براہ راست سرخ ستارہ ہوگا۔ اس کے بعد چھدم عنصر بھی اس مثال میں عملی ہے کیونکہ یہ اسٹائل کو ڈھانچے سے الگ کرنے میں مدد کرتا ہے (جو سافٹ ویئر ڈویلپمنٹ میں ہمیشہ مثالی ہوتا ہے۔)

ایڈوب ڈیجیٹل ایڈیشن سے DRM کو ہٹا دیں۔

مواد کی پراپرٹی۔

جیسا کہ مندرجہ بالا سیڈو عنصر کی مثال میں دکھایا گیا ہے ، مواد کی پراپرٹی وہ آلہ ہے جو ویب صفحے پر نیا مواد داخل کرنے کے لیے استعمال ہوتا ہے۔ یہ پراپرٹی صرف سیڈو عناصر سے پہلے اور بعد میں استعمال ہوتی ہے۔

یہ نوٹ کرنا ضروری ہے کہ یہاں تک کہ اگر مواد کی پراپرٹی کو فیڈ کرنے کے لیے کوئی مواد دستیاب نہیں ہے (جیسا کہ اوپر چھدم عنصر کی مثال میں اوپر) ، پھر بھی آپ کو پہلے یا بعد کے پیرامیٹرز کے اندر مواد کی پراپرٹی استعمال کرنے کی ضرورت ہے۔ ان کے ارادے کے مطابق کام کرنے کے لیے سیڈو عنصر۔

اب آپ سی ایس ایس میں سیڈو عناصر استعمال کرسکتے ہیں۔

اس آرٹیکل میں ، آپ نے اپنے سی ایس ایس پروگراموں میں سیڈو عناصر کی شناخت اور استعمال کرنے کا طریقہ سیکھا۔ آپ کو چھدم عناصر سے پہلے اور بعد میں متعارف کرایا گیا اور دونوں کو استعمال کرنے کے عملی طریقے بتائے گئے۔ آپ یہ دیکھنے کے قابل بھی تھے کہ مواد کی پراپرٹی چھدم عناصر سے پہلے اور بعد میں کامیاب استعمال کے لیے کیوں ضروری ہے۔

بانٹیں بانٹیں ٹویٹ ای میل۔ 10 سادہ سی ایس ایس کوڈ کی مثالیں جو آپ 10 منٹ میں سیکھ سکتے ہیں۔

سی ایس ایس کے ساتھ مدد کی ضرورت ہے؟ شروع کرنے کے لیے ان بنیادی CSS کوڈ مثالوں کو آزمائیں ، پھر انہیں اپنے ویب صفحات پر لاگو کریں۔

اگلا پڑھیں۔ متعلقہ موضوعات۔
  • پروگرامنگ۔
  • ویب ڈیزائن
  • سی ایس ایس
مصنف کے بارے میں کدیشا کیان۔(21 مضامین شائع ہوئے)

کدیشا کین ایک مکمل اسٹیک سافٹ ویئر ڈویلپر اور ٹیکنیکل/ٹیکنالوجی رائٹر ہیں۔ وہ کچھ انتہائی پیچیدہ تکنیکی تصورات کو آسان بنانے کی مخصوص صلاحیت رکھتی ہے۔ ایسا مواد تیار کرنا جسے کسی بھی ٹیکنالوجی کے نوآموز آسانی سے سمجھ سکیں۔ وہ لکھنے ، دلچسپ سافٹ وئیر تیار کرنے اور دنیا کا سفر کرنے کے بارے میں پرجوش ہے (ڈاکومنٹریز کے ذریعے)

Kadeisha Kean سے مزید

ہماری نیوز لیٹر کو سبسکرائب کریں

ٹیک ٹپس ، جائزے ، مفت ای بکس ، اور خصوصی سودوں کے لیے ہمارے نیوز لیٹر میں شامل ہوں!

سبسکرائب کرنے کے لیے یہاں کلک کریں۔