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

Kayce Basques

Sofia Emelianova

המדריכים האינטראקטיביים האלה לומדים איך להציג ולשנות CSS בדף באמצעות כלי הפיתוח ל-Chrome.

הצגת CSS של רכיב

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

   בדקו אותי.

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

   

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

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

5. בחלונית רכיבים > סגנונות, מאתרים את כלל המחלקה aloha.

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

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

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

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

אפשר להשתמש בחלונית סגנונות כשרוצים לשנות או להוסיף הצהרות CSS לרכיב.

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

   הוסף לי צבע רקע!

2. לוחצים על element.style בחלק העליון של החלונית סגנונות.

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

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

הוספת מחלקה של CSS לרכיב

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

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

   הוסף כיתה אליי!

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

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

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

משתמשים בחלונית סגנונות כדי להחיל פסאודו-מצב של CSS על רכיב. כלי הפיתוח תומכים ב-:active, ב-:focus, ב-:focus-within, ב-:target, ב-:hover, ב-:visited או ב-focus-visible.

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

   רחף מעלי!

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

3. בחלונית סגנונות, לוחצים על :hov.

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

שינוי המידות של רכיב

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

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

   שנה את השוליים שלי!

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

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

4. לוחצים לחיצה כפולה על השוליים השמאליים במודל התיבה. לרכיב אין כרגע שוליים, ולכן ל-margin-left יש ערך של -.

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

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

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