וובמאסטר - תיכנות ובניית אתרים

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

רן בר-זיק/‏ 31 מרץ, 2003
F+
F-

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
תגיות: CSS‏  /  מדריך‏  /  בניית אתרים‏  

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

תגובות למאמר



תגיות פופולאריות

X
הצטרף לעמוד שלנו בפייסבוק להישאר מעודכן!
וובמאסטר © כל הזכויות שמורות