CSS کلاس چناؤ کئے وار کی تفصیلات

کلاس چناؤ دستاویز عناصر سے مستقل طور پر استیل کا انداز مقرر کرنے کے لئے اجازت دیتا ہے。

CSS کلاس چناؤ کئے وار

کلاس چناؤ دستاویز عناصر سے مستقل طور پر استیل کا انداز مقرر کرنے کے لئے اجازت دیتا ہے。

اس چناؤ کو تنہاً استعمال کیا جاسکتا ہے، یا دیگر عناصر کے ساتھ استعمال کیا جاسکتا ہے。

تذکرہ:یہ چناؤ استعمال کرنے کے لئے دستاویز کو صحیح طور پر نشان دہ کرنا ضروری ہوتا ہے، لہذا ان دونوں چناؤ استعمال کا استعمال کرنے کے لئے اکثر پہلے کچھ منصوبہ بندی کرنا چاہئیے。

استیل کا استعمال بغیر کسی مخصوص ڈیزائن عناصر کا، سب سے عام طور سے استعمال ہونے والا طریقہ کلاس چناؤ استعمال کرنا ہے。

HTML کد کو ترمیم کرنا

کلاس چناؤ استعمال سے پہلے، مخصوص دستاویز نمائش کو ترمیم کرنا چاہئیے تاکہ کلاس چناؤ سے صحیح طور پر کام کرسکے。

کلاس چناؤ کی کسٹم کا انداز عناصر سے مربوط کرنے کے لئے، کلاس کو ایک مناسب کمائی جانا چاہئیے۔ دیکھ نیچے کا HTML کد:

<h1 class="important">
این عنوان بہت اہم ہے。
</h1>
<p class="important">
این پاراگراف بہت اہم ہے。
</p>

在上面 کد میں، دو عناصر کی کلاس بھی important: پہلا عنوان (h1 عنصر)، دوسرے پاراگراف (p عنصر)。

ਗਰੰਟੀ

ਤਦ ਅਸੀਂ ਇਨ੍ਹਾਂ ਵਰਗਾਂ ਵਾਲੇ ਤੱਤਾਂ ਨੂੰ ਸਟਾਈਲ ਲਾਗੂ ਕਰਨ ਲਈ ਨਿਮਨਲਿਖਤ ਗਰੰਟੀ ਵਰਤੀਆਂ, ਯਾਨੀ ਕਲਾਸ ਨਾਮ ਦੇ ਪਹਿਲੇ ਦੇਹਰੀ ਦਾ ਉਪਯੋਗ ਕੀਤਾ ਜਾਂਦਾ ਹੈ, ਫਿਰ ਗਲਤੀ ਚੋਣਕਰਤਾ ਨਾਲ ਮਿਲਾਇਆ ਜਾਂਦਾ ਹੈ:

*.important {color:red;}

ਤੁਸੀਂ ਸਿਰਫ ਇੱਕ ਹੀ ਕਲਾਸ ਦੇ ਤੱਤਾਂ ਨੂੰ ਚੋਣਣਾ ਚਾਹੁੰਦੇ ਹੋ ਤਾਂ, ਵਰਗ ਚੋਣਕਰਤਾ ਵਿੱਚ ਗਲਤੀ ਚੋਣਕਰਤਾ ਨੂੰ ਨਾ ਲਗਾਓ, ਇਸ ਦਾ ਕੋਈ ਦੁਸ਼ਮਣ ਪ੍ਰਭਾਵ ਨਹੀਂ ਹੈ:

.important {color:red;}

آپ خود سجاوٹ کریں

ਮਿਲਾਕੇ ਤੱਤ ਚੋਣਕਰਤਾ

ਵਰਗ ਚੋਣਕਰਤਾ ਤੱਤ ਚੋਣਕਰਤਾ ਦੇ ਨਾਲ ਮਿਲਾਕੇ ਵਰਤ ਸਕਦੇ ਹਾਂ.

ਉਦਾਹਰਣ ਵਜੋਂ, ਤੁਸੀਂ ਸਿਰਫ ਪੈਰਾਗ੍ਰਾਫਸ ਨੂੰ ਲਾਲ ਲਿਖਤ ਵਿੱਚ ਦਿਖਾਉਣਾ ਚਾਹੁੰਦੇ ਹੋ:

p.important {color:red;}

ਚੋਣਕਰਤਾ ਹੁਣ class ਪ੍ਰਤੀਯੋਗਤਾ ਵਾਲੇ important ਸਾਰੇ p ਤੱਤਾਂ ਨੂੰ ਮੈਚ ਕਰੇਗੀ, ਲੇਕਿਨ ਕੋਈ ਵੀ ਹੋਰ ਤੱਤ ਨਹੀਂ ਮੈਚ ਕਰੇਗੀ, ਚਾਹੇ ਉਹ ਇਹ class ਪ੍ਰਤੀਯੋਗਤਾ ਰੱਖਦਾ ਹੋਵੇ ਜਾਂ ਨਹੀਂ . ਚੋਣਕਰਤਾ p.important ਨੂੰ ਇਹ ਮਤਲਬ ਦੇਣਾ ਹੈ: "ਜਿਸ ਦੀ class ਪ੍ਰਤੀਯੋਗਤਾ important ਹੈ ਸਾਰੇ ਪੈਰਾਗ੍ਰਾਫਸ" . ਕਿਉਂਕਿ h1 ਤੱਤ ਪੈਰਾਗ੍ਰਾਫ ਨਹੀਂ ਹੈ, ਇਸ ਨੂੰ ਮੈਚ ਨਹੀਂ ਕੀਤਾ ਜਾਵੇਗਾ, ਇਸ ਲਈ h1 ਤੱਤ ਲਾਲ ਲਿਖਤ ਨਹੀਂ ਬਣੇਗਾ .

ਤੁਸੀਂ ਵਾਕਿਫ਼ ਹੋ ਸਕਦੇ ਹੋ ਕਿ h1 ਤੱਤ ਲਈ ਵੱਖਰੀ ਸਟਾਈਲ ਦੇਣਾ ਚਾਹੁੰਦੇ ਹੋ, ਤਾਂ ਚੋਣਕਰਤਾ h1.important ਦਾ ਉਪਯੋਗ ਕਰ ਸਕਦੇ ਹੋ:

p.important {color:red;}
h1.important {color:blue;}

آپ خود سجاوٹ کریں

CSS ਮਲਟੀ ਵਰਗ ਚੋਣਕਰਤਾ

ਪਿਛਲੇ ਪੜਾਅ ਵਿੱਚ, ਅਸੀਂ class ਕੀਮਤ ਵਿੱਚ ਇੱਕ ਸ਼ਬਦ ਦਾ ਸਮਾਧਾਨ ਕੀਤਾ. ਐੱਚਟੀਐੱਮਐੱਲ ਵਿੱਚ, class ਕੀਮਤ ਵਿੱਚ ਇੱਕ ਸ਼ਬਦ ਸੂਚੀ ਹੋ ਸਕਦੀ ਹੈ, ਜਿਸ ਵਿੱਚ ਸ਼ਬਦਾਂ ਨੂੰ ਸਪੇਸ ਨਾਲ ਵੰਡਿਆ ਹੋਇਆ ਹੁੰਦਾ ਹੈ. ਉਦਾਹਰਣ ਵਜੋਂ, ਜੇਕਰ ਤੁਸੀਂ ਇੱਕ ਵਿਸ਼ੇਸ਼ ਤੱਤ ਦਾ ਇੱਕ ਹੀ ਕਲਾਸ ਦੇ ਰੂਪ ਵਿੱਚ ਮਹੱਤਵਪੂਰਨ ਅਤੇ ਚਿਤਾਵਨੀ ਦੇ ਰੂਪ ਵਿੱਚ ਲੈਣਾ ਚਾਹੁੰਦੇ ਹੋ, ਤਾਂ ਇਹ ਲਿਖਿਆ ਜਾ ਸਕਦਾ ਹੈ:

<p class="important warning">
This paragraph is a very important warning.
</p>

ਇਨ੍ਹਾਂ ਦੋਹਾਂ ਦੇ ਕਿਸਮ ਨਾਲ ਕੋਈ ਮਹੱਤਵ ਨਹੀਂ ਹੈ, ਲਿਖਿਆ ਜਾ ਸਕਦਾ ਹੈ warning important ਵੀ .

ਅਸੀਂ ਇਹ ਮੰਨਦੇ ਹਾਂ ਕਿ class ਵਾਲੇ important ਸਾਰੇ ਤੱਤ ਮੈਂਡਲੀ ਹਨ, ਜਦਕਿ class ਵਾਲੇ warning ਸਾਰੇ ਤੱਤ ਇਟਾਲਿਕ ਹਨ, ਜਿਸ ਵਿੱਚ important ਅਤੇ warning ਦੋਵੇਂ ਹੋਣ ਤਾਂ ਇਕ ਚਾਂਦੀ ਕਿਰਨ ਵਾਲਾ ਪਿੱਟਾ ਹੁੰਦਾ ਹੈ . ਇਹ ਲਿਖਿਆ ਜਾ ਸਕਦਾ ਹੈ :

.important {font-weight:bold;}
.warning {font-style:italic;}
.important.warning {background:silver;}

آپ خود سجاوٹ کریں

ਦੋ ਵਰਗ ਚੋਣਕਰਤਾਵਾਂ ਨੂੰ ਜੋੜ ਕੇ ਸਿਰਫ ਚੋਣ ਕਰ ਸਕਦੇ ਹਾਂ同时包含这些类名的元素（类名的顺序不限）。

如果一个多类选择器包含类名列表中没有的一个类名，匹配就会失败。请看下面的规则：

.important.urgent {background:silver;}

不出所料，这个选择器将只匹配 class 属性中包含词 important 和 urgent 的 p 元素。因此，如果一个 p 元素的 class 属性中只有词 important 和 warning，将不能匹配。不过，它能匹配以下元素：

<p class="important urgent warning">
یہ پیراگراف بہت اہم اور فوری وارننگ ہے.
</p>

آپ خود سجاوٹ کریں

کوئی بات:ایک بات: ایک بات، قبل از IE7 کی ورژن میں، مختلف پلیٹ فارموں کا انٹرنیٹ ایکسپلورر نہیں صحیح طریقے سے متعدد کلاس چناؤ کئے وار کو ہنر مند بنایا سکتا ہے。