ترکیب کدهای CSS

یک مجموعه دستور CSS ، متشکل از یک سلکتور ( selector ) و یک بلوک اعلامیه ( declaration ) می باشد :



سلکتور به عنصری از HTML اشاره می کند که می خواهیم استایل دهیم.
بلوک اعلامیه شامل یک یا چند اعلامیه می باشد که با علامت ; جدا می شوند.
هر اعلامیه شامل یک صفت CSS و یک مقدار می باشد که بوسیله علامت : از هم جدا می شوند.
هر اعلامیه با علامت ; تمام می شود و بلوک اعلامیه توسط دو آکولاد { } احاطه می شوند.

در مثال زیر همه عناصر <p> وسط چین شده و به رنگ قرمز نمایش داده خواهند شد.

مثال :

سلکتور عناصر
p {
    text-align: center;
    color: red;
} 
مشاهده مثال


 

سلکتور id

سلکتور id از صفت id یک عنصر HTML برای انتخاب یک عنصر مشخص استفاده می کند.
id یک عنصر باید در کل صفحه ، یکتا باشد. برای انتخاب یک عنصر با id مشخص ،  باید یک هش ( # ) قبل از id عنصر بنویسیم.
دستور استایل زیر بر روی عنصر HTML با id="para1" اعمال خواهد شد.

مثال :

سلکتور id
#para1 {
    text-align: center;
    color: red;
}
مشاهده مثال



نکته ! نام id نمی تواند با اعداد شروع شود.

 

سلکتور class

سلکتور class عناصری را که دارای یک صفت class مشخص هستند ، انتخاب می کند. برای انتخاب عناصر با یک class مشخص  ، یک نقطه ( . ) قبل از نام class آن قرار می دهیم.
در مثال زیر همه عناصر HTML دارای class="center" قرمز رنگ به بصورت وسط چین نمایش داده خواهند شد.

مثال :

سلکتور class
.center {
    text-align: center;
    color: red;
}
مشاهده مثال



همچنین می توانید مشخص کنید که فقط عناصر مشخصی از HTML تحت تاثیر یک class باشند. در مثال زیر فقط پاراگراف دارای class="center"  استایل دهی خواهد شد.

مثال :
سلکتور class برای عنصری مشخص
p.center {
    text-align: center;
    color: red;
}
مشاهده مثال



عناصر HTML می توانند به بیش از یک class اشاره کنند. در مثال زیر عنصر <p> بر اساس class="center" و class="large" استایل دهی خواهد شد.

مثال :
دو کلاس برای یک عنصر
p.center {
    text-align: center;
    color: red;
}
p.large {
    font-size: 300%;
}
مشاهده مثال



نکته ! نام class نمی تواند با اعداد شروع شود.

 

گروه بندی سلکتور ها

اگر عناصری با استایل دهی یکسان دارید برای حداقل سازی کد می توان سلکتور ها را گروه بندی کرد. برای گروه بندی سلکتور ها هر سلکتور را باید با کاما ( , ) جدا کرد. در مثال زیر سلکتور های مثال بالا را گروه بندی کرده ایم.

مثال :

گروه بندی سلکتور ها
h1, h2, p {
    text-align: center;
    color: red;
}
مشاهده مثال


 

کامنت های CSS

کامنت ها برای توضیح کد یا یادداشت گذاری میان کد استفاده می شوند و برای ویرایش یا گسترش کد در آینده بسیار مفید هستند. کامنت ها توسط مرورگر نمایش داده نمی شوند.
یک کامنت CSS با */ شروع شده و با /* پایان می یابد. همچنین کامنت ها می توانند در چندین سطر نوشته شوند

مثال :

کامنت ها
p {
    color: red;
    /* این یک کامنت تک خطی است */
    text-align: center;
}

/* این یک 
کامنت چند خطی 
است */
مشاهده مثال

نظر شما

لطفا نام و نام خانوادگی خود را وارد کنید
لطفا ایمیل خود را وارد کنید لطفا ایمیل صحیح وارد کنید.
لطفا متن نظر خود را وارد کنید
>

یادگیری CSS

مقالات و دروس

به خبرنامه مدرسه طراحی وب ایران (وب مهراز) بپیوندید.

لطفا شماره همراه صحیح وارد کنید.
لطفا ایمیل صحیح وارد کنید.

مقالات مرتبط