css چیست و چگونه css بنویسیم !

[smmirheydari]

به نام خدا .
با دیدن این تایپیک تعجب کردید ، چون یک بار این موضوع رو در بخش قالب ها دیدید . ابتدا تایپیک رو اونجا قرار دادم ، چون فکر می کردم ارتباط بیشتری داره ، اما گویا جای این تایپیک اینجا بود . نه اونجا !

---------------------------------------------------------------------------------------------

مجموعه مقالات css را در این تایپیک قرار مدهم تا کمکی باشد برای بسیاری که قصد طراحی وب سایت را دارند ، ولی یا قادر نیستند و یا از روش های غیر اصولی و کلاسیک استفاده می کنند .

هر پست شامل یک فایل PDF و در صورت نیاز فایل های آماده HTML و CSS است .

---------------------------------------------------------------------------------------------

آموزش CSS - بخش اول

شامل آموزشات پایه CSS ، مناسب برای افرادی که می خواهند با CSS آشنا شوند !

لینک دانلود فایل: [مهمان/کاربر گرامی برای دیدن لینک ها ابتدا باید عضو سایت شوید و لاگین کنید برای ثبت نام اینجا کلیک کنید]

---------------------------------------------------------------------------------------------

[smmirheydari]

به نام خدا .

مقاله رو همین جا قرار دادم ، به دلیل اسرار جناب رادمهر . اگر چند تا از تگ ها ناجور هست به بزرگی خودتون ببخشید ، آخه سیستمم با مشکل داره .
----------------------------------------

آموزش css - قسمت اول - شامل مفاهیم پایه - مناسب برای افرادی که به تازگی تصمیم به آشنایی با css دارند .


----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

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

css چیست ؟
این موضوع یک بار توضیح داده شده ، با یک جستجو به راحتی پیدا می کنید ! ( می توانید کلمه css را جستجو کنید )
----------------------------------------------------------------------

چگونه css بنویسیم ؟

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

 h1 { color : red; }

در این دستور ، h1 گزینشگر است که سبک ما به آنها اعمال میشود .
بخش دوم خصوصیات ((properties که مشخص می کند که چه سبکی باید به برچسب انتخاب شده اعمال گردد .
مثال :

 h1 { color : red;}

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

انواع گزینشگر !
گزینشگر های کلاس کاذب(Pseudo-Class Selectors)
برچسب a در HTML نسبت به بقیه از تنوع بیشتری برخوردار است . با تعیین خصوصیات Link , Vlivk , 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="[مهمان/کاربر گرامی برای دیدن لینک ها ابتدا باید عضو سایت شوید و لاگین کنید برای ثبت نام اینجا کلیک کنید] Here</a></p>

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

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

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

#slidebar1 { color : #ffffff; }

----------------------------------------------------------------------
خوب در این قسمت توضیحات پایه از css داده شد . در پست بعدی اطلاعات جزیی تری را فرا میگیریم .
-----------------------------------------------------------------------
منبع : learning how to create web pages with css
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

[developer]

برای این که کد ها درست نمایش داده بشن باید اونها رو در [code ] CODE [ / code] قرار بدید .