گروه‌بندی انتخاب‌گرها

گروه‌بندی انتخابگر

فرض کنید می‌خواهید عناصر h2 و پاراگراف‌ها خاکستری باشند. برای این منظور، آسان‌ترین راه استفاده از این بیان است:

h2, p {color:gray;}

h2 و p انتخابگرها را در سمت چپ قوانین قرار دهید، سپس از کاما جدا کنید، این یک قوانین تعریف شده است. استایل سمت راست (color:gray;) به عناصر مرتبط با این انتخابگرها اعمال می‌شود. کاما به مرورگر می‌گوید که قوانین شامل دو انتخابگر متفاوت است. اگر این کاما نبود، معنای قوانین کاملاً متفاوت بود. به انتخابگرهای فرزند مراجعه کنید.

می‌توان هر تعداد انتخابگر را در یک گروه‌بندی قرار داد و هیچ محدودیتی در این زمینه وجود ندارد.

برای مثال، اگر بخواهید بسیاری از عناصر را به رنگ خاکستری نمایش دهید، می‌توانید از قوانین مشابه زیر استفاده کنید:

body, h2, p, table, th, td, pre, strong, em {رنگ:خاکستری;}

توضیح:با گروه‌بندی، سازنده می‌تواند برخی از نوع‌های استایل را در کنار هم 'فشرده‌سازی' کند، به این ترتیب می‌توان یک جدول استایل ساده‌تر به دست آورد.

دو گروه‌بندی زیر می‌توانند نتایج مشابهی ارائه دهند، اما می‌توان به وضوح دید که کدام یک آسان‌تر است:

/* no grouping */
h1 {رنگ:آبی;}
h2 {رنگ:آبی;}
h3 {رنگ:آبی;}
h4 {رنگ:آبی;}
h5 {رنگ:آبی;}
h6 {رنگ:آبی;}
/* grouping */
h1, h2, h3, h4, h5, h6 {رنگ:آبی;}

آزمایش کنید

گروه‌بندی ارائه了一些 interesting choices. برای مثال، همه‌ی قوانین گروه‌بندی در این مثال برابر هستند، هر گروه فقط یک روش مختلف برای نمایش انتخابگر و گروه‌بندی استاتیک را نشان می‌دهد:

/* گروه 1 */
h1 {رنگ:نقره‌ای; پس‌زمینه:سفید;}
h2 {رنگ:نقره‌ای; پس‌زمینه:خاکستری;}
h3 {رنگ:سفید; پس‌زمینه:خاکستری;}
h4 {رنگ:نقره‌ای; پس‌زمینه:سفید;}
b {رنگ:خاکستری; پس‌زمینه:سفید;}
/* گروه 2 */
h1, h2, h4 {رنگ:نقره‌ای;}
h2, h3 {پس‌زمینه:خاکستری;}
h1, h4, b {پس‌زمینه:سفید;}
h3 {رنگ:سفید;}
b {رنگ:خاکستری;}
/* گروه 3 */
h1, h4 {رنگ:نقره‌ای; پس‌زمینه:سفید;}
h2 {رنگ:نقره‌ای;}
h3 {رنگ:سفید;}
h2, h3 {پس‌زمینه:خاکستری;}
b {رنگ:خاکستری; پس‌زمینه:سفید;}

آزمایش کنید:

لطفاً توجه داشته باشید که در گروه 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 را کاملاً نادیده می‌گیرد (درcluding background: black). به این ترتیب، عنوان h1 فقط به رنگ آبی نمایش داده می‌شود، بدون پس‌زمینه قرمز، و احتمالاً حتی ممکن است عنوان h1 به رنگ آبی هم نمایش داده نشود. در عوض، این عناوین فقط به رنگ پیش‌فرض (معمولاً سیاه) نمایش داده می‌شوند و هیچ پس‌زمینه‌ای ندارند. بیان font: 28px Verdana همچنان به درستی عمل می‌کند، زیرا با یک نقطه و逗ه درست به پایان می‌رسد.

مانند گروه‌بندی انتخاب‌گرها، گروه‌بندی توصیف‌ها نیز یک روش راحت است که می‌تواند جدول استایل‌ها را کوتاه کند و آن را شفاف‌تر و قابل نگهداری‌تر کند.

توضیح:اضافه کردن یک نقطه واریز در پایان آخرین توصیف در یک قانون یک عادت خوب است. در اضافه کردن یک توصیف دیگر به قانون، لازم نیست نگران فراموش کردن یک نقطه واریز باشید.

گروه‌بندی انتخاب‌گرها و توصیف‌ها

ما می‌توانیم با ترکیب گروه‌بندی انتخاب‌گرها و گروه‌بندی توصیف‌ها، در یک قانون، از تعداد کمتری عبارت برای تعریف استایل‌های پیچیده استفاده کنیم.

این قانون برای تمام عناوین یک استایل پیچیده‌ای تعیین می‌کند:

h1, h2, h3, h4, h5, h6 {
  color:gray;
  background: white;
  padding: 10px;
  border: 1px solid black;
  font-family: Verdana;
  }

آزمایش کنید

این قانون تمام استایل‌های عناوین را به متنی خاکستری با پس‌زمینه سفید تعریف می‌کند، که پد درون آن 10 پیکسله است و دارای کناره‌های 1 پیکسله سخت است، و فونت متن Verdana است.