آموزش inspect element

قصد دارم به روان ترین روش ممکن، به آموزش inspect element بپردازم

خیلی سریع میریم سراغ آموزش

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

هر قسمتی از صفحه که می خواهید کلیک راست کنید

آخرین گزینه که همان inspect element می باشد را انتخاب کنید

حالا صفحه شما به دو قسمت کلی تقسیم شده است.

در بالا سایت را مشاهده می کنید و در پایین کد های سایت را می بینید.

البته خود قسمت پایینی هم مجددا به دو قسمت اصلی تقسیم شده است. سمت چپ که بززگتر است مخصوص انتخاب قسمت مورد نظر برای تغییرات می باشد و سمت راست که کوچک تر است برای اعمال تغییرات استفاده می شود.

با یک مثال کاربردی دیگر این قسمت را آموزش می دهیم.

مثال: ما می خواهیم لوگوی سایت را کمی به سمت پایین بیاوریم.

جواب: بر روی لوگو رفته و کلیک راست می کنیم  سپس inspect element را انتخاب می کنیم.

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

در همین حال به قسمت سمت راست نگاه کنید، متوجه می شوید که کد های مربوط به جزئیات لوگو نمایان شده و شما به راحتی می توانید آن ها را تغییر دهید.

برای جواب دادن به مثال می بایست در سطر سوم کد margin-top: –50px; را تغییر دهید.

مثلا آن را به margin-top10px; تغییر دهید، مشاهده می کنید که لوگوی سایت پایین آمد.

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

چه کنیم که این تغییرات در سایت ذخیره شود و برای همه قابل مشاهده شود.

روش ذخیره تغییرات در inspect element:

برای این کار پس از تغییرات مد نظر بر روی کلمه index در بالای همین قسمت کلیک می کنیم، مشاهده می کنید که در قسمت سمت چپ محتویات صفحه دچار تغییر شد و در همین لحظه برای مدت یک ثانیه یک خط را با رنگ زرد نمایش داد.

این همان کدی است که ما تغییر داده ایم و برای اعمال تغییرات در سایت به آن احتیاج داریم.

آن را کپی نمایید.

محل قرار دادن تغییرات در inspect element:

اگر سایت شما با وردپرس ، جوملا ، دروپال ، پرستا شاپ و یا دیگر سیستم های مدیریت محتوا ساخته شده می بایست به قسمت CSS در تنظیمات قالب رفته و این سطر کد  را در آنجا paste و سپس ذخیره نمایید.

اما اگر سایت شما با هر روشی غیر از این ساخته شده باشد، می بایست به فایل Style.css رفته و این خط کد را در آنجا paste و سپس ذخیره نمایید.

امیدوارم مفید بوده باشد

بدون دیدگاه

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

خانهپروژه هامحصولاتتماس با ما