سی ایس ایل انتخاب گر گروپ

ਚੋਣਕਰਤਾ ਗਰੁੱਪ

ਇਹ ਮੰਨਿਆ ਹੈ ਕਿ h2 ਐਲੀਮੈਂਟ ਅਤੇ ਪੈਰਾਗ੍ਰਾਫ ਨੂੰ ਗ੍ਰੇ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ। ਇਸ ਉਦੇਸ਼ ਲਈ ਸਭ ਤੋਂ ਅਸਾਨ ਤਰੀਕਾ ਹੈ ਕਿ ਹੇਠ ਲਿਖੇ ਐਲਾਨ ਦਾ ਉਪਯੋਗ ਕਰਨਾ:

h2, p {color:gray;}

h2 ਅਤੇ p ਚੋਣਕਰਤਾ ਨੂੰ ਨਿਯਮ ਦੇ ਖੱਬੇ ਪਾਸੇ ਰੱਖੋ, ਫਿਰ ਕੋਮਾ ਨਾਲ ਵੰਡੋ, ਇਸ ਤਰ੍ਹਾਂ ਇੱਕ ਨਿਯਮ ਨਿਰਮਿਤ ਹੁੰਦਾ ਹੈ। ਇਸ ਦੇ ਦੱਖਣ ਪਾਸੇ ਦਾ ਸਟਾਈਲ (color:gray;) ਇਨ੍ਹਾਂ ਚੋਣਕਰਤਾਵਾਂ ਦੇ ਸਬੰਧਤ ਐਲੀਮੈਂਟਾਂ 'ਤੇ ਲਾਗੂ ਹੋਵੇਗਾ। ਕੋਮਾ ਬਰਾਉਜ਼ਰ ਨੂੰ ਸੂਚਿਤ ਕਰਦਾ ਹੈ ਕਿ ਨਿਯਮ ਵਿੱਚ ਦੋ ਵੱਖ-ਵੱਖ ਚੋਣਕਰਤਾ ਹਨ। ਅਗਰ ਇਹ ਕੋਮਾ ਨਹੀਂ ਹੋਵੇ, ਤਾਂ ਨਿਯਮ ਦਾ ਮਤਲਬ ਪੂਰੀ ਤਰ੍ਹਾਂ ਵੱਖਰਾ ਹੋਵੇਗਾ। ਉਪਨਾਡੀ ਚੋਣਕਰਤਾ ਦੇ ਲਈ ਦੇਖੋ。

可以将任意多个选择器分组在一起，对此没有任何限制。

例如，如果您想把很多元素显示为灰色，可以使用类似如下的规则：

body, h2, p, table, th, td, pre, strong, em {color:gray;}

شبہ:通过分组，创作者可以将某些类型的样式“压缩”在一起，这样就可以得到更简洁的样式表。

以下的两组规则能得到同样的结果，不过可以很清楚地看出哪一个写起来更容易：

/* no grouping */
h1 {color:blue;}
h2 {color:blue;}
h3 {color:blue;}
h4 {color:blue;}
h5 {color:blue;}
h6 {color:blue;}
/* grouping */
h1, h2, h3, h4, h5, h6 {color:blue;}

آپ خود کوشش کریئن

分组提供了一些有意思的选择。例如，下例中的所有规则分组都是等价的，每个组只是展示了对选择器和声明分组的不同方法：

/* group 1 */
h1 {color:silver; background:white;}
h2 {color:silver; background:gray;}
h3 {color:white; background:gray;}
h4 {color:silver; background:white;}
b {color:gray; background:white;}
/* group 2 */
h1, h2, h4 {color:silver;}
h2, h3 {background:gray;}
h1, h4, b {background:white;}
h3 {color:white;}
b {color:gray;}
/* group 3 */
h1, h4 {color:silver; background:white;}
h2 {color:silver;}
h3 {color:white;}
h2, h3 {background:gray;}
b {color:gray; background:white;}

亲自试一试：

请注意，group 3 中使用了“声明分组”。稍后我们会为您介绍“声明分组”。

通配符选择器

CSS2 引入了一种新的简单选择器 - 通配选择器（universal selector），显示为一个星号（*）。该选择器可以与任何元素匹配，就像是一个通配符。

ਉਦਾਹਰਣ ਵਜੋਂ, ਨਿਮਨਲਿਖਤ ਨਿਯਮ ਸਾਰੇ ਐਲੀਮੈਂਟਾਂ ਨੂੰ ਲਾਲ ਕਰ ਦੇਣਾ ਹੈ:

* {color:red;}

آپ خود کوشش کریئن

ਇਹ ਐਲਾਨਾ ਸਾਰੇ ਦਸਤਾਵੇਜ਼ ਦੇ ਐਲੀਮੈਂਟਾਂ ਦੇ ਇੱਕ ਗਰੁੱਪ ਚੋਣਕਰਤਾ ਦੇ ਬਰਾਬਰ ਹੈ। ਪਰਿਵਰਤਕ ਚੋਣਕਰਤਾ ਦੀ ਵਰਤੋਂ ਨਾਲ, ਕੇਵਲ ਇੱਕ ਬਟਨ ਦਬਾਉਣ ਨਾਲ ਸਾਰੇ ਐਲੀਮੈਂਟਾਂ ਦੇ color ਪ੍ਰਾਪਰਟੀ ਦਾ ਮੁੱਲ red ਬਣਾਇਆ ਜਾ ਸਕਦਾ ਹੈ。

ਐਲਾਨਾ ਗਰੁੱਪਿਕਰਨ

ਅਸੀਂ ਨਾ ਕੇਵਲ ਚੋਣਕਰਤਾ ਨੂੰ ਜੋੜ ਸਕਦੇ ਹਾਂ, ਬਲਕਿ ਐਲਾਨਾ ਵੀ ਜੋੜ ਸਕਦੇ ਹਾਂ。

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

h1 {font: 28px Verdana;}
h1 {color: blue;}
h1 {background: red;}

ਪਰ ਉੱਪਰੋਕਤ ਪ੍ਰਕਿਰਿਆ ਦੀ ਪ੍ਰਭਾਵਸ਼ਾਲੀ ਹੈ ਨਹੀਂ। ਖਾਸ ਤੌਰ 'ਤੇ ਜਦੋਂ ਇੱਕ ਅਜਿਹੀ ਸੂਚੀ ਬਣਾਉਣੀ ਹੈ ਜਿਸ ਵਿੱਚ ਕਈ ਸਟਾਈਲ ਹਨ, ਤਾਂ ਇਹ ਬਹੁਤ ਮਿਸਾਲੀ ਹੁੰਦਾ ਹੈ। ਇਸ ਤਰ੍ਹਾਂ, ਐਲਾਨਾਵਾਂ ਨੂੰ ਜੋੜ ਸਕਦੇ ਹਾਂ:

h1 {font: 28px Verdana; color: white; background: black;}

ਇਹ ਪਹਿਲਾਂ ਦੇ 3 ਲਾਈਨਾਂ ਵਾਲੇ ਸਟਾਈਲ ਸ਼ੇਅਰ ਦੇ ਪ੍ਰਭਾਵ ਨਾਲ ਇੱਕ ਸਮਾਨ ਹੈ。

ਧਿਆਨ ਰੱਖੋ, ਐਲਾਨਾਵਾਂ ਦੀ ਗਰੁੱਪਿਕਰਨ ਕਰਨ ਲਈ, ਹਰ ਐਲਾਨਾ ਦੇ ਅੰਤ ਵਿੱਚ ਸੇਕਸ; ਦਾ ਉਪਯੋਗ ਕਰਨਾ ਬਹੁਤ ਮਹੱਤਵਪੂਰਨ ਹੈ। ਬਰਾਉਜ਼ਰ ਸਟਾਈਲ ਸ਼ੇਅਰ ਵਿੱਚ ਖਾਲੀ ਅੱਖਰਾਂ ਨੂੰ ਨਜ਼ਰ ਅੰਦਾਜ਼ ਕਰਦਾ ਹੈ। ਸੇਕਸ; ਨਾਲ ਜੋੜੇ ਜਾਣ ਤੋਂ ਬਾਅਦ, ਨਿਸ਼ਚਿਤ ਰੂਪ ਨਾਲ ਨਿਮਨਲਿਖਤ ਫਾਰਮੈਟ ਦੀ ਵਰਤੋਂ ਕਰ ਸਕਦੇ ਹਾਂ:

h1 {
  font: 28px Verdana;
  color: blue;
  background: red;
  }

آپ خود کوشش کریئن

ਕੀ, ਉੱਪਰੋਕਤ ਲਿਖਤ ਦੀ ਪੜ੍ਹਣ ਦੀ ਸੁਗਮਤਾ ਵਧੀ ਹੈ ਨਾ?

ਪਰ ਜੇਕਰ ਦੂਜੀ ਸੇਕਸ; ਨੂੰ ਨਜ਼ਰ ਅੰਦਾਜ਼ ਕੀਤਾ ਜਾਵੇ, ਤਾਂ ਯੂਜ਼ਰ ਏਜੰਟ ਇਹ ਸਟਾਈਲ ਸ਼ੇਅਰ ਇਸ ਤਰ੍ਹਾਂ ਵਿੱਚ ਵਿਆਖਿਆ ਕਰ ਦਿੰਦਾ ਹੈ:

h1 {
  font: 28px Verdana;
  color: blue background: red;
  }

آپ خود کوشش کریئن

ਕਿਉਂਕਿ background color ਲਈ ਇੱਕ ਲਾਜਿਕਲ ਮੁੱਲ ਨਹੀਂ ਹੈ, ਅਤੇ color ਨੂੰ ਇੱਕ ਕੀਵਰਡ ਨਾਲ ਹੀ ਸੰਕੇਤ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ, ਇਸ ਲਈ ਯੂਜ਼ਰ ਏਜੰਟ ਇਹ color ਐਲਾਨਾ ਪੂਰੀ ਤਰ੍ਹਾਂ ਨਾਲ ਨਜ਼ਰਅੰਦਾਜ਼ ਕਰ ਦਿੰਦਾ ਹੈ (ਬਾਕੀ background: black ਹਿੱਸੇ ਨੂੰ ਵੀ ਸ਼ਾਮਲ ਕਰਕੇ)। ਇਸ ਤਰ੍ਹਾਂ h1 ਟਾਈਟਲ ਕੇਵਲ ਨੀਲੇ ਰੰਗ ਵਿੱਚ ਦਿਖਾਇਆ ਜਾਵੇਗਾ, ਨਾ ਕਿ ਲਾਲ ਪਿੱਟੜੀ ਵਿੱਚ, ਪਰ ਹੋਰ ਜ਼ਿਆਦਾ ਸੰਭਾਵਨਾ ਇਹ ਹੈ ਕਿ h1 ਕੇਵਲ ਨੀਲੇ ਰੰਗ ਵਿੱਚ ਨਹੀਂ ਦਿਖਾਇਆ ਜਾਵੇ। ਇਸ ਤਰ੍ਹਾਂ ਇਹ ਟਾਈਟਲ ਕੇਵਲ ਮੂਲਤਬੀ ਰੰਗ (ਜਿਵੇਂ ਕਿ ਕਾਲਾ) ਵਿੱਚ ਦਿਖਾਇਆ ਜਾਵੇਗਾ, ਅਤੇ ਕੋਈ ਪਿੱਟੜੀ ਰੰਗ ਨਹੀਂ ਹੋਵੇਗਾ। font: 28px Verdana ਐਲਾਨਾ ਅਜਿਹਾ ਕੰਮ ਕਰਦਾ ਹੈ, ਕਿਉਂਕਿ ਇਹ ਇੱਕ ਸੇਕਸ; ਨਾਲ ਸਹੀ ਤਰ੍ਹਾਂ ਸਮਾਪਤ ਹੁੰਦਾ ਹੈ。

انتخاب گر گروپ کی طرح، دعوی کی گروپ بھی ایک آسان طریقہ ہے جو سائٹ بیل میں فاصلے کو کم کرتا ہے، اس کو صاف اور آسان رکھتا ہے، اور اس کو برقرار رکھنا آسان ہوتا ہے。

شبہ:قاعدوں کے آخری دعوی کے بعد بھی نیم کو جوڑنا اچھی عادت ہے، جب آپ کو کوئی اور دعوی اضافہ کرنا ہو، تو آپ کو نیم کو جوڑنا ناگزیر نہیں ہوگا。

شبہ: انتخاب گر گروپ کی طرح، دعوی کی گروپ بھی ایک آسان طریقہ ہے جو سائٹ بیل میں فاصلے کو کم کرتا ہے، اس کو صاف اور آسان رکھتا ہے، اور اس کو برقرار رکھنا آسان ہوتا ہے。

ماں بول سکتا ہو کہ ما کسی قاعدے میں انتخاب گر گروپ اور دعوی کی گروپ کا ترکیب کر سکتا ہو تاکہ کم سے کم جملوں کے ذریعے کافی پیچیدہ انداز طے کیا جاسکے。

ایسا قاعدہ تمام کپچیوں کا ایک پیچیدہ انداز طے کرتا ہے:

ه1، ه2، ه3، ه4، ه5، ه6 {
  رنگ: گرائی;
  بیک گراؤنڈ: وہرے;
  پیدھینگ: 10 پیکسلس;
  بوردر: 1 پیکسلس سولڈ بلک;
  فونٹ فیملی: وردنا;
  }

آپ خود کوشش کریئن

اس قاعدے کے ذریعے تمام کپچی کا انداز بلاک کا چمگادڑ، بجلی سورج کا رنگ کا متن، داخلی فاصلہ 10 پیکسلس، 1 پیکسلس کا چمگادڑ، متن کا فونٹ وردنہ