תיעוד CSS עם דוגמאות להרצה: צבע טקסט

Q: איך משנים את צבע הגופן ב-HTML?

השתמשו במאפיין color של CSS, בגיליון סגנונות או במאפיין style: Blue text . התגית הישנה מיושנת.

Q: איך משנים את הצבע של מילה אחת?

עטפו את המילה ב- ותנו לה צבע: This is red . השתמשו ב- או ב- במקום אם המילה גם חשובה או מודגשת.

Q: האם כותבים font-color או color ב-CSS?

כותבים color. אין מאפיין font-color או text-color; הדפדפן מתעלם מהם.

איך משנים צבע טקסט ב-HTML

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Text color</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 18px; }
    .blue { color: #2563eb; }
    .green { color: rgb(22 163 74); }
  </style>
</head>
<body>
  <p class="blue">Blue text from a class in a stylesheet.</p>
  <p class="green">Green text written as rgb().</p>
  <p style="color: darkorange;">Orange text from a style attribute.</p>
  <p>Default text, then <span style="color: #dc2626;">one red word</span> in it.</p>
</body>
</html>

שם המאפיין הוא color, לא font-color או text-color. השמות האלה לא קיימים ב-CSS ונזנחים בשקט.

למה לא התגית font

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

<!-- obsolete -->
<font color="red">Warning</font>

<!-- use this -->
<span style="color: red;">Warning</span>

<!-- or better, a class you can change in one place -->
<span class="warning">Warning</span>

דרכים לכתוב את הצבע

color מקבל כל פורמט צבע של CSS. ארבעת הנפוצים ביותר:

פורמט	דוגמה	הערות
שם	`color: tomato;`	148 צבעים עם שם, נוחים לבדיקות מהירות
Hex	`color: #2563eb;`	הנפוץ ביותר בקובצי עיצוב
rgb()	`color: rgb(37 99 235);`	אדום, ירוק וכחול מ-0 עד 255
hsl()	`color: hsl(221 83% 53%);`	גוון, רוויה, בהירות: קל להבהיר או להכהות

Hex, rgb() ו-hsl() יכולים לקבל ערוץ אלפא לטקסט שקוף למחצה, כמו #2563eb80 או rgb(37 99 235 / 50%). הדף על צבעים ב-CSS מסביר כל פורמט.

צביעה של דף שלם, כותרת או מקטע

הגדירו את הצבע פעם אחת על body ותנו לירושה לעשות את השאר, ואז דרסו איפה שצריך:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Inherited color</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #374151; }
    h1 { color: #111827; font-size: 24px; }
    .note { color: #92400e; background: #fef3c7; padding: 8px 12px; }
  </style>
</head>
<body>
  <h1>Heading in near black</h1>
  <p>Body text inherits dark gray from body.</p>
  <div class="note">
    <p>This box sets amber text, and the paragraph inside inherits it.</p>
  </div>
</body>
</html>

שחור רך כמו #111827 או #374151 על לבן נוח יותר לעיניים מ-#000000 טהור, ועדיין נקרא כשחור.

צבעי קישורים

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Link color</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .dark { color: #16a34a; }
    .brand a { color: #7c3aed; }
    .brand a:hover { color: #5b21b6; }
    .inherit a { color: inherit; }
  </style>
</head>
<body>
  <p class="dark">Green paragraph, but <a href="#x" id="l1">this link</a> keeps the browser color.</p>
  <p class="dark brand">Green paragraph, <a href="#x" id="l2">this link</a> is set to purple.</p>
  <p class="dark inherit">Green paragraph, <a href="#x" id="l3">this link</a> inherits green.</p>
</body>
</html>

:hover, :visited ו-:focus-visible מאפשרים לשנות את הצבע לפי מצב; הדף על hover מסביר אותם. כשקישור באותו צבע כמו הטקסט שסביבו, השאירו לו את הקו התחתון כדי שעדיין יהיה אפשר לזהות אותו כקישור.

הפכו את הטקסט לקריא: ניגודיות

צבע הטקסט הוא רק חצי מהזוג; הרקע הוא החצי השני. WCAG דורש יחס ניגודיות של לפחות 4.5:1 לטקסט רגיל ו-3:1 לטקסט גדול (בערך 24px, או 19px מודגש).

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Contrast</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 18px; }
    p { padding: 8px 12px; margin: 6px 0; }
    .fail { color: #9ca3af; background: #ffffff; }
    .pass { color: #4b5563; background: #ffffff; border: 1px solid #e5e7eb; }
    .dark { color: #f9fafb; background: #1f2937; }
  </style>
</head>
<body>
  <p class="fail">#9ca3af on white: about 2.5:1, too light</p>
  <p class="pass">#4b5563 on white: about 7.6:1, passes</p>
  <p class="dark">#f9fafb on #1f2937: about 14:1, passes</p>
</body>
</html>

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

currentColor: שימוש חוזר בצבע הטקסט

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>currentColor</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .tag {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 4px 10px; border: 2px solid currentColor; border-radius: 999px;
    }
    .ok { color: #16a34a; }
    .warn { color: #d97706; }
  </style>
</head>
<body>
  <span class="tag ok">
    <svg width="12" height="12" viewBox="0 0 12 12"><circle cx="6" cy="6" r="6" fill="currentColor"/></svg>
    Online
  </span>
  <span class="tag warn" id="warn">
    <svg width="12" height="12" viewBox="0 0 12 12"><circle cx="6" cy="6" r="6" fill="currentColor"/></svg>
    Away
  </span>
</body>
</html>

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

לכתוב font-color או text-color. המאפיין הוא color.
שימוש בתגית . היא מיושנת; השתמשו ב-CSS.
לצפות שקישורים ירשו. הגדירו a { color: ... } או color: inherit.
צבע כסימן היחיד. "שדות באדום הם חובה" לא עובד לקוראים שלא מבחינים באדום. הוסיפו טקסט או אייקון.
טקסט אפור בניגודיות נמוכה. בדקו את היחס: 4.5:1 או יותר לטקסט רץ.
שימוש ב-opacity כדי להבהיר טקסט. הוא מדהה את כל האלמנט, כולל הרקע והילדים. השתמשו במקום זאת בצבע בהיר יותר או בצבע עם אלפא.

שאלות נפוצות

איך משנים את צבע הגופן ב-HTML?

השתמשו במאפיין color של CSS, בגיליון סגנונות או במאפיין style: Blue text. התגית הישנה  מיושנת.

האם התגית עדיין נתמכת?

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

איך משנים את הצבע של מילה אחת?

עטפו את המילה ב- ותנו לה צבע: This is red. השתמשו ב- או ב- במקום  אם המילה גם חשובה או מודגשת.

למה הקישור שלי לא משנה צבע כשאני מגדיר color על ההורה?

לקישורים יש צבע משלהם מגיליון הסגנונות של הדפדפן, ולכן הם לא יורשים את הצבע של ההורה. הגדירו אותו על הקישור עצמו (a { color: #2563eb; }) או השתמשו ב-a { color: inherit; } כדי לעקוב אחרי ההורה.

האם כותבים font-color או color ב-CSS?

כותבים color. אין מאפיין font-color או text-color; הדפדפן מתעלם מהם.

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