• illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید دوره های آموزشی سون لرن از جامع ترین و کاربردی ترین آموزش های موجود در سطح وب فارسی است!

نکاتی کاربردی در مورد CSS (جلسه 15) : اعمال کلاسهای کاذب برای المنتهای Void

0 277 ۱۲ دی ۹۵

در این مطلب با ادامه نکاتی کاربردی در مورد CSS در خدمتتون هستیم.
css-style

کلاسهای کاذب به بعضی از المنتهای خالی نیز اعمال میشن

شاید برای شما هم پیش اومده باشه که بخواید یک کلاس کاذب رو برای تصاویر یا المنتهای فرم قرار بدین. این مورد کار نمیکنه چون کلاسهای کاذب بر روی المنتهای Replaced تاثیری نداره. شاید شما فکر کنید که همه المنتهای void که هیچ تگ دیگه ای درونشون قرار نداره، جزء این دسته حساب میشن و نمیشه برای اونا کلاسهای کاذب رو قرار داد و اعمال کرد. اگه این فکر رو میکنید در اشتباه هستید!

شما میتونین کلاسهای کاذب رو به تعدادی از المنتهای Void که Replaced Element نیستن اعمال کنید. همونطور که در دموی زیر مشاهده میکنید برای المنت پوچ و خالی hr این کار رو انجام دادیم:

همونطور که دیدید با استفاده از تگ hr پس زمینه رو مشخص کردیم و رنگ متن و border اون رو هم قرار دادیم و درون کلاس کاذب before اون، دو تا کاراکتر یونیکد مربوط به موسیقی و درون کلاس کاذب after اون هم متنی رو قرار دادیم تا به ترتیب ابتدا و انتهای اون نمایش داده بشن.

تگ img یا همون تصویر هم جزء المنتهای Replaced هست و نمیشه برای اون کلاسهای کاذب رو قرار داد ولی اگر img مشکلی براش به وجود بیاد و لود نشه کلاسهای کاذب برای اون اجرا و اعمال میشن. اگه یادتون باشه اخیرا ترفندی بر روی سایت قرار گرفت که درون اون به استایل دهی تصاویر مشکل دار پرداختیم و تکنیک اصلی که در اون ترفند بکار رفت، همین استفاده از کلاس کاذب برای تگ img بود.

شما حتی میتونین المنتهایی مثل meta و link که درون head قرار میگیرن رو براشون کلاسهای کاذب رو اعمال کنید و کاری کنید که نمایش داده بشن. برای اینکار باید ویژگی display: block رو براشون قرار بدین. دموی زیر رو مشاهده کنید که به ازای هر meta و link یک خروجی قرار گرفته:

میبینید که به راحتی تونستیم به المنتهایی که Void یا خالی هستن هم کلاسهای کاذب رو اعمال کنیم. این المنتها همونطور که میدونید تگ بسته شونده یا Closing tag ندارن و با این وجود بازم تونستیم براشون کلاس کاذب رو اعمال کنیم.

در جلسات بعدی با ادامه نکات در خدمتتون هستیم.

امیدوارم از این جلسه خوشتون اومده باشه.

موفق و پیروز باشید.

یا علی

Source

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها اولین دیدگاه این مطلب را ارسال کنید.

ارسال دیدگاه

ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

:: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
عضویت/ ورود سریع با :
در حال اتصال ...

ورود به سایت

ورود سریع با :
در حال اتصال ...

جستجو در سون لرن

عبارت :
7LearnTelegram