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

‏  5 دقیقه
۱۴ مهر ۱۳۹۳

در قسمت قبلی یه سری از جزئیات پنل 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 روی اون خط میکشه.

9

 

یکی از امکاناتی که Inspector در اختیار ما میزاره ، color picker هست. هر جایی که رنگی تعریف شده باشه ، یک مربع کوچیک کشیده میشه و رنگ رو نشون میده.

اگر از این رنگ خوشتون نیومد ، میتونین روی این مربع کلیک کنید تا color picker باز بشه. بصورت زیر :

10

در اینجا 3 تا کار میتونین انجام بدین :

  1. میتونین هم کلیک کنید و یا drag کنید ، تا به رنگ مورد نظرتون برسید. در این قسمت تیره یا روشنش میکنیم.
  2. میتونین رنگهای دیگه ای رو انتخاب کنید. در این قسمت بازه ی رنگ رو تغییر میدیم.
  3. به وسیله ی این قسمت میتونین آلفا ، یا شفافیت رو کم و زیاد بکنید.

اگر دکمه Shift رو نگه دارین و روی اون مربع کلیک کنید ، قالب رنگ بین hsl و rgb و hexa جابجا میشه و میتونین اونو کپی کنید و ازش استفاده کنید. اگر رنگمون شفافیت داشته باشه به دو صورت hsla و rgba میتونه نوشته بشه.

11

حالا اگر تب Computed رو انتخاب کنیم ، یک سری کد درونش قرار دارن. همونطور که قبلا گفتم ، کدهای CSS با هم رقابت میدن و طبق یک الگوریتم خاص کدهای قویتر انتخاب میشن و روی عنصر اثر میزارن.

قسمت Computed تمام کدهایی که در رقابت پیروز شدن رو نمایش میده. با زدن تیک Show inherited properties استایلهای پیش فرض مرورگر رو هم که بازنویسی نشدن رو نشون میده و میتونیم اونارو ببینیم.

12

در بالای قسمت Computed یک مربع وجود داره که مفهوم CSS BOX Model رو بهمون نشون میده.

13

  1. این قسمت مربوط به width و height خود المنت هست.
  2. مربوط به padding هست
  3. مربوط به border
  4. مربوط به margin

همونطور که در تصویر بالا میبینید ، padding و border و margin رو میتونین در هر چار جهت راست ، بالا ، چپ و پایین مشخص کنید. برای اینکار کافیه که روی علامت  -  دو بار کلیک کنید تا به حالت ویرایش در بیاد.

14

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

خب خسته نباشید.

امیدوارم موفق باشید. یا علی

چه امتیازی به این مقاله می دید؟
نویسنده محمد اسفندیاری
بسیار به طراحی وب علاقمندم و به سرعت در حال یادگیری تمام مباحث پیشرفته هستم و دوست دارم که به دیگران هم یاد بدهم.

جلسات دوره

نیاز به لاگین

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

نظرات کاربران

fatemeh

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

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

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