به کارگاه ترجمه ی سینا2 خوش آمدید!

تبلیغات شما در اینجا بالا

استفاده از چند کلاس در CSS

 

در بخش قبل، ما با کلاس ها کار کردیم. کلاس هایی که حاوی یک کلمه بودند. در HTML این امکان وجود دارد تا از یک لیست، از نام کلاس ها، که با یک فاصله ی سفید از یکدیگر جدا شده اند، بعنوان مقدار برای یک class استفاده کنیم. بعنوان مثال، اگر بخواهیم یک عنصر از کلاس urgent و warning استفاده کند، می توانیم به صورت زیر عمل کنیم:

<p class="urgent warning">When handling plutonium, care must be taken to
avoid the formation of a critical mass.</p>
<p>With plutonium, <span class="warning">the possibility of implosion is
very real, and must be avoided at all costs</span>. This can be accomplished
by keeping the various masses separate.</p>

ترتیب نام کلاس ها در داخل خصوصیت calss اهمیتی ندارد. بنابراین کلاس warning urgent نیز ما را کفایت می کند و دقیقا به همان نتیجه ی قبلی می رساند؛ بدون توجه به اینکه خصوصیت class سی اس اس چگونه نوشته شده باشد.

اکنون فرض کنید می خواهیم تمام عناصری که کلاس warning دارند به صورت bold نشان داده شوند؛ و عناصری که کلاس urgent دارند به صورت italic نشان داده شوند و عناصری که از هردو مقدار استفاده می کنند، یک پس زمینه(background) به رنگ نقره ای(silver) داشته باشند؛ این کار به صورت زیر انجام می شود:

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

 با متصل کردن دو سلکتور کلاس به یکدیگر، مشاهده می کنید که عنصری انتخاب می شود که هر دوی این کلاس ها به کار می برد. و ترتیب هم اهمیتی ندارد. همان طور که در کدهای html بالایی مشاهده می کنید، عنصر p اولی، از عبارت class="urgent warning" استفاده می کند اما در کدهای CSS، سلکتور ما به صورت .warning.urgent نوشته شده است. صرف نظر از این، دستوری که نوشتیم باعث می شود که پاراگراف "When handling plutonium . . . " یک رنگ پس زمینه ی نقره ای(silver) داشته باشد، همان طور که در تصویر 2.8 نشان داده شده است. دلیل اینکه این کار به درستی انجام شده است این است که ترتیب نام کلاس ها اهمیتی ندارد. اما نمی خواهیم بگوییم که ترتیب کلاس ها همواره بی ربط است، بعداً در این کتاب به آن خواهیم پرداخت:

(تصویر 2.8)

تصویر 2.8

 اگر یک سلکتور کلاس چندگانه، حاوی یک نام باشد که با فاصله ی سفید (از بقیه) جدا نشده باشد، آنگاه تطابق ما با شکست مواجه خواهد شد. بعنوان مثال به دستور زیر توجه کنید:

p.warning.help {background: red;}

 همان طور که مشاهده می کنید، این سلکتور تنها عناصر p را مورد تطابق قرار می دهد که حاوی دو کلاس warning و help باشند. بنابراین، این سلکتور عناصر p ، با کلاس warning و urgent را مورد تطابق قرار نمی دهد. اما عنصر زیر را مورد تطابق قرار می دهد:

<p class="urgent warning help">Help me!</p>

!Donate

نوشتن دیدگاه

لطفا نظرات خود را بیان کنید. به سوالات در سریع ترین زمان پاسخ داده خواهد شد.اما به نکات زیر توجه کنید:
1. سعی کنید نظرات شما مرتبط با مقاله ی مورد نظر باشد، در غیر این صورت پاسخ داده نخواهد شد.
2. سوالات خود را به صورت کوتاه بیان کنید و از پرسیدن چند سوال به طور همزمان خودداری کنید.
3. سوال خود را به طور واضح بیان کنید و از کلمات مبهم استفاده نکنید.


تصویر امنیتی
تصویر امنیتی جدید

ستاره غیر فعالستاره غیر فعالستاره غیر فعالستاره غیر فعالستاره غیر فعال