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

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

یکی از مهم ترین بخش های که پیش زمینه حرفه ای شدن در CSS است این است که با Selector ها کامل آشنا بشویم.

Selector به شما این اجازه رو می دهد که عناصر html دستکاری و انتخاب کنید.
Selector ها برای پیدا کردن و انتخاب کردن عناصر html بر اساس Id  و  کلاس ها ، نوع ها ، خصوصایت و مقادیر خصوصیت ها و … استفاده می شوند.

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

Selector عنصر:
Selector عنصر ، عناصر را بر مبنای نام ها انخاب می کند.
به عنوان مثال شما می توانید همه ی عناصر تگ <p> انتخاب و اعمال مختلفی رو بروی این تگ اعمال کنید از جمله متن ها راست چین شوند، تغییر رنگ متن و …

 id Selector :
id Selector از خصوصیت id یک تگ html برای یافتن عنصر مشخص استفاده می کند.
id باید در یک صفحه منحصر به فرد باشد. بنابراین شما زمانی از id Selector استفاده می کنید که بخواهید یک عنصر یکتا را پیدا کنید.
برای یافتن یک id یکتا و منحصر به فرد ، کاراکتر هش # را مینویسید و به دنبال آن نام id عنصر را وارد می کنید.
استایل زیر به یک عنصر html با آی دی para1 اعمال خواهد شد.

class Selector :
class selector T ،عناصر ها رو با یک کلاس معین پیدا می کند.
class selector از خصوصایت کلاس html بهره می برد.
برای یافتن عناصر با یک کلاس مشخص از کارکتر دات یا نقطه و به دنبال آن نام کلاس  را می نویسیم.
در مثال زیر همه عناصر html با کلاس Center ، وسط چین خواهند شد.

گروه بندی  Selector ها :

بعضی مواقع روی چندین Selector یک Style یکسان تنظیم می شود، مانند مثال زیر:

برای کوتاه تر شدن کد، می توانید Selectorها را در یک گروه قرار دهید.

هر Selector را با علامت “,” جدا کنید.

نتیجه به صورت زیر خواهد بود:

گروه بندی انتخابگرها گروه بندی انتخابگرها گروه بندی انتخابگرها Capture 12

امکان این وجود دارد که یک استایل برای یک انتخابگر ، درون یک انتخابگر دیگر اعمال کرد. همان طور که از عنوان این مطلب مشخص است در CSS این امکان وجود دارد که Selectorهای آبشاری تعریف کنیم.
در نمونه زیر، یک استایل برای همه عناصر p مشخص شده است ، یک استایل برای تمام عناصری که با class=”marked” مشخص شده اند. و استایل سوم تنها برای عناصر p که در داخل عناصری با class=”marked” مشخص شده اند ، مشخص شده است :

مثال زیر توجه کنید:

نتیجه به صورت زیر خواهد بود:

گروه بندی انتخابگرها گروه بندی انتخابگرها گروه بندی انتخابگرها Capture 13

 

 

 

آموزش CSS آموزش طراحی وب

دیدگاه خود را بیان کنید