Css چیست ؟

روی‌انداز آبشاری سَبْک یا سی‌اس‌اس (Cascading Style Sheets – CSS) زبانی‌ست که از آن به منظور اعمال فرمت، سبک نمایش، و نحوه ارائه مستند‌های نوشته‌شده به زبان‌های نشانه‌گذاری استفاده به عمل می‌آید. بیشترین استفاده‌ای که از این زبان در حال حاضر می‌شود مشخص کردن سبک صفحه وب DHTML و XHTML است ولی آن را می‌توان بر هر نوع مستند XML از جمله SVG و XUL اعمال کرد. نگهداری و تغییر مشخصات سی‌اس‌اس به عهده کنسرسیوم وب جهانگستر است.
چگونه css بنویسیم ؟

هر سبک css دارای دو بخش است . بخش اول نام گزینشگرها (selectors) که همان برچسب‌هایی هستند که سبک مورد نظر شما باید به آنها اعمال شود.

مثال:

/* (…) */
h1 { color : red;}
/* (…) */

در این دستور ، h1 گزینشگر است که سبک ما به آنها اعمال می‌شود .

بخش دوم خصوصیات (properties) که مشخص می‌کند که چه سبکی باید به برچسب انتخاب شده اعمال گردد .

مثال :

/* (…) */
h1 { color : red;}
/* (…) */

در این دستور red همان خصوصیات است که به سبک اعمال شده بر color داده می‌شود.
انواع گزینشگر

گزینشگرهای کلاس کاذب (Pseudo-Class Selectors)

برچسب a در HTML نسبت به بقیه از تنوع بیشتری برخوردار است . با تعیین خصوصیات Link , Vlink , Alink در body می‌توانید رنگ لینک‌های خود را تغییر دهید.

مثال :

/* (…) */
a:link { color : #0000ff; }
a:visited  { color : #FF00FF; }
a:hover { color : #00ccff;}
a:active { color : #FF0000; }
/* (…) */

گزینشگرهای کلاس (Class Selectors)

اختصاص دادن سبک‌ها به برچسب‌های HTML بسیار خوب است ولی چه اتفاقی خواهد افتاد اگر شما بخواهید سبک دیگری را به دو برچسب همسان اختصاص دهید ؟ در این زمان برچسب‌های css وارد عمل می‌شوند.

مثال : این تعریف سبک باعث می‌شود که تمامی متون پاراگراف‌های داخلی سند به رنگ آبی نمایش یابد :

/* (…) */
P {  color : #0000ff; }
/* (…) */

حال اگر شما بخواهید سطری را به رنگی متمایز نمایش دهید باید به آن یک کلاس اختصاص دهید.

برای مثال کلاس slidebar را اختصاص می‌دهیم.

/* (…) */
P { color : # 0000ff; }
>.slidebar  { color : #ffffff; }
/* (…) */

نحوه استفاده در برچسب HTML :

/* (…) */
class=”slidebar”>Mambo Is The Best CMS
/* (…) */

گزینشگرهای مفهومی (Contextual Selectors)

اگر بخواهید لینک‌های ستون کناری سایت شما که در کلاس slidebar قرار می‌گیرند به رنگ متمایز از متن نمایش داده شوند باید از گزینشگرهای مفهومی استفاده نماییم.

مثال :

/* (…) */
P { color : #0000ff; }
.slidebar { color : #ffffff; }
p.slidebar  a:link,  p.slidebar  a:visited {  color : #ffffff; }
/* (…) */

نحوه‌ی استفاده در برچسب HTML :

/* (…) */
class=”slidebar”>Mambo Is The Best CMS <a href=”www.mambolearn.com”>,Download Here</a>
/* (…) */

گزینشگرهای خصوصی(ID Selectors)

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

/* (…) */
id=”slidebar1″Mambo Is The Best CMS
/* (…) */

یک گزینشگر خصوصی به دلیل دارا بودن علامت # در آغاز ، به راحتی قابل داخل کد css قابل شناسایی است.

مثال :

/* (…) */
#slidebar1 { color : #ffffff; }
/* (…) */