مرجع ویژگی های CSS

Kayce Basques

Jecelyn Yeen

Sofia Emelianova

در این مرجع جامع از ویژگی‌های Chrome DevTools مربوط به مشاهده و تغییر CSS، گردش‌های کاری جدید را کشف کنید.

برای یادگیری اصول اولیه، مشاهده و تغییر CSS را ببینید.

یک عنصر را انتخاب کنید

پنل Elements DevTools به شما امکان می دهد CSS یک عنصر را در یک زمان مشاهده یا تغییر دهید.

در تصویر، عنصر h1 که در درخت DOM به رنگ آبی مشخص شده است، عنصر انتخاب شده است. در سمت راست، سبک های عنصر در تب Styles نشان داده شده است. در سمت چپ، عنصر در پنجره نمای برجسته شده است، اما فقط به این دلیل که ماوس روی آن در درخت DOM قرار دارد.

برای آموزش مشاهده CSS یک عنصر را ببینید.

راه های زیادی برای انتخاب یک عنصر وجود دارد:

• در نمای خود، روی عنصر کلیک راست کرده و Inspect را انتخاب کنید.
• در DevTools، روی Select an element کلیک کنید یا Command + Shift + C (Mac) یا Control + Shift + C (ویندوز، لینوکس) را فشار دهید، و سپس روی عنصر در viewport کلیک کنید.
• در DevTools، روی عنصر موجود در درخت DOM کلیک کنید.
• در DevTools، یک کوئری مانند document.querySelector('p') در کنسول اجرا کنید، روی نتیجه کلیک راست کرده و سپس Reveal in Elements panel را انتخاب کنید.

مشاهده CSS

از تب Elements > Styles و Computed برای مشاهده قوانین CSS و تشخیص مشکلات CSS استفاده کنید.

با پیوندها پیمایش کنید

تب Styles پیوندها را در مکان‌های مختلف به مکان‌های مختلف دیگر نشان می‌دهد، از جمله اما نه محدود به:

• در کنار قوانین CSS، به شیوه نامه ها و منابع CSS. چنین پیوندهایی پانل منابع را باز می کنند. اگر شیوه نامه کوچک شده است، به ایجاد یک فایل کوچک شده قابل خواندن مراجعه کنید.
• در بخش های Inherited from ... به عناصر والد.
• در فراخوانی های var() به اعلان های