آشنایی بیشتر با 50 ویژگی جالب CSS (جلسه 2) : ویژگی all

- visibility ٠ mode_comment

css3 attributes

مورد 1 : ویژگی all

شما با استفاده از ویژگی all میتونین همه ویژگی های مربوط به یک المنت، به جزء ویژگی های direction و unicode-bidi که جهت متن رو مشخص میکنن، رو به حالت initial و inherited بازنشانی و بازگردانی کنید و همه چیز رو به حالت اولیه و پیش فرض برگردانید. همونطور که میدونید بعضی از ویژگی ها زمانی که تعریف میشن، به فرزندهای اون المنت هم به ارث میرسن و بهشون اعمال میشن. مثلا اگر شما درون یک div، سه تگ پاراگراف داشته باشید و برای div، فونت و سایز متن رو مشخص کنید، این استایل به همه p ها نیز اعمال می شود. حالا شما میتونین با استفاده از ویژگی all، این روند رو کنترل کنید و مشخص کنید که ویژگی های یک المنت از پدرش به ارث برسه یا خیر. پشتیبانی مرورگرها از این ویژگی روز به روز بهتر میشه. میتونین درون سایت Caniuse نگاهی به وضعیت پشتیبانی این ویژگی داشته باشید.

ویژگی all سه مقدار رو قبول میکنه که به شرح زیر هستن:

  • initial : اگر ویژگی all رو برابر با مقدار initial قرار بدیم، همه ویژگی های مربوط به اون المنت به حالت اولیه و تنظیماتی که در CSS Specification تعریف شده است، برمیگرده.
  • inherit : با اینکار، المنت مورد نظر همه استایلهایی که به پدرش نسبت داده شده است رو بصورت کامل به ارث میبره و هم شکل پدر خود میشه.
  • unset : این مقدار باعث میشه که اون ویژگی هایی که از المنتهای پدر به ارث میرسن، بصورت نرمال عمل کنن. پس در این حالت المنت مورد نظر ویژگی های قابل به ارث رسیدن رو به ارث میبره. اگر هیچ ویژگی نباشه که المنت اون رو به ارث ببره، مقدار اولیه و چیزی که درون CSS Specification مشخص شده، برای المنت مورد نظر اعمال میشه.

برای آشنایی بیشتر با این ویژگی مثال زیر رو ببینید: همونطور که در مثال بالا دیدید، کدهای HTML زیر قرار داده شده اند:

میبینید که 4 دکمه قرار داده شده و هر کدوم از اونا وظیفه خاصی رو بر عهده دارند. همچنین چندتا div قرار داده شده که میخایم با استفاده از اونا مسائل مربوط به ارث رسیدن رو مشخص کنیم. ما میایم برای container که پدر همه المنتهای دیگه هست، استایلهای زیر رو قرار میدیم:

میبنید که 5 تا ویژگی مشخص شدن و همه اونا استایل مربوط به متن رو مشخص میکنن. همه این ویژگی ها قابلیت به ارث رسیده شدن توسط فرزندان رو دارند. برای فرزند این المنت که کلاس parent داره، استایل زیر رو قرار میدیم:

از میان ویژگی هایی که در بالا قرار داده شده، فقط ویژگی color هست که قابلیت به ارث رسیده شدن رو داره و بقیه موارد نمیتونن توسط فرزندان به ارث برسن. خب حالا 4 تا دکمه داریم. یکی یکی اونا رو بررسی میکنیم.

  1. Remove "all" property : با کلیک بر روی این دکمه، کلا این ویژگی حذف میشه و از اون استفاده نمیشه.
  2. unset : با کلیک بر روی این دکمه هم همونطور که در بالا توضیح داده شد، فقط اون ویژگی هایی که قابلیت به ارث رسیده شدن رو دارن، توسط فرزندان به ارث میرسن. خروجی این مقدار بصورت زیر هست:unset
  3. inherit : با اینکار همه ویژگی های مربوط به پدر، چه اونایی که قابلیت به ارث رسیده شدن رو دارن و چه اونایی که ندارن، توسط المنت مورد نظر به ارث میرسه و استایلش شبیه به پدرش میشه. بصورت زیر:inherit
  4. initial : با اینکار همه ویژگی های مربوط به المنت، به حالت اولیه و کارخانه برمیگرده و بصورت زیر میشه:initial

میبینید که چطور میشه با استفاده از ویژگی all، روند به ارث رسیدن رو کنترل کرد. برای مطالعه بیشتر در مورد ویژگی all میتونین به این لینک مراجعه کنید.

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

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

موفق باشید

یا علی

Source

comment دیدگاه کاربران

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.