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

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



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

Inspector مرورگر Chrome ( قسمت سوم ) : آشنایی با پنل style

0 2192 ۱۲ مهر ۹۳

سلام دوستان

اول از همه بابت تاخیر به وجود اومده عذر میخوام.

در این مطلب میخوام شما رو با پنل style آشنا کنم. میشه گفت این پنل برای کسانی که طراحی ظاهر  (Interface) میکنن خیلی بیشتر کاربرد داره.

1

همون طور که در تصویر بالا میبینید ، این پنل در قسمت راست تب Elements موجود هست. بالای این پنل 5 تا قسمت وجود داره :

  • Styles
  • Computed
  • Event Listeners
  • Dom Breakpoints
  • Properties

در ابتدا و بصورت پیش فرض قسمت Styles نمایش داده میشه. وقتی عنصری رو Inspect میکنین ، این قسمت تمام کدهای CSS ای که ، به نوعی بر روی این عنصر اثر دارن رو نشون میده.

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

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

2

مورد دیگه ای که وجود داره اینه که ، بعضی اوقات با بخشهایی مواجه میشیم که پس زمینه ی اونا ، طوسی رنگ هست. در تصویر بالا من دورش رو کادر کشیدم. بالای این بخشها عبارت user agent stylesheet نوشته شده. این بخشها استایلهای پیش فرض خود مرورگر هستند ، که فقط خواندنی هستند. یعنی نمیشه اونا رو غیر فعال کرد. اگه بخوایم اونا رو تغییر بدیم ، باید با استفاده از کدهایی که ارجحیت بیشتری دارند ، اونا رو بازنویسی  (overwrite) کنیم.

3

در قسمت راست و بالای هر بخشی ، یک لینک و آدرس وجود داره. شاید بگین بدرد چی میخوره. فرض کنین شما میخواین بفهمین که این دستورات CSS در چه فایلی قرار دارن و کجا نوشته شدن. همونطور که میبینید ، نوشته شده  style.css:3 . یعنی کدهای این بخش در فایل style.css و در خط سوم نوشته شده. با کلیک کردن بر روی این فایل به تب Sources هدایت میشید و میتونید کدهارو ببینید.

اما اگه بخواید این کدهارو ویرایش کنید ، باید برین فایل style.css رو پیدا کنید و اونو با یه Editor باز کنید و اقدامات لازم رو انجام بدین.

4

بالای بعضی از قسمتها media="all" نوشته شده. این قسمت بیشتر مربوط به طراحی Responsive و media query ها میشه. هر استایلی در media خاصی اجرا میشه ، که توسط طراح مشخص میشه. مثلا میتونه all یا screen یا print و .... باشه.

5

در قسمت بالا و سمت راست یه icon وجود داره که وظیفش شبیه به همون Force Element State هست که در جلسات قبل بهش اشاره کردم و هیچ فرقی با هم ندارن.

6

همونطور که در تصویر بالا مشاهده میکنید ، اگر بر روی علامت  +  کلیک کنیم ، یک بخش جدید برای نوشتن کدهای CSS در اختیارمون قرار میگیره. در اینجا میتونین .loading رو تغییر بدین و بعد از اون دکمه Tab رو بزنید تا بتونید کدهای مورد نظر رو درونش بنویسید. در قسمت 3 هم عبارت via inspector نوشته شده است. یعنی این استایلها توسط خود Chrome Inspector اعمال شده و فقط برای تست کردن میباشد و با refresh کردن صفحه از بین خواهند رفت.

7

هر وقت عنصری رو Inspect میکنین ، در بالای پنل Styles ، بخشی بنام element.style وجود داره. توجه داشته باشید که هر کدی که در این قسمت بنویسید ، فقط و فقط به همون عنصری که Inspect کردین نسبت داده میشه و کاری به class و id و ... نداره.

8

در قسمت پایین پنل Styles ، بخشی وجود داره که به وسیله ی اون میتونین در کدهای CSS جستجو کنید و عبارت مورد جستجوی خودتون رو پیدا کنید.

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

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

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

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

ارسال دیدگاه

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

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

ورود به سایت

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

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

عبارت :
7LearnTelegram