CSS Syntax

سینتکس های Css از سه قسمت تشکیل شده اند، Selector,Property,Value

یک Selector معمولاً یک المان یا تگی از HTML است که می خواهید تعیین کنید. Property یک صفت خاصه ای است که شما آن را تغییر می دهید، و هر خصوصیت دارای یک مقدار است. Property و مقدار آن با یک ( : ) از هم جدا شده اند و درنهایت در یک { } قرار دارند.

نکته :
در صورتیکه مقادیر از چندین کلمه تشکیل شده آنرا در کوتیشن قرار دهید.

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

در صورتی که بخواهید خوانایی برنامه بالا رود باید هر خصوصیت را در یک خط قرار دهید، چیزی شبیه به :

Grouping :
شما می توانید، Selector ها را گروه بندی کنید و هر کدام از آنها را با کاما جدا کنید. در مثال زیر ما تمام المانهای Header را گروه بندی کرده ایم. تمام المانهای هدر با رنگ سبز نشان داده خواهند شد:

The Class Selector :
با Class Selector شما می توانید style های متفاوت برای المانهای مشابه HTML داشته باشید.
برای مثال، شما مایل هستید دو نوع پاراگراف درسند خود داشته باشید، یکی با خصوصیت Right-aligned و دیگری Center-aligned. روش انجام این کار را می توانید در زیر مشاهده کنید.

شما باید از صفت خاصه کلاس، در سندHtml خود استفاده کنید :

جهت ایجاد بیش از یک کلاس برای المانهای ارائه شده، سینتکس ها به شکل زیر خواهند بود:

پاراگراف فوق با کلاس “center” و”Bold” تنظیم خواهد شد .
شما می توانید نام تگ را، که جهت تعیین کردن یک Style، در تمام المانهای HTML استفاده می شود، در Selector حذف کنید. در مثال زیر تمام المانهای HTML که با کلاس “center” هستند، به صورت Center-aligned تنظیم خواهند شد.

در کدهای زیر هردو المان p و h1 دارای کلاس با خصوصیت “center” هستند. این به این معنی است که هر دو المان از قوانین سلکتور “.center” استفاده خواهند کرد.

هیچ وقت نام کلاس را با یک عدد شروع نکنید! چون در Mozila, Firefox اجرا نخواهد شد.
اضافه کردن یک Style به المانها بوسیله صفت های خاصه :
همچنین شما می توانید style ها را به المانهای Html با صفات خاصه اضافه کنید .
قانون Style که در زیر آمده با تمام المانهای ورودی که صفت Type، با مقدار “text” دارند، سازگارند.

ID selector :
همچنین شما می توانید المانهای HTML را با Id selector مشخص کنید. که با # مشخص می شود.
قانون Style زیر با المانی که صفت ID داشته ومقدار آن برابر “green” باشد ، سازگار است.

قانون style زیر با المان p که دارای Id و مقدار “Para1” است، نظیر می شود.

نام Id را با عدد شروع نکنید! چون در Mozila, FireFox اجرا نخواهد شد.
CSS Comments :
Comment ها یا توضیحات استفاده می شوند تا کدهای شما را توضیح دهند، و می توانند به شما کمک کنند که کدهای اصلی را در آینده راحتتر ویرایش کنید. توضیحات بوسیله مرورگرها نادیده گرفته می شوند. یک Css Comment با “/*” شروع و با “*/” خاتمه می یابد :

---

معرفي سايت مرتبط با اين مقاله