خانه / آموزش CSS / بخش دوم-نحو CSS و CSS Selector (انتخابگر CSS) 
پشتیبان وب سایت وردپرس
"

تاریخ بروزرسانی: ۹ بهمن ۱۳۹۷ تعداد بازدید : 31 بازدید بدون دیدگاه

بخش دوم-نحو CSS و CSS Selector (انتخابگر CSS) 

قدم قبلی >< قدم بعدی

نحو CSS

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

 

  • انتخابگر اشاره به عنصر HTML ای که شما برای سبک می خواهید، دارد.
  • بلوک اعلان حاوی یک یا چند اعلان هست که توسط  سیمی کالن از هم جدا شده اند.
  • هر یک از اعلان ها شامل یک نام مالک CSS یا property  و یک مقدار یا value است که توسط یک علامت نقل قول از هم جدا شده اند.
  • یک اعلان CSS همیشه با یک سیمی کالن به پایان می رسد ، و بلوک های اعلان شده توسط براکت ها احاطه شده اند.

در مثال زیر تمام عناصر به صورت مرکزی با رنگ قرمز متن قرار می گیرند:

 

CSS Selectors (انتخابگرهای CSS) 

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

element Selector(انتخابگر عنصر)

انتخابگر عنصر، عناصر را براساس نام عنصر انتخاب می کند. شما می توانید تمام عناصر را بر روی یک صفحه مانند این انتخاب کنید به وسیله <p> اگر کد زیر را اجرا کنید یک متن قرمزوسط صفحه خواهید داشت به این شکل:

Every paragraph will be affected by the style.

Me too!

And me!

id Selector(انتخابگر id)

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

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

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

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

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

class Selector(انتخابگر کلاس)

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

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

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

 

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

در مثال زیر، تنها عناصر <p> با class = “center” به صورت محور مرکزی قرار می گیرند:

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

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

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

Grouping Selector(انتخابگر گروه بندی)

اگر عناصری با تعاریف style یکسان داشته باشید، مانند این :

 

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

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

در مثال زیر ما انتخابگرها را از کد بالا گروه بندی کرده ایم:

CSS Comments

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

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

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

 

 

گام قبلی >< گام بعدی
لطفا امتیاز بدهید

لینک کوتاه این مطلب: https://tiktheme.com/?p=14043


کانال تلگرام تیک تم

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

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