شکل کلی دستورات CSS در برگیرنده مجموعه ای از قوانین است که توسط مرورگرها تفسیر می شود و سپس به عناصر مرتبط در سند اعمال می گردد.
در آموزش استایل HTML با نحوه اضافه کردن کدهای CSS به سند HTML صفحه وب به سه روش مختلف توضیح دادیم.
شکل کلی دستورات CSS
همانطور که می دانید قوانین CSS دو بخش اصلی دارند. بخش اول همان Selector ( انتخابگر) است و بخش دوم اعلانات(declaration) می باشد.
انتخابگرها به اعلان عنصری اشاره دارد که مایل است استایل بر روی آن اعمال گردد.
اعلان نیز که به صورت بلوکی ظاهر می شود انتخابگر را دنبال می کند و ممکن است بر روی تمامی عناصری از نوع خاص اعمال گردد یا تنها بر روی عناصری اعمال شود که صفت خاصی دارند.
در بخش بعدی موارد بیشتری در مورد سلکتورهای CSS خواهید آموخت.
هر اعلانی شامل یک خاصیت و یک مقدار است. خاصیت صفت استایل است که می خواهید ان را تغییر دهید. این صفت ممکن است رنگ یا حاشیه باشد. هر خاصیتی دارای یک مقدار است. به عنوان مثال خاصیت رنگ می تواند مقدار آبی یا #۰۰۰۰FF
را در خود داشته باشد.
1 |
h1 {color:blue; text-align:center;} |
برای اینکه CSS بیشتر از قبل قابل خواندن باشد شما می توانید یک اعلان را در هر خط قرار دهید. به مثال زیر توجه کنید:
1 2 3 4 |
h1 { color: blue; text-align: center; } |
در مثال بالا h1 یک انتخابگر ، رنگ و ترازبندی متن نیز خاصیت هستند.
نکته: اعلان های CSS همیشه به نقطه ویرگول ختم می شوند و گروه های اعلان نیز همیشه با کاراکتر {}
محصور می گردند.
توضیح (Comment) های CSS
کامنت ها معمولا به منظور راحت تر کردن درک کدها مورد استفاده قرار می گیرند. این موضوع به سایر توسعه دهندگان کمک می کند درک بهتری از CSS شما داشته باشند.
کامنت ها برای برنامه نویسان بسیار مهم اند اما اهمیت زیادی برای مرورگرها ندارند و اغلب توسط آن ها نادیده گرفته می شوند. کامنت های CSS معمولا با علامت /*
آغاز می شود و با */
به پایان می رسد.
به مثال زیر توجه کنید:
1 2 3 4 5 |
/* This is a CSS comment */ h1 { color: blue; text-align: center; } |
در مورد سلکتورهای CSS در جلسه بعدی آموزش CSS بیشتر آشنا می شوید.
موفق باشید.