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

Kayce Basques

Sofia Emelianova

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

הצגת CSS של רכיב

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

   בדיקה שלי

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

   

3. ב-DOM Tree, מוצאים את הערך של המאפיין 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.

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

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