Facebook
Twitter
RSSמדריך 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, גם צבעים עוברים בירושה מהאלמנט שעליו הם מוגדרים אל האלמנטים שתחתיו.
למשל, אם נשנה את הסלקטור מ- h1 ל- body:
<style type="text/css">
body {
color: Yellow;
background-color: Blue;
}
</style>
הרי שנקבל:
ואפשר לראות שצבע הרקע רלוונטי עכשיו לכל ה- body, ושצבע הטקסט התקבל בירושה גם עבור התגית h1.
תגובות בפייסבוק