מדריך CSS – צבעים ורקעים

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

הגדרת צבעים ב- CSS

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

color: red;
color: rgb(255,0,0);
color: rgb(100%,0%,0%);
color: #ff0000;

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

ניתן גם לקבוע צבע שקוף (רלוונטי בעיקר לרקעים): transparent.

2 ההגדרות הבאות משתמשים בשיטת RGB שבה כל צבע מוגדר ע”י שילוב של 3 צבעים: אדום (Red), ירוק (Green) וכחול (Blue), שעבור כל אחד מאלה הטווח הוא בין 0 ל- 255, כאשר 0 הוא הערך הנמוך ביותר – למשל: ללא אדום בכלל, ועד 255 שהוא המקסימום: אדום מלא.

ניתן גם לציין את ההגדרה הזאת באחוזים במקום במספרים אבסולוטים.

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

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

ניתן לקבוע צבעים גל לתכונה color וגם לתכונה background-color, לדוגמא, הדף:

<!DOCTYPE html>
<
html
>
<
head>
    <title>CSS Sample</title>
    <style type="text/css">
    h1 {
        color: yellow;
        background-color: blue;
    }

  </style
>
</
head
>
<
body>
    <h1>Main Title</h1
>
</
body
>
</
html
>

יתן לנו את התוצאה:

CSS צבע רקע

ירושת צבעים בין אלמנטים

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

למשל, אם נשנה את הסלקטור מ- h1 ל- body:

<style type="text/css">
body {
    color: Yellow;
    background-color: Blue;
}
</style
>

הרי שנקבל:

CSS צבע רקע

ואפשר לראות שצבע הרקע רלוונטי עכשיו לכל ה- body, ושצבע הטקסט התקבל בירושה גם עבור התגית h1.

תגיות: , ,

רן בר-זיק

מתכנת PHP מנוסה ובעל ידע רב בפיתוח לאינטרנט על בסיס LAMP. מומחה במערכות דרופל, ג'ומלה ו-וורדפרס. שולט היטב בכל מה שקשור לפרונט אנד: JavaScript: jQuery ו-MooTools,ActionScript 2/3 וכמובן HTML 5 + CSS 3.אינטרנט ישראל: www.internet-israel.com

תגובות בפייסבוק

חדש! אחסון אתרים של וובמאסטר

שירות אחסון אתרים
המקצועי של וובמאסטר!

מומחים באירוח אתרי
WordPress, Joomla, Drupal

  • שרתי לינוקס עם CloudLinux, LiteSpeed
  • 1GB דיסק SSD, 10GB תעבורה חודשית
  • ממשק ניהול cPanel, תעודת SSL חינם

עכשיו במחיר היכרות:
רק 420 ש"ח לשנה!