ساختار نحوی دستورات CSS

در حال حاضر نیازی به درک نوع استایل اعمال شده نیست چرا که در بخش های بعدی بطور مفصل انواع استایل های عناصر را آموزش خواهیم داد. در این بخش با ساختار نحوی دستورات CSS آشنا خواهید شد.

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

Declaration : بخشی که در میان علامت {} نوشته می شود، بخش اعلان نام دارد و در این قسمت شما باید نام خاصیت مورد نظر که می خواهید اعمال شود و مقدار آن را تعیین کنید.

در این مثال خاصیت رنگ برابر با مقدار آبی است و خاصیت سایز فونت برابر با مقدار ۱۲ پیکسل است.

 Selector : این بخش نام عنصر HTML است که می خواهیم استایل مورد نظر را بر روی آن اعمال کنیم.

• کسب درآمد از سایت و معرفی راهکارهای موفق

مثال : در دستور زیر، مشاهده میکنید که مقدار هر خاصیت، بعد از علامت دو نقطه “:” در جلوی آن نوشته می شود. همچنین در پایان هر جفت خاصیت و مقدار علامت “;” گذاشته می شود. کل خاصیت ها و مقدارها در علامت براکت نوشته میشود:

p {color:red;text-align:center;}

برای اینکه دستورات با میزان خوانایی بیشتری داشته باشید و بتوانید با یک نگاه سریعا بخش مورد نظر خود را پیدا کنید، می توانید هر جفت خاصیت و مقدار را در یک خط بنویسید.

مثال :

p
{
color:red;
text-align:center;
}

توضیحات یا کامنت در زبان CSS :

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

این توضیحات هنگام اجرای سایت نادیده گرفته می شوند بنابراین هیچ خطایی بوجود نخواهد آمد و می توانید با خیال راحت هرچه را با هر زبانی که می خواهید درج کنید. شرط اینکار اینست که توضیحات خود را با علامت “/*” شروع کنید و با علامت “*/” به پایان برسانید.

مثال : در این مثال نمونه ای از یک توضیح یا کامنت را از ساختار نحوی دستورات CSS مشاهده خواهید نمود.

/*This is a comment - این یک توضیح است*/
p
{
text-align:center;
/*This is another comment - توضیحات متعدد با زبان های مختلف */
color:black;
font-family:arial;
}

تا به اینجا با ساختار نحوی دستورات CSS آشنا شدیم. در جلسات بعدی شما را با نحوه ی تخصیص کلاس (Class) و آیدی (id) در زبان CSS آشنا خواهیم کرد. پس با ما همراه باشید.