سینتکس و انتخابگرهای css

سینتکس و انتخابگرهای css  چیست ؟

آموزش css درس دوم

سینتکس  CSS

سینتکس و انتخابگرهای css  : یک مجموعه قوانین CSS شامل یک انتخابگر و یک بلوک اعلان  است:

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

طراحی ظاهر html  با css را از اینجا ببینید

بلوک اعلان  حاوی یک یا چند اعلان جدا شده با سمی کالن است.

هر اعلان شامل یک نام ویژگی  CSS و یک مقدار است که توسط یک کولون جدا شده است.

یک اعلان  CSS همیشه با یک سمیکولن به پایان می رسد، و بلوک های اعلان  توسط پرانتز های فرفری  احاطه شده اند.

در مثال زیر، تمام عناصر <p>  به صورت مرکزی با رنگ متن قرمز قرار خواهند گرفت:

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

سینتکس و انتخابگرهای css : انتخابگرهای  css

انتخابگرهای CSS برای پیدا کردن (یا انتخاب) عناصر HTML بر اساس نام، شناسه، کلاس، صفت و غیره استفاده می شوند.

سینتکس و انتخابگرهای css : انتخاب عنصر

انتخابگر عنصر، عناصر را براساس نام عنصر انتخاب می کند.

شما می توانید تمام عناصر <p>  را بر روی یک صفحه مانند این (در این مورد ،همه عناصر  <p>  ،   center-aligned خواهند بود یعنی اینکه در مرکز قرار می گیرند، با رنگ متن قرمز ) :

مثال

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

سینتکس و انتخابگرهای css : انتخاب شناسه

انتخابگر ID از شناسه id  برای یک عنصر HTML جهت  انتخاب یک عنصر خاص استفاده می کند.

شناسه یک عنصر باید در یک صفحه منحصر به فرد باشد، بنابراین id selector  برای انتخاب یک عنصر منحصر به فرد استفاده می شود!

برای انتخاب یک عنصر با یک شناسه خاص، یک کاراکتر  (#)  در ادامه شناسه عنصر بنویسید.

قانون  style زیر به عنصر HTML با id = “para1” اعمال خواهد شد:
مثال :

#para1 {
    text-align: center;
    color: red;
}

نکته: یک نام شناسه نمی تواند با یک شماره شروع شود!

سینتکس و انتخابگرهای css: انتخابگر کلاس

انتخابگر  کلاس  عناصر را با یک ویژگی کلاس خاص انتخاب می کند.

برای انتخاب عناصر با یک کلاس خاص، یک کاراکتر  (.) را  به دنبال نام کلاس بنویسید.

در مثال زیر، تمام عناصر HTML با   class = “center” قرمز و در مرکز خواهند بود:
مثال

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

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

در مثال زیر، فقط  عناصر <p>  با class = “center” در مرکز قرار دارند:
مثال

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

عناصر HTML همچنین می توانند به بیش از یک کلاس اشاره کنند.

در مثال زیر، عنصر  <p> با توجه به class = “center” و class = “large” طراحی شده است:
مثال

 

This paragraph refers to two classes.

 

نکته: یک نام کلاس نمیتواند با یک عدد شروع شود!

انتخابگرهای  گروه بندی شده

اگر عناصری با تعریف استایل یکسان مثل زیر داشته باشید :

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

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

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

بهتر است گروهها را انتخاب کنید تا کد را به حداقل برسانید.

برای انتخابگرهای گروه، هر انتخابگر را با کاما جدا کنید.

در مثال زیر،   selectors ها را از کد بالا دسته بندی کرده ایم:
مثال

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

توضیحات یا کامنت  CSS

کامنت ها  برای توضیح کد مورد استفاده قرار می گیرند و ممکن است هنگامی که کد منبع را بعداً ویرایش می کنید راهنمای خوبی برای شما باشد.

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

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

مثال

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

/* This is
a multi-line
comment */