CSS

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  :

<p class="slidebar">Mambo Is The Best CMS</p>

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

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

P { color : #0000ff; }

.slidebar { color : #ffffff; }

p.slidebar a:link, p.slidebar a:visited { color : #ffffff; }

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

<p class="slidebar">Mambo Is The Best CMS <a href="www.mambolearn.com">,Download Here</a></p>

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

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

<p id="slidebar1">Mambo Is The Best CMS</p>

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

#slidebar1 { color : #ffffff; }

منبع : learning how to create web pages with css