کوڈ کی تکرار سے بچنے کے لیے، ہم HTML اور CSS میں متعدد کلاسز استعمال کرتے ہیں۔ CSS کے ساتھ، ہم دونوں کلاسز کو ایک ساتھ ڈیفائن اور اسٹائل بھی کر سکتے ہیں اور ایک عنصر میں متعدد کلاسز کو مختلف کلاس آئی ڈیز تفویض کر کے استعمال کر سکتے ہیں۔ ایک HTML عنصر میں متعدد کلاسوں کو شامل کرنے کے لیے اسپیس سے الگ کردہ نحو کا استعمال کرتے ہوئے اس نقطہ نظر کی پیروی کی جا سکتی ہے۔
اس مضمون میں، ہم سیکھیں گے کہ ایک عنصر میں متعدد کلاسز کو کیسے شامل کیا جائے۔
سی ایس ایس میں متعدد کلاسز کا استعمال کیسے کریں؟
ایک عنصر میں دو یا دو سے زیادہ کلاسز استعمال کرنے کے لیے، ہر کلاس آئی ڈی کو اسپیس سے الگ کیا جائے گا۔
ایک عنصر میں متعدد کلاسز استعمال کرنے کے لیے آپ کو درج ذیل نحو کی پیروی کرنا ہوگی۔
< h1 کلاس = 'کلاس_1 کلاس_2 کلاس_3' > حوالے کرنا... h >
ایک ہی HTML عنصر میں، آپ ایک سے زیادہ کلاسوں کو اسپیس سے الگ کر کے شامل کر سکتے ہیں۔ آپ کی سہولت کے لیے، یہاں ایک مثال ہے۔
مثال: سی ایس ایس میں متعدد کلاسز کا استعمال
ذیل کی مثال میں، ہم بنائیں گے:
-
ٹیگ کا استعمال کرتے ہوئے ایک سرخی اور کلاس کا نام تفویض کریں “ سرخی '
- اگلا، ہم ایک اور سرخی بنائیں گے اور اسے دو مختلف کلاسوں میں تفویض کریں گے: سرخی 'اور' لائن ' ان کلاس آئی ڈیز کو اسپیس سے الگ کیا گیا ہے:
ایچ ٹی ایم ایل
h1 >
< h1 کلاس = 'سرخی کی لکیر' >
متعدد کلاسز میں ایک عنصر
h1 >
اب، آئیے سی ایس ایس فائل کی طرف جائیں اور ذیل میں درج کچھ سی ایس ایس خصوصیات کو لاگو کریں:
- rgb() فنکشن کا استعمال کرتے ہوئے سرخی میں پس منظر کا رنگ سیٹ کریں بطور ' (69، 51، 151) '
- فونٹ کا انداز سیٹ کریں ' ترچھا سرخی کے لیے۔
HTML کلاس میں، پہلی سرخی کلاس کا نام استعمال کرتی ہے ' سرخی ' لہذا، مخصوص کلاس میں بیان کردہ طرز کو پہلی سرخی پر لاگو کیا جائے گا:
سرخی {
پس منظر کا رنگ: rgb ( 69 ، 51 ، 151 ) ;
فونٹ طرز: ترچھا
}
کے لئے ' لائن 'کلاس، ہمارے پاس ہے:
- rgb() فنکشن کا استعمال کرتے ہوئے سرخی کا رنگ سیٹ کریں بطور ' (255، 0، 0) '
- ٹیکسٹ ڈیکوریشن لائن کو 'کے طور پر لاگو کریں انڈر لائن '
دوسری سرخی دونوں کلاسوں کے انداز کو استعمال کرے گی: ' سرخی 'اور' لائن کلاس:
لائن {رنگ: آر جی بی ( 255 ، 0 ، 0 ) ;
text-decoration-line: underline;
}
عمل درآمد کے بعد، نتیجہ چیک کریں:
آؤٹ پٹ سے، آپ دیکھ سکتے ہیں کہ دوسری سرخی دونوں سی ایس ایس کلاسز کو استعمال کرتی ہے۔
نتیجہ
ایک عنصر پر متعدد کلاسز استعمال کرنے کے لیے، سفید خالی جگہوں سے الگ الگ کلاس آئی ڈی استعمال کریں۔ اس کا استعمال کرتے ہوئے، ہم ایک ہی وقت میں مختلف CSS خصوصیات کو لاگو کر سکتے ہیں۔ یہ ہمیں اس کلاس کو دوبارہ استعمال کرنے کی اجازت دیتا ہے جہاں ایک جیسے عناصر موجود ہیں۔ اس مضمون میں وضاحت کی گئی ہے کہ ایک عنصر میں متعدد کلاسوں کو کیسے استعمال کیا جائے اور اسے مثال کے ساتھ اسٹائل کیا جائے۔