وب

بررسی شبه عناصر CSS و معرفی مهمترین شبه عناصر

شبه عناصر CSS در واقع به سلکتور های CSS افکت های خاصی را اعمال می کنند. اما چون جزو عناصر اصلی محسوب نمی شوند به آن ها شبه عناصر CSS یا CSS pseudo-elements گفته می شود. برای اضافه کردن افکت های این شبه عناصر نیازی به استفاده از جاوا اسکریپت و سایر اسکریپت ها نخواهید داشت. علاوه بر شبه عناصر شبه کلاس ها هم در CSS مورد استفاده قرار می گیرند. به مثال زیر توجه کنید تا با نحوه استفاده از شبه عناصر CSS و همینطور شبه کلاس ها آشنا شوید:(توصیه می شود دوره آموزشی طراحی سایت و پکیج آموزش طراحی سایت  را مشاهده کنید)

نحوه استفاده از شبه عناصر:

نحوه استفاده از شبه کلاس ها :

شبه عناصر CSS

آشنایی بیشتر با شبه عناصر css

شبه عناصر css همانند عناصر مجازی هستند که ما که ما می توانیم از آن ها به عنوان جایگزین عناصر html استفاده کنیم. نکته اصلی این است که این عناصر در طبقه بندی اسناد یا DOM وجود ندارند. این بدین معناست که ما با استفاده از css این شبه عناصر را ایجاد می کنیم.

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

استفاده از  :: یا : برای شبه عناصر css

برای این که تفاوتی بین شبه عناصر و شبه کلاس ها در css3 وجود داشته باشد برای نمایش شبه عناصر از :: استفاده می کنند : مانند ::first-line

در مقابل شبه کلاس ها با : در قبل از کاراکترها نمایش داده می شوند. همه مرورگر ها به جز اینترنت اکسپلورر ۸ از این نحوه نوشتن کدهای شبه عناصر پشتیبانی می کنند. البته بعضی از شبه عناصر فقط با :: نمایش داده می شوند، مانند ::backdrop که فقط به همین شکل قابل خواندن است.

پیشنهاد می شود که فقط در مواقع ای که نیاز است از :: استفاده کنید و در سایر موارد از : استفاده کنید زیرا همه مرورگر ها به سادگی از آن پشتیبانی می کنند.

با تعدادی از مهمترین شبه عناصر css و وظایف آن ها در زیر آشنا خواهیم شد:

 :first-line معروف ترین شبه عنصر css

با استفاده از این شبه عناصر css شما می توانید افکت های خاصی را به اولین خط متن خود در سلکتور اضافه کنید. ما در این جا با استفاده از مثال زیر نحوه استفاده از این شبه عنصر را به شما نشان می دهیم:

اگر این کد را در مرورگر خود نمایش دهید متوجه خواهید شد که فقط در خط اول ویژگی آندرلاین به متن اضافه می شود.

 :first-letter شبه عناصر css پرکاربرد در زبان انگلیسی

با استفاده از این شبه عناصر css شما به اولین حرف متن خود ویژگی خاصی را اعمال می کنید. در زبان انگلیسی نقش این شبه عنصر بسیار بیشتر از زبان فارسی است. به مثال زیر و نحوه استفاده از :first-letter دقت کنید:

در اینجا حرف اول T به صورت بزرگ نمایش داده خواهد شد

شبه عناصر CSS

شبه عنصر :before 

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

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

  • This line will be preceded by a bullet.
  • This line will be preceded by a bullet.
  • This line will be preceded by a bullet.

همانطور که ملاحظه می کنید یک مربع قبل از متن قرار داده شده است.

شبه عنصر :after

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

نتیجه به این شکل خواهد بود:

شبه عناصر CSS

همانطور که مشاهده می کنید. در این جا مربع ها بعد از متن قرار گرفته اند.

کلام آخر

شبه عناصر css کار های زیادی را به سادگی برای شما انجام خواهند داد. یادگیری این شبه عناصر نیز خیلی سخت نیست و با کمی تلاش و تکرار می توانید به سادگی از آن ها در مواقع لزوم استفاده کنید. فراموش نکنید که ما در این جا تنها مثال ها ای را برای آشنایی شما با این شبه عناصر ارائه کرده ایم، اما شما می توانید کارهای پیچیده تری را با آن ها انجام دهید. اگر در مورد استفاده از شبه عناصر و نحوه کار با آن ها تجربه ها ای داشته اید با ما به اشتراک بگذارید. مهمترین نکته در طراحی وب یادگیری مستمر آن است پس شما هم در یادگیری و آموزش آن به دیگران مشارکت کنید.

 

منبع : طراحی سایت

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

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

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

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