CSS را مشاهده و تغییر دهید

Kayce Basques

Sofia Emelianova

این آموزش های تعاملی را تکمیل کنید تا اصول مشاهده و تغییر CSS یک صفحه را با استفاده از ابزار توسعه کروم بیاموزید.

CSS یک عنصر را مشاهده کنید

1. Inspect me! را در زیر بنویسید و Inspect را انتخاب کنید. پانل عناصر DevTools باز می شود.

   مرا بازرسی کن!

2. Inspect me! عنصر آبی در درخت DOM برجسته شده است.

   

3. در درخت DOM ، مقدار ویژگی data-message برای Inspect me! عنصر

4. مقدار مشخصه را در کادر متنی زیر وارد کنید.

5. در بخش Elements > Styles ، قانون کلاس aloha را پیدا کنید.

   صفحه Styles قوانین CSS را فهرست می‌کند که برای هر عنصری که در درخت DOM انتخاب شده است اعمال می‌شود، که همچنان باید Inspect me! عنصر

6. کلاس aloha یک مقدار را برای padding اعلام می کند. این مقدار و واحد آن را بدون فاصله در کادر متن زیر وارد کنید.

اگر می‌خواهید پنجره DevTools خود را به سمت راست نمای خود متصل کنید، مانند تصویر صفحه در مرحله یک، به تغییر محل DevTools مراجعه کنید.

یک اعلان CSS به یک عنصر اضافه کنید

وقتی می‌خواهید اعلان‌های CSS را به یک عنصر تغییر دهید یا به آن اضافه کنید، از پنل Styles استفاده کنید.

1. روی Add a background color to me! را در زیر بنویسید و Inspect را انتخاب کنید.

   یک رنگ پس زمینه به من اضافه کنید!

2. element.style نزدیک بالای صفحه Styles کلیک کنید.

3. background-color تایپ کنید و Enter را فشار دهید.

4. honeydew را تایپ کرده و Enter را فشار دهید. در درخت DOM ، می توانید ببینید که یک اعلان سبک درون خطی به عنصر اعمال شده است.

یک کلاس CSS به یک عنصر اضافه کنید

از پنجره Styles استفاده کنید تا ببینید وقتی یک کلاس CSS روی یک عنصر اعمال می شود یا از آن حذف می شود، یک عنصر چگونه به نظر می رسد.

1. روی Add a class to me! عنصر زیر را انتخاب کنید و Inspect را انتخاب کنید.

   یک کلاس به من اضافه کن!

2. cls را کلیک کنید. DevTools یک کادر متنی را نشان می دهد که در آن می توانید کلاس ها را به عنصر انتخاب شده اضافه کنید.

3. color_me را در کادر متنی Add new class تایپ کنید و سپس Enter را فشار دهید. یک چک باکس زیر کادر متنی افزودن کلاس جدید ظاهر می‌شود، جایی که می‌توانید کلاس را روشن و خاموش کنید. اگر Add a class to me! عنصر دارای کلاس های دیگری بود، شما همچنین می توانید آنها را از اینجا تغییر دهید.

یک حالت شبه به یک کلاس اضافه کنید

از پنجره Styles برای اعمال یک حالت شبه CSS به یک عنصر استفاده کنید. DevTools از :active ، :focus ، :focus-within ، :target ، :hover ، :visited یا focus-visible پشتیبانی می کند.

1. شناور بر روی Hover over me! متن زیر رنگ پس زمینه تغییر می کند.

   روی من شناور باش!

2. Hover over me! را پیامک کرده و Inspect را انتخاب کنید.

3. در قسمت Styles ، روی :hov کلیک کنید.

4. چک باکس :hover را علامت بزنید. رنگ پس‌زمینه مانند قبل تغییر می‌کند، حتی اگر در واقع روی عنصر قرار نگیرید.

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

از نمودار تعاملی Box Model در قسمت Styles برای تغییر عرض، ارتفاع، بالشتک، حاشیه یا طول حاشیه یک عنصر استفاده کنید.

1. Change my margin! عنصر زیر را انتخاب کنید و Inspect را انتخاب کنید.

   حاشیه ام را عوض کن!

2. برای دیدن مدل جعبه ، روی آن کلیک کنید نمایش دکمه نوار کناری در نوار عمل در صفحه سبک‌ها .

3. در نمودار Box Model در قسمت Styles ، نشانگر را روی padding قرار دهید. بالشتک عنصر در پنجره نمای برجسته شده است.

4. روی حاشیه سمت چپ در Box Model دوبار کلیک کنید. عنصر در حال حاضر حاشیه ندارد، بنابراین margin-left مقدار - .

5. 100 را تایپ کرده و Enter را فشار دهید.

مدل Box به صورت پیش‌فرض پیکسل‌ها را می‌پذیرد، اما مقادیر دیگری مانند 25% یا 10vw را نیز می‌پذیرد.