آموزش سلکتور کلاس(class) در CSS

یکی از بهترین راه ها برای اعمال استایل ها، استفاده از سلکتور کلاس(class) است. اولین گام این است که از خصوصیت class در کدهایی که می خواهیم مورد تطابق قرار بگیرند استفاده کنیم، مانند زیر:

<p class="warning">آموزش زبان برنامه نویسی سی اس اس</p>
<p>صفحات اچ تی ام ال به تنهایی زیبایی خاصی ندارند
 <span class="warning">اما با استفاده از سی اس اس می توانیم </span>جلوه های زیبایی به سایت خود بدهیم</p>

 برای مرتبط کرده و پیوند دادن استایل های یک سلکتور کلاس(class) به یک عنصر، ما باید یک خصوصیت class را در داخل آن عنصر بنویسیم . در کدهای بالا، یک خصوصیت calss با مقدار warning به دو عنصر داده شده است. ابتدا به یک پاراگراف و سپس به یک عنصر <span> که در داخل پاراگراف دوم قرار دارد. تنها کاری که اکنون باید انجام دهیم، این است که استایل های خود را به این عناصر که به آنها خصوصیت class داده ایم، وصل کنیم. در سندهای HTML، ما می توانیم از یک روش جمع و جور برای این کار استفاده کنیم. در کدهای CSS روش به این صورت است که ابتدا یک نقطه(.) می گذاریم و سپس از نام کلاس، که در اینجا warnning است، در CSS استفاده می کنیم:

.warning {font-weight: bold;}

وقتی که از کدهای بالا و از این کد CSS در کنار یکدیگر استفاده کنیم، نتیجه به صورت تصویر 2.6 خواهد بود. به این معنا که اعلان font-weight: bold به هر عنصری که خصوصیت class آن حاوی مقدار warning باشد، اعمال می شود.

(تصویر 2.6)

 همان طور که مشاهده می کنید، سلکتور کلاس، به یک نام  که در داخل خصوصیت class از یک عنصر قرار گرفته است، رجوع می کند. یعنی در کدهای CSS ابتدا یک نقطه(.) قرار می دهیم و سپس یک نام برای کلاس خود مثل warning یا غیره انتخاب می کنیم. این نقطه کمک می کند تا سلکتور کلاس، از دیگر چیزها متمایز شود.  بعنوان مثال، ممکن است بخواهیم وقتی که یک پاراگراف، یک هشدار را تشکیل می دهد، متن آن را پررنگ(bold) کنیم؛ به صورت زیر عمل می کنیم:

p.warning {font-weight: bold;}

در سلکتور بالا، هر عنصر p که از  کلمه ی warning در خصوصیت class خود استفاده کرده باشد، مورد تطابق قرار می گیرد. (دقت کنید، در اینجا فقط پاراگراف ها را مورد تطابق قرار می دهیم نه دیگر عناصر).  چون که عنصر <span> یک پاراگراف نیست، سلکتور بالا نمی تواند آن را مورد تطابق قرار دهد و متن آن به صورت پررنگ(bold) در نمی آید. اگر می خواهید استایل های متفاوتی را به عنصر <span> انتساب دهید، می توانید از سلکتور span.warning استفاده کنید:

p.warning {font-weight: bold;}
span.warning {font-style: italic;}

 ابتدا پاراگراف هایی که از کلاس warning استفاده می کنند، مورد تطابق قرار می گیرند و به صورت bold نشان داده می شوند. سپس متنی که در داخل عنصر <span> قرار دارد و از کلمه warning در داخل کلاس خود استفاده می کند، به صورت کج شده(italic) نشان داده می شود؛ یک گزینه ی دیگر این است که از ترکیب یک سلکتور کلاس  و یک سلکتور خاص عنصر، برای استفاده ی بهتر از استایل ها استفاده کنیم:

.warning {font-style: italic;}
span.warning {font-weight: bold;}

(تصویر 2.7)

 در این صورت، تمام متن هایی که از کلاس warning استفاده می کنند، به صورت ایتالیک در می آیند اما فقط متنی که در داخل یک عنصر <span> قرار دارد و از کلاس warning استفاده می کند، هم به صورت bold نشان داده می شود و هم به صورت ایتالیک نشان داده می شود و هم به رنگ قرمز نشان داده می شوند. در مثال بالا، به فرمت سلکتور کلاس توجه کنید: قبل از نام این کلاس، از یک نقطه استفاده شده است و از هیچ نام عنصر دیگری و از سلکتور سراسری در کنار آن استفاده نشده است. اما در خط شماره 5، ابتدا یک سلکتور عنصر یعنی span مورد استفاده قرار گرفته است. و سپس عناصری که در آن از کلاس warning. استفاده می کنند، مورد تطابق قرار می گیرند.

 {module کمک نقدی به نویسنده}