انتخابگر‌ها در CSS | معرفی Selector های مهم CSS
همانطور که در جلسه آموزش پایه CSS گفتیم، بخش اول دستورات CSS انتخابگر یا همان Selector است. تا این مرحله از آموزش عناصر را با استفاده از نام آنها انتخاب می‌کردیم. اما روش‌های دیگری هم وجود دارند که در موقعیت‌های مختلفی بکار می‌آیند. در این جلسه به معرفی انتخابگر‌ها در CSS می‌پردازیم.
در این جلسه می‌خوانید:
- انتخاب با استفاده از نام عنصر
- انتخاب با استفاده از صفت id
- انتخاب با استفاده از صفت class
- انتخاب همزمان چندین عنصر
- انتخاب با استفاده از کاراکتر *
- رابطه پدر و فرزندی در انتخابگر‌ها
انتخاب با استفاده از نام عنصر
این روش در مواقعی که نیاز به انتخاب کلی عناصر داریم مناسب است. مثلا اگر بخواهیم استایل خاصی را برای تمام عناصر p موجود در صفحه درنظر بگیریم این روش می‌تواند کارآمد باشد. اما برای استایل دهی به یک عنصر خاص (مثلا یک عنصر p خاص در صفحه) اصلا روش مناسبی نیست.
برای استفاده از این روش تنها کافیست تا نام یک عنصر را در قسمت selector دستورات CSS بنویسیم.
1 2 3 | p { font-family: 'tahoma'; } |
انتخاب با استفاده از صفت id
با استفاده از صفت id می‌توانید برای عناصر یک شناسه منحصر به فرد بنویسید. در CSS می‌توان یک عنصر را با استفاده از شناسه (id) آن انتخاب کرد. این روش برای مواقعی که قصد انتخاب تنها یک عنصر خاص در یک صفحه وب را دارید مناسب است. به مثال زیر دقت کنید:
1 2 3 4 5 6 7 8 9 10 11 12 13 | <html> <head> <title>Page title</title> <style> #my-paragraph { font-family: 'tahoma'; } </style> </head> <body> <p id="my-paragraph"> پاراگراف تست </p> </body> </html> |
برای انتخاب عنصر با استفاده از شناسه در CSS لازم است تا در قسمت selector، قبل از نام شناسه یک کاراکتر # قرار دهیم. تا مرورگر متوجه شود منظور ما عنصری است که آیدی موردنظر را دارد.
نکته: مقدار صفت id باید منحصر بفرد باشد، یعنی نباید هیچ آیدی تکراری در یک صفحه وجود داشته باشد. در مثال بالا شناسه my-paragraph را به هیج عنصر دیگری نمی‌توان داد.
انتخاب با استفاده از صفت class
با استفاده از صفت class می‌توانید برای عناصر یک برچسب تعیین کنید. در CSS می‌توان عناصر را با استفاده از class آنها انتخاب کرد. این روش برای مواقعی که قصد دارید استایل خاصی را به مجموعه عناصری اختصاص دهید کاربرد دارد. به مثال زیر دقت کنید:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <html> <head> <title>Page title</title> <style> .my-font { font-family: 'tahoma'; } </style> </head> <body> <p>پاراگراف بدون استایل</p> <p class="my-font">پاراگراف با فونت تاهوما</p> <h3 class="my-font">عنوان با فونت تاهوما</h3> </body> </html> |
مقدار صفت class مانند id منحصر بفرد نیست، به همین علت ما کلاس my-font را به یکی از عناصر p و عنصر h3 داده‌ایم، بنابراین استایلی را که برای کلاس my-font می‌نویسیم روی هر دو عنصر اعمال می‌شود.
برای انتخاب نام کلاس در قسمت selector دستورات CSS، کافیست تنها قبل از نام کلاس یک کاراکتر نقطه قرار دهید.
انتخاب همزمان چندین عنصر
می‌توان با استفاده از کاراکتر ویرگول چند انتخاب مختلف انجام داد. به مثال زیر توجه کنید:
1 2 3 | .my-class , #my-id , div { font-family: 'tahoma'; } |
در مثال بالا عناصری که کلاس my-class دارند، عنصری که آیدی my-id دارد و تمام عناصر div موجود در صفحه، فونت متن آنها روی tahoma تنظیم می‌شود. به همین راحتی می‌توان چند انتخابگر را باهم ترکیب کرد.
انتخاب با استفاده از کاراکتر *
کاراکتر * یعنی همه عناصر، وقتی بخواهیم به همه عناصر موجود در صفحه استایل خاصی را اختصاص دهیم، می‌توانیم از این selector استفاده کنیم.
1 2 3 | * { font-size: 14px; } |
رابطه پدر و فرزندی در انتخابگر‌ها
همانطور که می‌دانید می‌توان عناصر HTML را بصورت تودرتو نوشت. در CSS هم می‌توان بر همین اساس عنصری را انتخاب کرد. کد HTML زیر را درنظر بگیرید:
1 2 3 4 5 6 | <div id="myBox"> <p>این پاراگراف فرزند مستقیم myBox است</p> <div> <p>این پاراگراف فرزند غیر مستقیم myBox است</p> </div> </div> |
دو پاراگراف داریم، اولی فرزند مستقیم و دومی فرزند غیر مستقیم عنصری با آیدی myBox است، در CSS برای تعیین تمام فرزندها (مستقیم و غیرمستقیم) از کاراکتر فاصله (space) و برای تعیین فرزند‌های مستقیم از کاراکتر بزرگتری ( < ) استفاده می‌شود. کد CSS زیر را در نظر بگیرید:
1 2 3 4 5 6 7 | #myBox p { font-family: 'tahoma'; } #myBox > p { color: blue; } |
در دستور اول، کل عناصر p موجود در عنصری با آیدی myBox را انتخاب کردیم و فونت tahoma را برای آنها تنظیم کردیم.
در دستور دوم، فقط عنصر p که فرزند مستقیم عنصری با آیدی myBox است را انتخاب کردیم و رنگ متن آن را آبی کرده‌ایم.
در این جلسه با مهم‌ترین انتخابگر‌ها در CSS آشنا شدید. selector های پیشرفته‌تری هم وجود دارند، اما در این درس سعی شده تا کاربردی ترین آنها گفته شود.
سلام
لطفا ساخت فوتر برای سایت رو هم اموزش بدین
من خودم یه فوتر برای سایت نوشتم البته فقط html شو نوشتم ولی برای css نمیدونم باید چیکار کنم
ساخت فوتر پیچیده نیست مثل سایر بخش‌هاست. کافیه خودتون آستین بالا بزنید با همین تگ‌هایی که تا الان گفته شد یک فوتر بسازید.
البته در دوره ویدیویی ساخت کامل یک وب‌سایت رو در آموزش‌ها داریم.
با سلام لطفا بخش class خروجیش رو هم قرار بدید ممنون.
دوست عزیز کدهای نوشته شده در این درس صرفا جهت آشنایی شما با کاربرد کلاس و ایدی و… هست وگرنه خروجی خاصی ندارن جز چند جمله. میتونید کدها رو خودتون در یک ادیتور بنویسید با پسوند .html سیو کنید و با مروگر باز کنید تا خروجی کار رو مشاهده کنید.
محبت کنید برای رابطه پدری فرزندی مثالی در غالب برنامه با خروجی های متفاوت بیاورید کمی گیج شدم
در بخش آخر مقاله مثال زده شده برای جزییات بیشتر در گوگل سرچ کنید.