آموزش سی اس اس CSS

نحوه نگارش سی اس اس (CSS)

مجموعه قوانین سی اس اس (CSS) شامل یک سلکتور و یک بلوک توصیفی است.

به عبارت دیگر نحو نگارش سی اس اس به شرح زیر است:

 
selector{property: value;}
 

که سلکتور به المان HTML که شما میخواهید به آن استایل بدهید اشاره دارد.

بلوک توصیفی شامل یک یا چند توصیف که با سمیکالن ";" از هم جدا میشود.

هر توصیف شامل نام یک property و value میباشد که با کالون ":" از هم جدا شده اند.

یک توصیف CSS همیشه با سمیکالون تمام میشود و بلوک توصیفی داخل براکت قرار دارد.

در مثال زیر المان p وسط چین و به رنگ قرمز خواهد بود

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

سلکتورهای سی اس اس (CSS)

از سلکتورهای سی اس اس برای "پیدا کردن" یا "انتخاب کردن" المان HTML استفاده میشود.

سلکتورهای سی اس اس بر اساس نام، id، کلاس، اتریبیوت و غیره میباشند.

مثال

.center {
    text-align: center;
}

در مثال بالا از سلکتور کلاس برای وسط چین کردن استفاده شده است.

گروه سازی سلکتورها

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

برای اینکار شما میتوانید سلکتورها را با کاما از هم جدا کنید.

مثال

h1, h2, p {
    text-align: center;
    color: red;
}

کامنت نویسی در سی اس اس (CSS)

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

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

کامنت در سی اس اس با /* شروع و با */ تمام میشوند. کامنت ها میتوانند چند خطی باشند.

p {
    text-align: center;
    /* This is a single-line comment */
}
/* This is
a multi-line
comment */