תיעוד CSS עם דוגמאות להרצה: הערות

Q: איך כותבים הערה ב-CSS?

עוטפים את הטקסט ב-/ וב-/: / This is a comment /. אותו תחביר עובד לשורה אחת או לכמה, בכל מקום שבו מותר רווח בגיליון הסגנונות.

Q: אפשר להשתמש ב-// להערות ב-CSS?

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

Q: אפשר לקנן הערות ב-CSS?

לא. הערה נגמרת ב-/ הראשון, ולכן / a / b / c / נגמרת אחרי b, וה-c / שנשאר הופך לזבל ששובר את הכלל הבא.

Q: מה קיצור המקלדת להערה ב-CSS?

ברוב עורכי הקוד, כולל VS Code, Ctrl + / ב-Windows וב-Linux או Cmd + / ב-macOS עוטף את השורות הנבחרות ב-/ /, ולחיצה נוספת מסירה את ההערה.

CSS Comment: איך כותבים הערות ב-CSS

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

בדף הזה יש עורכים שאפשר להריץ - לערוך, להריץ ולראות את הפלט מיד.

מאת Kevin Spektor, מייסד שותף ו-CTO

פורסם ב-Sep 24, 2026

איך כותבים הערה ב-CSS

הערת CSS מתחילה ב-/* ונגמרת ב-*/. הדפדפן מתעלם מכל מה שביניהם, בין אם זו שורה אחת ובין אם עשרים.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Comments</title>
  <style>
    /* Single-line comment */
    .note {
      background: #e5e7eb; /* after a declaration */
      padding: 8px 12px;
    }

    /*
      Multi-line comment:
      the same syntax, spread over several lines.
    */
    .note strong {
      color: #2563eb;
    }
  </style>
</head>
<body>
  <p class="note">The comments change <strong>nothing</strong> on screen.</p>
</body>
</html>

יש רק את התחביר הזה. ל-CSS אין הערה נפרדת של שורה אחת.

איפה אפשר לשים הערות

הערה יכולה לשבת בכל מקום שבו מותר רווח: בין כללים, בין הצהרות, אחרי ערך, בתוך רשימת סלקטורים. היא עובדת אותו דבר בקובץ .css, באלמנט <style> ובתכונת style.

/* Buttons */
.btn,          /* default */
.btn-primary { /* variant */
  padding: 8px 14px; /* 8px top and bottom, 14px sides */
}

<p style="color: #16a34a; /* inline comments work too */">Hello</p>

הערות HTML, , מיועדות ל-markup, לא ל-CSS. שני התחבירים מוצגים זה לצד זה בעמוד ההערות ב-HTML.

ביטול קוד בהערה

השימוש היומיומי בהערות הוא לכבות הצהרה כדי לראות מה היא עושה, בלי למחוק אותה. עטפו אותה ב-/* */:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Comment out</title>
  <style>
    .box {
      background: #2563eb;
      color: white;
      padding: 16px;
      /* border: 6px solid #f59e0b; */
      /* border-radius: 12px; */
    }
  </style>
</head>
<body>
  <div class="box">Border and radius are commented out.</div>
</body>
</html>

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

רוב העורכים עושים את זה בשבילכם: בחרו שורות ולחצו Ctrl + / (Cmd + / ב-macOS).

למה // שובר את ה-CSS שלכם

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Double slash</title>
  <style>
    p { padding: 6px 10px; }

    // this is NOT a comment
    .one { background: #16a34a; color: white; }

    .two { background: #2563eb; color: white; }
  </style>
</head>
<body>
  <p class="one">.one has no background: its rule was dropped.</p>
  <p class="two">.two is fine.</p>
</body>
</html>

הדפדפן קרא את // this is NOT a comment .one כסלקטור אחד, שהוא לא תקין, ולכן כל הכלל של .one נזרק. שנו את השורה ל-/* this is a comment */ והרקע הירוק יחזור.

הערות לא מתקננות

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Nested</title>
  <style>
    p { padding: 6px 10px; }

    /* outer start
    .old { color: red; } /* inner comment */
    outer end */

    .next { background: #f59e0b; }
    .last { background: #e5e7eb; }
  </style>
</head>
<body>
  <p class="next">.next is broken by the leftover "outer end */".</p>
  <p class="last">.last still works.</p>
</body>
</html>

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

ארגון גיליון סגנונות עם הערות

גיליונות סגנונות ארוכים קריאים יותר עם כותרות לחלקים. מוסכמה נפוצה:

/* ==========================================
   Layout
   ========================================== */

.page { max-width: 960px; margin: 0 auto; }

/* ------------------------------------------
   Header
   ------------------------------------------ */

.header { padding: 16px; }

/*! License: MIT (many minifiers keep comments that start with "!") */

הערות נשלחות לכל מבקר כחלק מהקובץ ומופיעות ב-View Source, אז לעולם אל תכתבו בהן סיסמאות, כתובות פנימיות או הערות שלא הייתם מפרסמים.

טעויות נפוצות

שימוש ב-//. הוא מוחק בשקט את הכלל הבא. השתמשו ב-/* */.
קינון הערות. ה-*/ הראשון סוגר את ההערה; השאר שובר את הכלל הבא.
שכחה של ה-*/ הסוגר. כל מה שאחרי ה-/*, עד סוף גיליון הסגנונות, הופך להערה.
שימוש ב- בתוך CSS. זה תחביר הערות של HTML, והוא לא מבטל CSS.
השארת סודות בהערות. הם נשלחים לדפדפן יחד עם גיליון הסגנונות.

שאלות נפוצות

איך כותבים הערה ב-CSS?

עוטפים את הטקסט ב-/* וב-*/: /* This is a comment */. אותו תחביר עובד לשורה אחת או לכמה, בכל מקום שבו מותר רווח בגיליון הסגנונות.

אפשר להשתמש ב-// להערות ב-CSS?

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

אפשר לקנן הערות ב-CSS?

לא. הערה נגמרת ב-*/ הראשון, ולכן /* a /* b */ c */ נגמרת אחרי b, וה-c */ שנשאר הופך לזבל ששובר את הכלל הבא.

מה קיצור המקלדת להערה ב-CSS?

ברוב עורכי הקוד, כולל VS Code, Ctrl + / ב-Windows וב-Linux או Cmd + / ב-macOS עוטף את השורות הנבחרות ב-/* */, ולחיצה נוספת מסירה את ההערה.

האם הערות CSS משפיעות על הביצועים?

רק בכך שהן מוסיפות בייטים לקובץ. הדפדפן זורק אותן בזמן הפענוח. כלי build מכווצים גיליונות סגנונות ומסירים הערות; רבים מהם שומרים הערות שמתחילות ב-/*!, שזו המוסכמה להודעות רישיון.

מושגים קשורים