Inspector مرورگر Chrome ( قسمت چهارم ) : پنل style ( ادامه )

- visibility ۲ mode_comment

در قسمت قبلی یه سری از جزئیات پنل Styles رو خدمتون گفتم. در این جلسه میخوام کاملترش کنم.

1

همونطور که در تصویر بالا میبینید ، هر وقت که بر روی بخشی از کدها هاور میکنیم ، کنار هر کد CSS یک Checkbox ظاهر میشه. با استفاده از این چک باکس میتونید اثر یک کد CSS رو بطور موقت غیر فعال و اونو تست کنید. هر وقت که تیک رو بردارید ، یک خط روی اون کد کشیده میشه.

2

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

3

مانند بیشتر Editor ها ، Inspector هم هر گاه یک حرف رو بنویسید ، بصورت اتوماتیک باکسی باز میشه و شما میتونین از دستورات پیشنهاد شده استفاده کنید. در باکسی که باز میشه میتونین کد مورد نظرتونو با کلیدهای بالا و پایین بر روی کیبورد مشخص کنید.

مثلا در تصویر بالا وقتی من حرف p رو نوشتم ، خودش بصورت اتوماتیک padding نوشته. البته کم رنگتر. اگر همین padding رو بخواید ، کافیه کلید tab رو بزنید تا ثبت بشه و مقدار روبروی padding در حالت ویرایش قرار بگیره. بصورت زیر :

4

بعد از اینکه کار ویرایشتون تموم شد ، برای اینکه از حالت ویرایش خارج بشید کافیه که یه جای دیگه کلیک کنید.

5

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

6

همونطور که در تصویر بالا نشون دادم ، میتونین خاصیت رو بنویسید و بعد با زدن کلید tab ، مقدار اون رو هم تعیین کنید. بعد از اینکه کارتون تموم شد دو راه دارین.

  1. اگر قصد دارین دستورات دیگه ای هم اضافه کنید ، هر وقت اولی تموم شد ، با زدن دکمه Enter یا tab میتونین دستور بعدی رو هم قرار بدین.
  2. اگر دیگه قصد اضافه کردن ندارین ، فقط کافیه بعد از تموم شدن کار ، یجای دیگه کلیک کنید.

7

برای تغییر دادن مقادیر عددی ، روشهای دیگه ای هست که میتونه به طراحان خیلی کمک بکنه :

  • اگر مانند شکل بالا ، عددی در حالت ویرایش باشه ، با زدن دکمه بالا روی کیبورد ، یک واحد بهش اضافه و با دکمه پایین ، یک واحد از اون کم میشه.
  • حالا اگر Shift رو نگه دارین و کلید های بالا و پایین رو فشار بدین ، ده تا ده تا ، زیاد و کم میشه.
  • اگر Shift + Page Up رو بزنید ، 100 تا اضافه میشه و اگر Shift + Page Down رو بزنید ، 100 واحد کم میشه.

 

8

 

گاهی اوقات ممکنه که ، کنار بعضی از کدهای یک علامت تعجب زرد رنگ ظاهر بشه و روی اون کد خط کشیده بشه. یکی از دلایلش اینه که ، مقدار نامعتبر قرار دادیم. مثلا در تصویر بالا نوشتیم :   padding : none

همونطور که میدونید ، چنین مقداری برای padding تعریف نشده و به همین علت Inspector روی اون خط میکشه.

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

خیلی ممنون و متشکر از مطالب مفید و بیان گویاتون…
واقعا خسته نباشید..

محمد اسفندیاری

خواهش میکنم
موفق باشید

نیاز به لاگین

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