עיון בתכונות CSS

Kayce Basques
Jecelyn Yeen
Sofia Emelianova
Sofia Emelianova
GitHub

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

למידע בסיסי, אפשר לעיין במאמר הצגה ושינוי של CSS.

בחירת רכיב

בחלונית רכיבים של כלי הפיתוח ניתן להציג או לשנות את ה-CSS של רכיב אחד בכל פעם.

דוגמה לרכיב שנבחר.

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

למדריך מפורט בנושא הצגת ה-CSS של רכיב.

יש הרבה דרכים לבחור רכיב:

  • באזור התצוגה, לוחצים לחיצה ימנית על הרכיב ובוחרים באפשרות בדיקה.
  • בכלי הפיתוח, לוחצים על בחירת רכיב בחירת רכיב או מקישים על Command+Shift+C (Mac) או על Control+Shift+C (Windows או Linux), ואז לוחצים על הרכיב באזור התצוגה.
  • בכלי הפיתוח, לוחצים על הרכיב בעץ ה-DOM.
  • ב-DevTools, מריצים שאילתה כמו document.querySelector('p') ב-Console, לוחצים לחיצה ימנית על התוצאה ובוחרים באפשרות Reveal in Elements panel.

הצגת שירות ה-CSS

תוכלו להשתמש בכרטיסיות רכיבים > סגנונות ומחושב כדי להציג כללי CSS ולאבחן בעיות ב-CSS.

בכרטיסייה סגנונות מוצגים קישורים במקומות שונים למקומות אחרים, לרבות, אך לא רק:

  • לצד כללי CSS, לגיליונות סגנונות ומקורות CSS. קישורים כאלה פותחים את החלונית מקורות. אם גיליון הסגנונות מוקטן, צריך לעיין במאמר הגדרת קובץ מוקטן כקריא.
  • בקטעים עבר בירושה מ ... לרכיבי הורה.
  • בקריאות של var(), להצהרות של מאפיין מותאם אישית.
  • בנכסים מקוצרים של animation, ל-@keyframes.
  • קישורים למידע נוסף בהסברים הקצרים שבמסמכי התיעוד.
  • ועוד.

הנה כמה מהם מודגשים:

קישורים שונים מודגשים.

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

הצגת הסברים קצרים עם מסמכי תיעוד, ספציפיות וערכי מאפיינים מותאמים אישית של CSS

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

הצגת התיעוד של שירות CSS

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

הסבר קצר עם תיעוד על נכס CSS.

לוחצים על מידע נוסף כדי לעבור אל הפניה ל-CSS של MDN בנכס הזה.

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

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

ספציפית של בורר התצוגה

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

הסבר קצר עם משקל הספציפיות של בורר תואם.

הצגת הערכים של מאפיינים מותאמים אישית

מעבירים את העכבר מעל --custom-property כדי לראות את הערך שלו בהסבר קצר.

הערך של מאפיין מותאם אישית בהסבר קצר.

הצגת שירותי CSS לא חוקיים, שמבוטלים, לא פעילים ואחרים

בכרטיסייה סגנונות ניתן לזהות סוגים רבים של בעיות ב-CSS ומדגישה אותן בדרכים שונות.

ראו הסבר על CSS בכרטיסייה 'סגנונות'.

הצגה רק של ה-CSS שמוחל בפועל על רכיב

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

  1. בחירת רכיב.
  2. עוברים לכרטיסייה Computed בחלונית Elements.

הכרטיסייה 'מחושב'.

מסמנים את התיבה הצגת הכול כדי לראות את כל הנכסים.

אפשר לעיין בקטע הסבר על CSS בכרטיסייה 'מחושב'.

הצגה של מאפייני CSS בסדר אלפביתי

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

הצגת מאפייני CSS שעברו בירושה

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

לחלופין, גוללים בכרטיסייה סגנונות ומוצאים קטעים בשם Inherited from <element_name>.

הצג את הקטע &#39;עבר בירושה מ...&#39; בכרטיסייה &#39;סגנונות&#39;.

צפייה בכללים הכלליים ל-CSS

כללי הקביעה הם הצהרות CSS שמאפשרות לכם לשלוט בהתנהגות של ה-CSS. Elements > Styles (סגנונות) מציג את הכללים הבאים בקטעים ייעודיים:

הצגת @property כללי

ה-CSS ברמת הכלל @property מאפשר להגדיר מאפייני CSS מותאמים אישית באופן מפורש ולרשום אותם בגיליון סגנונות, בלי להפעיל JavaScript.

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

כדי לערוך כלל @property, לוחצים לחיצה כפולה על השם או על הערך שלו.

הצגת @supports כללי

הכרטיסייה סגנונות מציגה את כללי @supports ה-CSS, אם הם חלים על רכיב. לדוגמה, בודקים את הרכיב הבא:

הצגת @supports at-rules.

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

הצגת @scope כללי

בכרטיסייה סגנונות תוכלו לראות את כללי ה-CSS @scope אם הם חלים על רכיב מסוים.

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

אפשר להציג את הכלל @scope בתצוגה המקדימה הבאה:

  1. בודקים את הטקסט בכרטיס בתצוגה המקדימה.
  2. בכרטיסייה סגנונות, מאתרים את הכלל @scope.

הכלל @scope.

בדוגמה הזו, הכלל @scope מבטל את ההצהרה הגלובלית background-color של CSS לכל הרכיבים <p> שבתוך רכיבים עם מחלקה card.

כדי לערוך את הכלל @scope, לוחצים עליו לחיצה כפולה.

הצגת @font-palette-values כללי

@font-palette-values CSS at-rule מאפשר לכם להתאים אישית את ערכי ברירת המחדל של הנכס font-palette. רכיבים > סגנונות מציג את הכלל הזה בקטע ייעודי.

הצג את הקטע @font-palette-values בתצוגה המקדימה הבאה:

  1. בודקים את שורת הטקסט השנייה בתצוגה המקדימה.
  2. בקטע סגנונות, מאתרים את הקטע @font-palette-values.

הכלל @font-palette-values.

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

כדי לערוך את הערכים המותאמים אישית, לוחצים עליהם לחיצה כפולה.

הצגת מודל קופסה של רכיב

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

הוא תרשים של מודל Box.

כדי לשנות ערך, לוחצים עליו לחיצה כפולה.

חיפוש וסינון ב-CSS של רכיב

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

סינון הכרטיסייה &#39;סגנונות&#39;.

כדי לחפש גם נכסים שעברו בירושה בכרטיסייה Computed, מסמנים את התיבה Show All.

סינון הנכסים שעברו בירושה בכרטיסייה &#39;מחושב&#39;.

כדי לנווט בכרטיסייה Computed , אפשר לקבץ את הנכסים המסוננים בקטגוריות הניתנות לכיווץ, על ידי סימון האפשרות Group.

קיבוץ נכסים מסוננים.

אמולציה של דף במיקוד

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

ניתן לנסות לחקות דף שמתמקד בדף ההדגמה הזה:

  1. התמקדות ברכיב הקלט. רכיב נוסף מופיע מתחתיו.
  2. פותחים את כלי הפיתוח. החלון של כלי הפיתוח נמצא עכשיו בפוקוס במקום הדף, ולכן הרכיב נעלם שוב.
  3. ברכיבים > סגנונות, לחץ על :hov, סמן את check_box הדמיה של דף במיקוד וודא שרכיב הקלט נבחר. עכשיו אפשר לבדוק את הרכיב שמתחתיו.

לפני ואחרי הפעלת האפשרות &#39;סימולציה של דף שנמצא במוקד&#39;.

אותה אפשרות מופיעה גם בחלונית עיבוד.

החלפת מצב פסאודו-מחלקה

כדי להפעיל או להשבית סיווג פסאודו-סיווג, כמו :active, :focus, :focus-within, :target, :hover, :visited או focus-visible:

  1. בחירת רכיב.
  2. בחלונית רכיבים, עוברים לכרטיסייה סגנונות.
  3. לוחצים על :hov.
  4. מסמנים את הפסאודו-סיווג שרוצים להפעיל.

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

באזור התצוגה אפשר לראות שכלי הפיתוח מחילים את ההצהרה background-color על הרכיב, למרות שלא מעבירים מעליו את העכבר.

תוכלו לעיין במדריך האינטראקטיבי איך מוסיפים פסאודו-מצב לכיתה.

הצגת פסאודו-אלמנטים של ההדגשה שעברו בירושה

פסאודו-אלמנטים מאפשרים לעצב חלקים ספציפיים של אלמנטים. הדגשה של רכיבי פסאודו-רכיבים הם חלקים במסמך עם סטטוס 'נבחר', והם מעוצבים כ'מודגשים' כדי לציין את הסטטוס הזה למשתמש. לדוגמה, פסאודו-רכיבים כאלה הם ::selection, ::spelling-error, ::grammar-error ו-::highlight.

כפי שצוין במפרט, כשיש סתירה בין כמה סגנונות, הדירוג קובע מהו הסגנון המנצח.

כדי להבין טוב יותר את הירושה והעדיפות של הכללים, אפשר להציג את רכיבי הפסאודו-ההדגשה שעברו בירושה:

  1. בודקים את הטקסט שלמטה.

    ירשתי את הסגנון של פסאודו-אלמנט ההדגשה של ההורה שלי. בחרו אותי!

  2. צריך לבחור חלק מהטקסט למעלה.

  3. בכרטיסייה סגנונות, גוללים למטה כדי למצוא את הקטע Inherited from ::selection pseudo of....

הצג את הקטע &#39;עבר בירושה&#39; בכרטיסייה &#39;סגנונות&#39;.

הצגת שכבות מדורגות

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

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

בכרטיסייה סגנונות, מציגים את 3 השכבות בשכבות ואת הסגנונות שלהן: page, component ו-base.

דרג שכבות.

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

לשכבה page יש את הספציפיות הגבוהה ביותר, ולכן הרקע של האלמנט ירוק.

כדי להציג דף במצב הדפסה:

  1. פותחים את תפריט הפקודות.
  2. מתחילים להקליד Rendering ובוחרים באפשרות Show Rendering.
  3. בתפריט הנפתח Emulate CSS Media בוחרים באפשרות הדפסה.

הצגת שירותי CSS שנעשה בהם שימוש וגם שלא נעשה בהם שימוש בכרטיסייה 'כיסוי'

בכרטיסייה 'כיסוי' תוכלו לראות באיזה שירות CSS הדף משתמש בפועל.

  1. לוחצים על Command+Shift+P (Mac) או על Control+Shift+P (Windows, Linux, ChromeOS) כשכלי הפיתוח מתמקדים כדי לפתוח את תפריט הפקודה.

  2. מתחילים להקליד coverage.

    פתיחת הכרטיסייה &#39;כיסוי&#39; מתפריט הפקודות.

  3. בוחרים באפשרות הצגת כיסוי. הכרטיסייה 'כיסוי' מופיעה.

    הכרטיסייה &#39;כיסוי&#39;.

  4. לוחצים על התחלת כוונון של כיסוי וטעינה מחדש של הדף. טעינה מחדש. הדף נטען מחדש ובכרטיסייה כיסוי מוצגת סקירה כללית של כמות ה-CSS (ו-JavaScript) מכל קובץ שהדפדפן טוען.

    סקירה כללית לגבי כמות השימוש ב-CSS (ו-JavaScript) והשימוש בו.

    ירוק מייצג CSS משומש. אדום מייצג CSS שלא נמצא בשימוש.

  5. ניתן ללחוץ על קובץ CSS כדי לראות פירוט של כל שירות CSS בתצוגה המקדימה למעלה, בפירוט של כל שירות CSS.

    פירוט של כל שירות CSS שנמצא בשימוש ושאינו בשימוש.

    בצילום המסך, שורות 55 עד 57 ו-65 עד 67 מתוך devsite-google-blue.css לא בשימוש, ואילו שורות 59 עד 63 מופיעות.

אילוץ מצב תצוגה מקדימה של הדפסה

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

העתקת CSS

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

בנוסף, אפשר להעתיק מאפייני CSS בתחביר של JavaScript. האפשרות הזו שימושית אם אתם משתמשים בספריות CSS-in-JS.

כדי להעתיק CSS:

  1. בחירת רכיב.
  2. בכרטיסייה רכיבים > סגנונות, לחץ לחיצה ימנית על מאפיין CSS. העתקת התפריט הנפתח של שירות ה-CSS.

  3. בוחרים באחת מהאפשרויות הבאות מהתפריט הנפתח:

    • להעתקת ההצהרה. מעתיק את הנכס ואת הערך שלו בתחביר CSS: css property: value;
    • העתקת הנכס. העתקת השם ב-property בלבד.
    • העתקת הערך. מעתיק רק את value.
    • העתקת הכלל. מעתיק את כלל ה-CSS כולו: css selector[, selector] { property: value; property: value; ... }
    • העתקת ההצהרה כ-JS. מעתיק את הנכס ואת הערך שלו בתחביר של JavaScript: js propertyInCamelCase: 'value'
    • העתקת כל ההצהרות. מעתיק את כל המאפיינים ואת הערכים שלהם בכלל ה-CSS: css property: value; property: value; ...

    • העתקת כל ההצהרות כ-JS. מעתיק את כל המאפיינים ואת הערכים שלהם בתחביר JavaScript: ```js propertyInCamelCase: 'value', propertyInCamelCase: 'value', ...

    • מעתיקים את כל שינויי ה-CSS. השינויים שתבצעו בכרטיסייה סגנונות יועתקו לכל ההצהרות.

    • הצגת הערך המחושב. המערכת תעביר אתכם לכרטיסייה מחושבים.

שינוי CSS

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

בנוסף, אפשר:

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

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

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

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

הוספת הצהרה בתוך שורה

כדי להוסיף הצהרה בתוך השורה:

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

  4. מזינים ערך חוקי לנכס ומקישים על Enter. ב-DOM Tree אפשר לראות שהמאפיין style נוסף לרכיב.

    הוספת הצהרות בתוך השורה.

    בצילום המסך, המאפיינים margin-top ו-background-color הוחלו על הרכיב שנבחר. ב-DOM Tree ניתן לראות את ההצהרות משתקפות במאפיין style של הרכיב.

הוספת הצהרה לכלל סגנון

כדי להוסיף הצהרה לכלל סגנון קיים:

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

שינוי הערך של הצהרה.

בצילום המסך, כלל סגנון מקבל את הצהרת border-bottom-style:groove החדשה.

שינוי השם או הערך של ההצהרה

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

שינוי ערכים מספריים באמצעות מקשי קיצור

כשעורכים ערך מספרי של הצהרה, למשל font-size, אפשר להשתמש במקשי הקיצור הבאים כדי להגדיל את הערך בסכום קבוע:

  • Option+Up (Mac) או Alt+Up (Windows, Linux) להגדלה ב-0.1.
  • למעלה כדי לשנות את הערך ב-1, או ב-0.1 אם הערך הנוכחי הוא בין 1- ל-1.
  • Shift+Up להגדלה ב-10.
  • Shift+Command+Up (ב-Mac) או Control+Shift+Page Up (Windows, Linux) כדי להגדיל את הערך ב-100.

גם הפחתת המידע פועלת. פשוט מחליפים כל מכונה של Up שהוזכרה קודם בקידוד Down.

שינוי ערכי האורך

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

כדי לשנות את יחידת האורך:

  1. מציבים את סמן העכבר מעל שם היחידה ושימו לב שהוא מסומן בקו תחתון.

  2. לוחצים על שם היחידה כדי לבחור יחידה מהתפריט הנפתח.

כדי לשנות את ערך האורך:

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

  2. כדי להגדיל או להקטין את הערך, גוררים אותו לרוחב.

כדי לשנות את הערך ב-10, מחזיקים את המקש Shift כשגוררים.

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

כדי להוסיף מחלקה לרכיב:

  1. בוחרים את הרכיב ב-DOM Tree.
  2. לוחצים על .cls.
  3. מזינים את שם הכיתה בתיבה הוספת כיתה חדשה.
  4. הקישו Enter‏.

הקטע &#39;מחלקות רכיבים&#39;.

אמולציה של העדפות העיצוב הבהיר והעיצוב הכהה והפעלת מצב כהה אוטומטי

כדי להפעיל או להשבית מצב כהה אוטומטי או לחקות את ההעדפה של המשתמש לעיצוב בהיר או כהה:

  1. בכרטיסייה Elements > סגנונות, לוחצים על החלפת מצב של אמולציות נפוצות לרינדור.החלפת אמולציות של רינדור נפוץ. החלפת מצב של אמולציות נפוצות לרינדור.

  2. בוחרים אחת מהאפשרויות הבאות מהרשימה הנפתחת:

    • prefers-color-scheme: light (בהיר). מציין שהמשתמש מעדיף את העיצוב הבהיר.
    • prefers-color-scheme: כהה. מציין שהמשתמש מעדיף את העיצוב הכהה.
    • מצב כהה אוטומטי. הצגת הדף במצב כהה גם אם לא הטמעתם אותו. בנוסף, המערכת מגדירה את prefers-color-scheme ל-dark באופן אוטומטי.

התפריט הנפתח הזה הוא קיצור דרך לאפשרויות של אמולציית מדיה של CSS prefers-color-scheme והפעלת מצב כהה אוטומטי בכרטיסייה רינדור.

החלפת מצב בכיתה

כדי להפעיל או להשבית מחלקה ברכיב:

  1. בוחרים את הרכיב ב-DOM Tree.
  2. פותחים את הקטע מחלקות של רכיבים. למידע נוסף, ראו הוספת מחלקה לרכיב. מתחת לתיבה Add New Class (הוספת מחלקה חדשה) מופיעות כל המחלקות שחלות על הרכיב הזה.
  3. מסמנים את התיבה ליד הכיתה שרוצים להפעיל או להשבית.

הוספת כלל סגנון

כדי להוסיף כלל סגנון חדש:

  1. בחירת רכיב.
  2. לחץ על כלל סגנון חדש כלל סגנון חדש.. כלי הפיתוח מוסיף כלל חדש מתחת לכלל element.style.

הוספת כלל סגנון חדש.

בצילום המסך, כלי הפיתוח מוסיפים את כלל הסגנון h1.devsite-page-title אחרי שלוחצים על כלל סגנון חדש.

בחירת גיליון הסגנונות שאליו ברצונך להוסיף כלל

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

בחירת גיליון סגנונות.

החלפת מצב בהצהרה

כדי להפעיל או להשבית הצהרה אחת:

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

החלפת המצב של ההצהרה.

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

עריכת הפסאודו-רכיבים של ::view-transition במהלך אנימציה

עיינו בקטע התואם בתוך אנימציות.

מידע נוסף זמין במאמר מעברים חלקים ופשוטים בעזרת View Migrates API.

יישור פריטי רשת והתוכן שלהם עם עורך המשבצות

עיינו בקטע המתאים ב'בדיקת רשת של CSS'.

שינוי הצבעים באמצעות בוחר הצבעים

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

שינוי ערך הזווית באמצעות שעון הזווית

שעון הזווית מספק GUI עבור שינוי של ערכי <angle> בערכי מאפייני CSS.

כדי לפתוח את שעון הזווית:

  1. בוחרים רכיב עם הצהרת זווית.

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

    תצוגה מקדימה של הזווית.

    השעונים הקטנים שמימין ל--5deg ול-0.25turn הם תצוגות מקדימות של הזוויות.

  3. לוחצים על התצוגה המקדימה כדי לפתוח את שעון זווית.

    שעון זוויתי.

  4. שינוי ערך הזווית על ידי לחיצה על העיגול של שעון הזווית או גלילה עם העכבר כדי להגדיל או להקטין את ערך הזווית ב-1.

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

שינוי התיבה והצלליות של הטקסט בעזרת עורך האזורים הכהים

עורך הצלליות מספק GUI לשינוי הצהרות CSS text-shadow ו-box-shadow.

כדי לשנות את האזורים הכהים באמצעות עורך האזורים הכהים:

  1. בוחרים רכיב עם הצהרת צל. לדוגמה, בוחרים את הרכיב הבא.

  2. בכרטיסייה סגנונות, מאתרים את סמל הצללית צל. ליד ההצהרה text-shadow או box-shadow.

    סמלים של הצללה.

  3. לוחצים על סמל הצלליות כדי לפתוח את עורך האזורים הכהים.

    עורך האזורים הכהים.

  4. שינוי המאפיינים של הצללית:

    • סוג (רק עבור box-shadow). בוחרים באפשרות Outset או Inset.
    • היסטים של X ו-Y. גוררים את הנקודה הכחולה או מציינים ערכים.
    • טשטוש. גוררים את פס ההזזה או מציינים ערך.
    • Spread (רק עבור box-shadow). גוררים את פס ההזזה או מציינים ערך.

  5. בוחנים את השינויים שהוחלו על הרכיב.

עריכת תזמונים של אנימציה ומעברים באמצעות עורך Easing

Eaering Editor מספק GUI לשינוי הערכים של transition-timing-function ו-animation-timing-function.

כדי לפתוח את עורך ההקלות:

  1. צריך לבחור רכיב עם הצהרה על פונקציית תזמון, כמו הרכיב <body> שבדף הזה.
  2. בכרטיסייה סגנונות, מאתרים את הסמל הסגול קלות. ליד ההצהרות transition-timing-function, animation-timing-function או נכס הקיצור transition. סמל עורך ההקלות.
  3. לחצו על הסמל כדי לפתוח את עורך ההקלות: עורך ההקלות.

שימוש בהגדרות קבועות מראש לשינוי תזמונים

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

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

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

    • הגדרות לינאריות קבועות מראש: elastic, bounce או emphasized.
    • הגדרות קבועות מראש של Cubic Bezier:
תזמון מילת מפתח קביעה מראש בזייה קובייתי
יציאה קלה החוצה וכניסה קלה פנימה פנימה החוצה, סינוס cubic-bezier(0.45, 0.05, 0.55, 0.95)
פנימה, ריבועית cubic-bezier(0.46, 0.03, 0.52, 0.96)
פנימה החוצה, קובייתי cubic-bezier(0.65, 0.05, 0.36, 1)
מהיר לאט, נכנס לאט cubic-bezier(0.4, 0, 0.2, 1)
החוצה, אחורי cubic-bezier(0.68, -0.55, 0.27, 1.55)
כניסה קלה פנימה אין, סינוס cubic-bezier(0.47, 0, 0.75, 0.72)
פנימה, ריבועית cubic-bezier(0.55, 0.09, 0.68, 0.53)
In, Cubic cubic-bezier(0.55, 0.06, 0.68, 0.19)
בפנים, אחוריות cubic-bezier(0.6, -0.28, 0.74, 0.05)
יציאה לינארית במהירות cubic-bezier(0.4, 0, 1, 1)
יציאה קלה החוצה חוץ, סינוס cubic-bezier(0.39, 0.58, 0.57, 1)
חוץ, ריבועי cubic-bezier(0.25, 0.46, 0.45, 0.94)
חוץ, Cubic cubic-bezier(0.22, 0.61, 0.36, 1)
לינארי יוצא, איטי cubic-bezier(0, 0, 0.2, 1)
החוצה, חזרה cubic-bezier(0.18, 0.89, 0.32, 1.28)

הגדרת תזמונים מותאמים אישית

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

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

    גרירת נקודת בקרה של פונקציה לינארית.

  • כדי להשתמש בפונקציות Cubic Bezier, גוררים אחת מנקודות הבקרה.

    גרירת נקודות הבקרה של פונקציית Cubic Bezier.

כל שינוי יגרום להפעלת אנימציה של הכדור בקטע Preview (תצוגה מקדימה) בחלק העליון של Editor.

(ניסיוני) העתקת שינויי ה-CSS

כשהניסוי הזה פועל, הכרטיסייה סגנונות מדגישה את שינויי ה-CSS שלכם בירוק.

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

העתקת שינוי בהצהרת שירות CSS.

כדי להעתיק את כל השינויים ב-CSS בין ההצהרות בבת אחת, לוחצים לחיצה ימנית על הצהרה כלשהי ובוחרים באפשרות העתקת כל השינויים ב-CSS.

העתקת כל שינויי ה-CSS.

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