הצגה ושינוי של שירות CSS

Kayce Basques

Sofia Emelianova

כדאי לעיין במדריכים האינטראקטיביים האלה כדי ללמוד את העקרונות הבסיסיים של הצגה ושינוי של CSS של דף באמצעות Chrome DevTools.

הצגת הקוד של CSS של רכיב

1. לוחצים לחיצה ימנית על הטקסט Inspect me! שבהמשך ובוחרים באפשרות בדיקה. החלונית Elements ב-DevTools נפתחת.

   בדיקה שלי

2. שימו לב לרכיב Inspect me! שמודגש בכחול בעץ ה-DOM.

   

3. בעץ ה-DOM, מחפשים את הערך של המאפיין data-message לרכיב Inspect me!.

4. מזינים את הערך של המאפיין בתיבת הטקסט שבהמשך.

5. בכרטיסייה Elements‏ > Styles, מחפשים את כלל הכיתה aloha.

   בכרטיסייה Styles מפורטים כללי ה-CSS שחלים על הרכיב שנבחר בעץ ה-DOM, שעדיין אמור להיות הרכיב Inspect me!.

6. הכיתה aloha מצהירה על ערך ל-padding. מזינים את הערך הזה ואת היחידה שלו ללא רווחים בתיבת הטקסט שבהמשך.

אם רוצים להצמיד את חלון כלי הפיתוח לצד שמאל של אזור התצוגה, כמו בצילום המסך בשלב הראשון, אפשר לעיין במאמר שינוי המיקום של כלי הפיתוח.

הוספת הצהרת CSS לרכיב

משתמשים בכרטיסייה Styles (סגנונות) כשרוצים לשנות או להוסיף הצהרות CSS לרכיב.

1. לוחצים לחיצה ימנית על הטקסט Add a background color to me! שבהמשך ובוחרים באפשרות בדיקה.

   הוספת צבע רקע אליי!

2. לוחצים על element.style בחלק העליון של הכרטיסייה Styles.

3. מקלידים background-color ומקישים Enter.

4. מקלידים honeydew ומקישים Enter. בעץ ה-DOM אפשר לראות שהוצהר סגנון מוטבע לרכיב.

הוספת סיווג CSS לרכיב

בכרטיסייה Styles אפשר לראות איך נראה רכיב כשמחילים עליו או מסירים ממנו סיווג CSS.

1. לוחצים לחיצה ימנית על הרכיב Add a class to me! שבהמשך ובוחרים באפשרות בדיקה.

   הוספת כיתה אליי

2. לוחצים על ‎.cls. תיבת טקסט תופיע בכלי הפיתוח, שבה תוכלו להוסיף כיתות לרכיב שנבחר.

3. מקלידים color_me בתיבת הטקסט הוספת כיתה חדשה ומקישים על Enter. תיבה לסימון תופיע מתחת לתיבת הטקסט Add new class, שבה תוכלו להפעיל או להשבית את הכיתה. אם הוקצו לאלמנט Add a class to me! כיתות אחרות, תוכלו להפעיל או להשבית אותן גם מכאן.

הוספת מצב מדומה לכיתה

משתמשים בכרטיסייה Styles כדי להחיל מצב פסאודו של CSS על רכיב.

1. מעבירים את העכבר מעל הטקסט Hover over me! שבהמשך. צבע הרקע ישתנה.

   מעבירים את העכבר מעלי!

2. לוחצים לחיצה ימנית על הטקסט Hover over me! ובוחרים באפשרות בדיקה.

3. בכרטיסייה Styles, לוחצים על :hov.

4. מסמנים את התיבה :hover. צבע הרקע ישתנה כמו קודם, גם אם לא תעבירו את העכבר מעל האלמנט.

מידע נוסף זמין במאמר החלפת מצב של פסאודו-סיווג.

שינוי המאפיינים של רכיב

משתמשים בתרשים האינטראקטיבי Box Model בכרטיסייה Styles כדי לשנות את הרוחב, הגובה, המילוי, השוליים או אורך הגבול של רכיב.

1. לוחצים לחיצה ימנית על הרכיב Change my margin! שבהמשך ובוחרים באפשרות בדיקה.

   שינוי השוליים

2. כדי להציג את Box Model, לוחצים על הלחצן Show sidebar (הצגת סרגל הצד) בסרגל הפעולות בכרטיסייה Styles (סגנונות).

3. בתרשים Box Model בכרטיסייה Styles, מעבירים את העכבר מעל padding. האזור הפנימי של הרכיב מודגש באזור התצוגה.

4. לוחצים לחיצה כפולה על השוליים הימניים בקטע Box Model. לאלמנט אין כרגע שוליים, ולכן הערך של margin-left הוא -.

5. מקלידים 100 ומקישים על Enter.

ברירת המחדל של Box Model היא פיקסלים, אבל אפשר להזין גם ערכים אחרים, כמו 25% או 10vw.

נקודת מפתח: לחלופין, בהצהרות הכללים בכרטיסייה Styles, אפשר לשנות את מאפייני האורך ואת היחידות שלהם באמצעות הסמן.