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 به یک عنصر استفاده کنید.

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

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

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

3. در تب Styles ، روی :hov کلیک کنید.

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

برای اطلاعات بیشتر، به تغییر یک کلاس شبه مراجعه کنید.

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

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

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

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

2. برای دیدن مدل جعبه ، روی آن کلیک کنید نمایش دکمه نوار کناری در نوار عمل در تب Styles .

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

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

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

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

نکته کلیدی: از طرف دیگر، در اعلان‌های قوانین در تب Styles ، می‌توانید ویژگی‌های طول و واحدهای آن‌ها را با اشاره گر خود تغییر دهید.