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

קייס בסקית
קייס בסקית
סופיה אמליאנובה
סופיה אמליאנובה

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

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

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

    אני רוצה לבדוק!

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

    הרכיב מודגש.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    הוסף לי כיתה!

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

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

המערכת מחילה את הסיווג color_me על הרכיב.

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

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

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

    רחף מעלי!

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

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

  4. מסמנים את התיבה :hover (מעבר בריחוף). צבע הרקע משתנה כמו קודם, למרות שאתם לא מעבירים את העכבר מעל הרכיב.

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

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

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

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

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

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

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

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

  5. מקלידים 100 ומקישים על Enter. שינוי השוליים השמאליים של הרכיב,

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