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

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

آموزش 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 جهت  انتخاب یک عنصر خاص استفاده می کند.

حتما بخوانید:  عناصر فرم های 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.

 

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

حتما بخوانید:  پاراگراف های html
سینتکس و انتخابگرهای css
سینتکس و انتخابگرهای css

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

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

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 */
امتیاز کاربران به این مطلب
۰ نفر - میانگین: ۰
تلگرام

دیدگاه‌تان را ثبت کنید:

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

PHN0eWxlPi5oX2lmcmFtZS1hcGFyYXRfZW1iZWRfZnJhbWV7cG9zaXRpb246cmVsYXRpdmU7fSAuaF9pZnJhbWUtYXBhcmF0X2VtYmVkX2ZyYW1lIC5yYXRpbyB7ZGlzcGxheTpibG9jazt3aWR0aDoxMDAlO2hlaWdodDphdXRvO30gLmhfaWZyYW1lLWFwYXJhdF9lbWJlZF9mcmFtZSBpZnJhbWUge3Bvc2l0aW9uOmFic29sdXRlO3RvcDowO2xlZnQ6MDt3aWR0aDoxMDAlOyBoZWlnaHQ6MTAwJTt9PC9zdHlsZT48ZGl2IGNsYXNzPSJoX2lmcmFtZS1hcGFyYXRfZW1iZWRfZnJhbWUiPiA8c3BhbiBzdHlsZT0iZGlzcGxheTogYmxvY2s7cGFkZGluZy10b3A6IDU3JSI+PC9zcGFuPjxpZnJhbWUgc3JjPSJodHRwczovL3d3dy5hcGFyYXQuY29tL3ZpZGVvL3ZpZGVvL2VtYmVkL3ZpZGVvaGFzaC85dHk0VS92dC9mcmFtZSIgYWxsb3dGdWxsU2NyZWVuPSJ0cnVlIiB3ZWJraXRhbGxvd2Z1bGxzY3JlZW49InRydWUiIG1vemFsbG93ZnVsbHNjcmVlbj0idHJ1ZSIgPjwvaWZyYW1lPjwvZGl2Pg==
با سپاس از ثبت دیدگاه شما دوست عزیز
از تماشای این ویدیو لذت ببرید ...
فقط چند ثانیه تا دانلود فاصله دارید!
* دانلود فایل سخنرانی استیو جابز ...
ایبوک هدف‌گذاری موثر
زودتر از آنچه فکرش را می‌کنید به خواسته‌هایتان دست پیدا کنید!
* لینک دانلود بلافاصله ایمیل می‌شود.
چهار عامل شگفت انگیز کسب درآمد چیست؟
فقط چند ثانیه تا دانلود فاصله دارید!
* سه ایده کسب و کار خانگی پولساز
فقط چند ثانیه تا دانلود فاصله دارید!
* ایبوک: ده مکان عالی برای پیدا کردن یک ایده جدید
فقط چند ثانیه تا دانلود فاصله دارید!
* دانلود ویدیوی جذاب و با کیفیت مصاحبه جک ما
از همین امروز شروع کنید
بدون تجربه و دانش فنی وارد دنیای درآمدهای اینترنتی شوید!
فایل‌های آموزشی برای شما ایمیل می‌شود.
فقط چند ثانیه تا دریافت این فایل آموزشی فاصله دارید!
فایل‌های آموزشی ویژه اعضای سایت
* اگر عضو نیستید با وارد کردن ایمیل‌تان به این فایل دسترسی پیدا می‌کنید
دسترسی مخصوص اعضای سایت
عضو سایت نیستید؟
فقط کافیه نام و ایمیل‌تان را وارد کنید و ...
* دسترسی سریع به تمام فایل‌های آموزشی
هدیه ما به شما
با سپاس از اینکه دیدگاه تان را در سایت ما ثبت کردید.


یک کوپن تخفیف 30%
  • مشاوره حضوری
  • دوره های آنلاین
  • بسته های آموزشی
  • محصولات دانلودی
  • وبینارهای آموزشی
  این کد فقط یکبار به شما نمایش داده می‌شود.
کد: qwert
ورود کاربران
* دسترسی رایگان به بخش آکادمی