ساختار دستورات CSS :

در ساختار دستورات CSS ، یک دستور به دو قسمت selector (گزینشگر) و declaration (اعلان) تقسیم می شود.

declaration ها نیز خود از دو قسمت:

  • خاصیت (Property) و
  • مقدار (Value)

تشکیل شده است.

به طور کلی دستورات CSS به صورت زیر تعریف می شوند:

selector { property: value;}

selector قسمتی از کدهای HTML است که می خواهیم دستورات مورد نظر، بر روی آن اعمال شود.

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

دستورات CSS باید بین دو علامت کروشه باز و بسته { } قرار گیرند ، و همچنین پایان هر دستور باید توسط علامت نقطه ویرگول ;  مشخص شود.

کد زیر یک نمونه از دستورات CSS است:

h1 {font-size:45px; color:blue;}

قسمت selector و declaration در این نمونه کد به این شکل است:

 

ساختار دستورات CSS

ساختار دستورات CSS

 

همان طور که در تصویر می بینید هر دستور از دو قسمت، خاصیت (Property) و مقدار (Value) تشکیل شده است. ما می توانیم به راحتی مقدار خاصیت یک selector را با دستورات CSS تغییر دهیم.
مثلا رنگ برچسب <h1> در نمونه ی بالا با خاصیت color به رنگ آبی (blue) و اندازه فونت (font-size) آن نیز به ۱۲ پیکسل (۱۲px) تغییر پیدا کرده است.

نحوه نوشتن دستورات CSS :

برای خواناتر شدن دستورات سی اس اس می توانیم هر اعلان را در یک خط جداگانه بنویسیم.

به عنوان مثال دستور CSS زیر را ملاحظه کنید:

 hr {width: 1000px; height: 25px; border-color:#000000;}

حال برای خواناتر شدن فایل CSS ، هر اعلان را در یک خط قرار می دهیم، مانند زیر:

hr{
  width: 1000px;
  height: 25px;
  border-color: #000000;
}

این دو دستور تفاوتی با هم ندارند.

نکته:

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

مثلا برای ۲۵px به صورت زیر اشتباه است:

 height: 25 px;               /* توجه : این دستور به درستی عمل نمی کند */