آموزش inspect element
قصد دارم به روان ترین روش ممکن، به آموزش inspect element بپردازم
خیلی سریع میریم سراغ آموزش
برای این کار ابتدا صفحه اول سایت ما را باز کنید
هر قسمتی از صفحه که می خواهید کلیک راست کنید
آخرین گزینه که همان inspect element می باشد را انتخاب کنید
حالا صفحه شما به دو قسمت کلی تقسیم شده است.
در بالا سایت را مشاهده می کنید و در پایین کد های سایت را می بینید.
البته خود قسمت پایینی هم مجددا به دو قسمت اصلی تقسیم شده است. سمت چپ که بززگتر است مخصوص انتخاب قسمت مورد نظر برای تغییرات می باشد و سمت راست که کوچک تر است برای اعمال تغییرات استفاده می شود.
با یک مثال کاربردی دیگر این قسمت را آموزش می دهیم.
مثال: ما می خواهیم لوگوی سایت را کمی به سمت پایین بیاوریم.
جواب: بر روی لوگو رفته و کلیک راست می کنیم سپس inspect element را انتخاب می کنیم.
مشاهده می کنید که اکنون هم در خود سایت و هم در قسمت پایین سمت چپ لوگو و کد کلاس آن انتخاب گردیده.
در همین حال به قسمت سمت راست نگاه کنید، متوجه می شوید که کد های مربوط به جزئیات لوگو نمایان شده و شما به راحتی می توانید آن ها را تغییر دهید.
برای جواب دادن به مثال می بایست در سطر سوم کد margin-top: –50px; را تغییر دهید.
مثلا آن را به margin-top: 10px; تغییر دهید، مشاهده می کنید که لوگوی سایت پایین آمد.
اکنون اگر صفحه را reload نمایید می بینید که تغییر اعمال شده از بین خواهد رفت.
چه کنیم که این تغییرات در سایت ذخیره شود و برای همه قابل مشاهده شود.
روش ذخیره تغییرات در inspect element:
برای این کار پس از تغییرات مد نظر بر روی کلمه index در بالای همین قسمت کلیک می کنیم، مشاهده می کنید که در قسمت سمت چپ محتویات صفحه دچار تغییر شد و در همین لحظه برای مدت یک ثانیه یک خط را با رنگ زرد نمایش داد.
این همان کدی است که ما تغییر داده ایم و برای اعمال تغییرات در سایت به آن احتیاج داریم.
آن را کپی نمایید.
محل قرار دادن تغییرات در inspect element:
اگر سایت شما با وردپرس ، جوملا ، دروپال ، پرستا شاپ و یا دیگر سیستم های مدیریت محتوا ساخته شده می بایست به قسمت CSS در تنظیمات قالب رفته و این سطر کد را در آنجا paste و سپس ذخیره نمایید.
اما اگر سایت شما با هر روشی غیر از این ساخته شده باشد، می بایست به فایل Style.css رفته و این خط کد را در آنجا paste و سپس ذخیره نمایید.
امیدوارم مفید بوده باشد
بدون دیدگاه