آیا می دانید میانگین رضایت دانشجویان سون لرن از دوره ها، بیش از 94% می باشد!

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

0 493 ۱۷ بهمن ۹۵

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

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

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

ارسال دیدگاه

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

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

ورود به سایت

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

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

عبارت :
7LearnTelegram