وب

سلکتور ها در CSS-بخش اول

سلکتور / Selector ها در CSS

در CSS، سلکتور ها برای قرار دادن عناصر HTML در صفحات وب به منظور ایجاد استایل استفاده می شود. طیف گسترده ای از سلکتور های CSS در دسترس اند. در این مقاله، انواع مختلف انتخاب گر ها را با جزئیات و همچنین نحوه ی کار آن ها را بررسی می کنیم.(توصیه می شود دوره آموزشی طراحی سایت و پکیج آموزش طراحی سایت  را مشاهده کنید)

پیش نیازها: دانش پایه ی کامپیوتر، نرم افزار اساسی نصب شده، دانش پایه در کار با فایل ها، مبانی HTML و ایده ی چگونگی کارکرد CSS.

هدف: یادگیری نحوه کارکرد سلکتور های CSS با جزئیات.

اصول اولیه

در مقاله اخیر سینتکس CSS را به تفصیل توضیح دادیم. سلکتور ها بخشی از یک دستور CSS هستند و درست قبل از بلوک های اعلان CSS می آیند.

سلکتور ها در CSS

انواع سلکتور های CSS

انتخاب گر های CSS را می توان به دسته های زیر تقسیم کرد:

  • سلکتور های ساده: یک یا چند عنصر را بر اساس نوع عنصر، کلاس یا شناسه مطابقت می دهند.
  • سلکتور های ویژگی: یک یا چند عنصر را بر اساس مقادیر ویژگی های آن ها مطابقت می دهند.
  • شبه کلاس ها: یک یا چند عنصر موجود در یک حالت خاص را مطابقت می دهند مانند یک عنصر که توسط نشانگر ماوس شناور شده است، یا جعبه ای که در حال حاضر غیرفعال شده یا چک شده است.
  • شبه عناصر: یک یا چند قسمت از محتوا که در یک موقعیت خاص در ارتباط با یک عنصر قرار دارند را مطابقت می دهند، مانند یک کلمه از هر پاراگراف یا محتوای تولید شده درست قبل از یک عنصر.
  • ترکیب کننده ها: این نوع، خودشان دقیقا انتخاب گر نیستند، بلکه راهی برای ترکیب دو یا چند انتخاب کننده در روش های مفید برای انتخاب های بسیار خاص هستند. بنابراین برای مثال، شما می توانید تنها پاراگراف هایی را انتخاب کنید که فرزندان مستقیم از div ها هستند یا پاراگراف هایی که به طور مستقیم بعد از عنوان ها قرار می گیرند.
  • سلکتور های چندگانه: این نوع هم سلکتور های جداگانه ای نیستند؛ ایده این است که می توانید سلکتور های متعدد را در یک دستور CSS یکسان، که با کاما جدا شده اند قرار دهید، تا یک مجموعه ای از اعلان ها به تمام عناصر انتخاب شده توسط آن دسته از سلکتور ها اعمال کنند.

آموزش پیشنهادی برای شما : آموزش کامل CSS و CSS3

سلکتور ها در CSS

مرور مقاله ی سلکتور های CSS

این مقاله در چهار بخش، همه ی جنبه های مختلف سلکتور ها را مورد بررسی قرار می دهد. ما این اطلاعات را در چند قسمت تقسیم کرده ایم، چون مطالب بسیاری در آن ها وجود دارد. مقالات به شرح زیر است:

  • سلکتور های ساده / Simple selectors
  • سلکتور های صفات / Attribute selectors
  • شبه کلاس ها و شبه عناصر / Pseudo-classes and pseudo-elements
  • ترکیب کننده ها و سلکتور های چندگانه / Combinators and multiple selectors

به شدت توصیه می شود ابتدا با سلکتور های ساده شروع کنید، در غیر این صورت ممکن است بخشی از اطلاعات را از دست بدهید.

در اولین بخش مقاله، در مورد انتخاب گر های ساده ی CSS یاد می گیریم. این دسته از سلکتور ها مستقیما با یک یا چند عنصر یک سند بر اساس نوع عنصر، کلاس یا شناسه ارتباط دارند.

سلکتور های عناصر aka

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

در اینجا بخشی از یک کد HTML وجود دارد:

و یک style sheet ساده به صورت زیر است:

و نتیجه را به صورت زیر دریافت می کنیم:

سلکتور ها در CSS

یادگیری فعال: انتخاب عناصر مختلف

برای این بخش از یادگیری فعال، سعی کنید به صورتی که عناصر مختلف در مثال استایل شده اند، انتخاب گر را در دستور CSS تغییر دهید. آیا می دانید که چگونه در یک زمان، یک سلکتور برای اعمال یک سلسله دستور ها به چندین عنصر بنویسید؟

اگر اشتباهی کردید، همیشه می توانید آن را با استفاده از دکمه ی باز نشانی / Reset مجدد تنظیم کنید. اگر واقعا موفق یه انجام این تمرین نشدید، دکمه ی نمایش راه حل را بزنید تا پاسخ را ببینید.

سلکتور های کلاس

سلکتور ها در CSS

سلکتور کلاس در CSS شامل یک نقطه، ‘.’، و به دنبال آن، یک نام کلاس است. یک نام کلاس می تواند هر مقداری، بدون فاصله باشد، که در ویژگی کلاس HTML قرار می گیرد. انتخاب نام یک کلاس به شما بستگی دارد. همچنین قابل توجه است که عناصر چندگانه در یک سند می توانند یک مقدار کلاس یکسان داشته باشند و یک عنصر می تواند نام های کلاس چندگانه را با فضای خالی جدا کند. در اینجا یک مثال آورده شده است:

مثال ساده

کد های HTML:

یک style sheet ساده که دو نوع از این کلاس ها را استایل می کند:

و این نتیجه را دریافت می کنیم:

سلکتور ها در CSS

یادگیری فعال: کلاس های چندگانه

برای این یادگیری فعال، سعی کنید ویژگی های کلاس در عناصر پاراگراف را تغییر دهید، بنابراین می توانید اثرات متعدد جداگانه را اعمال کنید. سعی کنید یک کلاس base-box  به علاوه ی یک کلاس نقش (ویرایشگر یادداشت یا هشدار) را اعمال کنید. در مورد این فکر کنید که چگونه این مجموعه دستور ها اجازه می دهد تا یک سیستم مدولار از استایل را ایجاد کنید.

اگر اشتباهی کردید، همیشه می توانید آن را با استفاده از دکمه ی باز نشانی / Reset مجدد تنظیم کنید. اگر واقعا موفق یه انجام این تمرین نشدید، دکمه ی نمایش راه حل را بزنید تا پاسخ را ببینید.

سلکتور های شناسه / ID selectors

سلکتور شناسه در CSS شامل یک نماد هاش (#) است که به دنبال آن، نام شناسه ی یک عنصر مشخص، نوشته می شود. هر عنصر می تواند یک مجموعه شناسه ی منحصر به فرد با ویژگی id داشته باشد. در این مرحله باید یک نام شناسه را انتخاب کنید. این راه، کارآمد ترین روش برای انتخاب یک عنصر است.

نکته ی مهم: در یک سند، نام شناسه باید منحصر به فرد باشد. رفتارهای ناشی از شناسه های تکراری غیر قابل پیش بینی است. برای مثال، در برخی از مرورگر ها، تنها اولین نمونه شمارش می شود و بقیه نادیده گرفته می شوند.

بیایید به یک مثال نگاه کنیم:

کد های HTML:

style sheet ساده:

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

سلکتور ها در CSS

یادگیری فعال: اختصاص دادن رنگ به شناسه

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

اگر اشتباهی کردید، همیشه می توانید آن را با استفاده از دکمه ی باز نشانی / Reset مجدد تنظیم کنید. اگر واقعا موفق یه انجام این تمرین نشدید، دکمه ی نمایش راه حل را بزنید تا پاسخ را ببینید.

سلکتور  های Universal در CSS

سلکتور  Universal (*) جادوگر نهایی است. این سلکتور اجازه می دهد تا تمام عناصر را در یک صفحه انتخاب کنید. از آن جا که اعمال سبک به هر عنصر در یک صفحه به ندرت استفاده می شود، اغلب در ترکیب با دیگر سلکتور ها استفاده می شود.

نکته ی مهم: هنگام استفاده از سلکتور Universal، مراقب باشید. از آن جا که این سلکتور به تمام عناصر اعمال می شود، استفاده از آن در صفحات وب بزرگ می تواند اثر قابل توجهی بر عملکرد داشته باشد: صفحات وب، کند تر از حد مورد انتظار نمایش داده می شوند. البته موارد زیادی برای استفاده از این سلکتور وجود ندارد.

اکنون برای مثال این کد HTML را در نظر می گیریم:

و style sheet ساده:

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

سلکتور ها در CSS

در بخش بعدی مقاله ی سلکتور های CSS

اولین بخش از آموزش سلکتور های CSS در این جا به پایان می رسد! امیدواریم اولین گام برای کار با سلکتور ها برای شما جالب بوده باشد. تا این مرحله، سلکتور های اصلی ساده را بررسی کردیم. ویژگی های پیشرفته تر سلکتور های CSS را در بخش بعدی این مقاله با سلکتور های صفات / Attribute selectors ادامه می دهیم.

 

نوشته های مشابه

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

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

دکمه بازگشت به بالا