צבעים ב- CSS

שפת CSS מאפשרת לך להשתמש ב – 16,777,216 צבעים שונים !
ב- CSS ניתן לציין צבעים באמצעות שמם, הערך ההקסדצימלי שלהם או ערך ה- RGB שלהם.

לדוגמא, ניתן להגדיר צבע אדום ב- 5 הצורות הבאות :

  1. red
  2. rgb(255,0,0)
  3. rgb(100%,0%,0%)
  4. #ff0000
  5. #f00

ישנם כ – 17 צבעים מוגדרים מראש שבאפשרותך להגדיר : aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white ו - yellow.

Transparent ( שקוף) הוא גם ערך תקני שניתן להשתמש בו.

הערך RGB יכול לקבל מספרים בין 0 ל – 255, כאשר 0 מציין את הערך הנמוך ביותר ( לדוגמא, היעדר צבע אדום בצורה מוחלטת ) ו – 255 מציין את הערך הגבוה ביותר ( לדוגמא, צבע אדום מלא בצורה מוחלטת ).

הערך ההקסדצימלי מבוסס על שיטת מספור על בסיס 16, כלומר שיטת מספר המבוססת על מספרים מ – 0 עד ל – F. הערך ההקסדצימלי מוגדר כסולמית # ו – 3 או 6 ספרות. בכל אופן, מומלץ לעבוד עם 6 ספרות מכיוון שהשליטה בצורה זו היא מקסימלית.

התכונות color ו – background-color

ניתן להחיל צבעים באמצעות התכונות color ו – background-color. ניתן להחיל את על רוב האלמנטים ב- HTML. לדוגמא :

  1. h1 {
  2.     color: yellow;
  3.     background-color: blue;
  4. }

בדוגמא הנ"ל, כותרת ה – H1 תקבל צבע צהוב ורקע כחול.
בדרך כלל, צבעים מוגדרים הם חדים מאוד ולכן ניתן לשחק מעט עם הקוד על מנת להקנות לאלמנט הצללה כלשהי, לדוגמא :

  1. body {
  2.     font-size: 0.8em;
  3.     color: navy;
  4. }
  5. h1 {
  6.     color: #ffc;
  7.     background-color: #009;
  8. }

על מנת לצפות בשינויים, שמור את קובץ ה – CSS ורענן את הדפדפן שלך.

עמודים רלוונטים

רפרנס

  • התגית color
  • התגית background-color