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

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

یکی از مهم ترین بخش های که پیش زمینه حرفه ای شدن در 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 آموزش طراحی وب

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