cascading style sheets reference

ערכים

למאפיינים שונים יכולים להיות סוגי ערך שונים.

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

סוגי הערכים העיקריים הם:

• אורך
• אחוז
• צבע
• url
• מילת מפתח

ערכי אורך

ערכי אורך יכולים להיות חיוביים או שליליים. הם בעלי ערך מספרי, ואחריהם באה יחידת מדידה. שימו לב, שכאשר ערכיי אורך יכולים להיות או חיוביים או שליליים, מספר מאפיינים לא יכולים לקבל יחידות אורך שליליות.

ישנם שני סוגים בסיסיים של יחידות אורך,יחסי ומוחלט. ככלל אצבע, יחידות מוחלטות צריכות לשמש רק כאשר המאפיינים הפיזיים של כלי הפלט הם ידועים. משמעו של דבר, שיש להימנע מיחידות כמו נקודות ופיקסלים, עבור מסכים (מכיוון שאנו יכולים להיות בטוחים מהי הרזולוציה ההגיונית [ברירת המחדל של מקינטוש היא 72dpi, ושל חלונות היא 96dpi], או גדלי מסך).

יחידות המדידה הן :

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

ערכיי אחוז

- ערכיי אחוז - במקום להשתמש ביחידת מדידה עבור רבים מן המאפיינים, ניתן להשתמש בערך האחוז. אם תיזכרו בירושה תזכרו שאלמנט כלשהו מוכל בתוך אלמנט אחר (לדוגמא, פיסקה בתוך הגוף). בדרך כלל, ערכיי אחוז מגדירים אחוז מסוים מן ההורה, או מן האלמנט המכיל.

לדוגמא, הגדרה של מאפיין הרוחב בעזרת ערך האחוז, מתכוונת לכך שרוחב אלמנט מסוים יהיה האחוז הנתון של האלמנט המכיל אותו. למשל : width :75% } P - פירושו של דבר, שפסקאות תהיינה ברוחב של 75% מן האלמנט המכיל אותם. לעיתים קרובות, פירושו של דבר - הגוף.

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

צורת יחידת האחוז היא סימן חיובי או שלילי (היעדר סימן, פירושו, יחידות חיוביות), שאחריה בא מספר, ואחריו בא סימן האחוז:%. לדוגמא, -25%, +15% או 15%.

ערכיי צבע

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

• מילות מפתח של צבע
• צבעים הקסדצימליים
• צבעי rgb (אדום, ירוק, כחול)

- מילות מפתח עבור צבע

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

מילות מפתח אלה הן:

אקווה, שחור, כחול, פושיה, אפור, ירוק, ליים, בורדו, כחול צי, ירוק זית, סגול, אדום, כסף, טיל, לבן, צהוב..

לא קיים ערך RGB מוגדר בדיוק עבור מילות מפתח אלה, והן תלויות במפתחי הדפדפנים שיחליטו מה כוונתם.

CSS2 הציג 26 מילות מפתח חדשות עבור צבעי מערכת. אלה מגדירים צבעים שממשקי המשתמש של מערכות הפעלה שונות, כמו ה-MacOS או חלונות 98, משתמשים עבור אובייקטים של ציור.צבעים אלה הם:

• activeborder - גבול פעיל של חלון.
• activecaption - כותרת פעילה של חלון.
• appworkspace - צבע רקע של ממשק רב-מסמכים
• background - רקע של שולחן עבודה.
• buttonface - צבע הפנים של אלמנטים של תצוגות תלת-ממדיות.
• buttonhighlight - צל כהה עבור אלמנטים של תצוגות תלת-ממדיות (עבור קצוות הפונים בכיוון הנגדי ממקור האור). צבע הצל עבור אלמנטים של תצוגות תלת-ממדיות.
• buttontext - טקסט הנמצא על כפתורי לחצנים.
• captiontext - טקסט בכותרות, קופסת גודל וקופסת חץ של פס גלילה.
• graytext - טקסט אפור (לא פעיל). צבע זה נקבע לסולם 000, אם כונן התצוגה הנוכחי אינו תומך בצבע אפור סולידי.
• highlight - פריטים הנבחרים בתוך שליטה (control)
• highlighttext - פריטים הנבחרים בתוך שליטה (control)
• inactiveborder - גבול לא פעיל לחלון.
• inactivecaption - - כותרת לא פעילה לחלון.
• inactivecaptiontext - צבע טקסט בתוך כותרת שאינו פעיל.
• infobackground - צבע הרקע עבור tooltip controls.
• infotext - צבע טקסט עבור tooltip controls
• menu - רקע של התפריט.
• menutext - טקסט בתוך תפריטים.
• scrollbar - האזור האפור של פס הגלילה.
• threeddarkshadow - צבע אור עבור אלמנטים של תצוגות תלת-ממדיות. (עבור קצוות הפונים אל מקור האור).
• threedface - צל כהה עבור אלמנטים של תצוגות תלת-ממדיות. חלון - רקע של החלון.
• window - רקע של החלון.
• windowframe - המסגרת של החלון.
• windowtext - טקסט בתוך חלונות.

צבעי RGB הקסדצימליים

מסיבה כלשהי, לוח הצבעים של האתרים המקוריים (באופן רשמי, sRGB) ישתמשו במספרים הקסדצימליים (בסיס 16, ולא בסיס 10) - ואם אינכם יודעים, אל תדאגו בשל כך) עבור הגדרת צבעים. מהר מאוד צבעי rgb אלה מוגדרים בצירוף של אדום, ירוק וכחול. יכולים להיות 256 גוונים שונים של כל צבע (מ-00 ועד FF זאת אומרת, 0 עד 255, בשפתינו).

CSS מאפשר לכם להגדיר צבעים בעזרת שיטה זו בצורות הבאות:

1.סמל ה-# שאחריו באים 3 מספרים הקסדצימליים בטווח שבין 00 ועד FF. לדוגמא, #FFCC11. זוהי הצורה שבה מפתחי HTML יודעים כיצד להגדיר צבע.בדוגמא זו, ערך האדום הוא FF, ערך הירוק הוא CC וערך הכחול הוא 11.

2. סמל ה-#, שאחריו באים 3 מספרים הקסדצימליים, הפעם בשימוש של ספרה אחת. לדוגמא, #FC1.זהו מספר זהה למספר בדוגמא הקודמת ואינו זהה ל: #F0C010..

צבעי RGB

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

ישנן 2 צורות של ערך זה; צורה מספרית וצורה אחוזית. ניתן להחליף ביניהן.

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

. צורה אחוזית עבור ערך הצבע rgb מחליפה את הערכים בטווח הנע בין 0 עד 255, בערך אחוזי הנע בין 0 ועד 100 אחוז. לדוגמא, הערך בדוגמא למעלה יהיה כתוב כ: (100%, 100%, 0%) RGB.

למען החזרה, הערכים הבאים כולם שווים:

green
#00FF00
#0F0
rgb(0, 255, 0)
rgb(0%, 100%, 0%)

ערכיי URL

דמויות רקע ודמויות של פריטי רשימה מוגדרות בעזרת URL. URL זה יכול להיות או מוחלט ,זאת אומרת ה-URL השלם, לדוגמא: http://www.cnn.com/sport/main.gif או יחסי. אך יחסי למה? אם הייתם לוקחים רגע לחשוב על כך, הייתם מבינים שזה חייב להיות יחסי לדף הסגנון. אחרת, דף הסגנון יעבוד רק עבור דפי האתר שבאותה הספרייה. הבעיה היא שמספר גרסאות של הדפדפנים העיקריים, טועות בזה, באופן מעשי, ומתייחסים ל-url כיחסי לדף האתר. בתקווה שזה יתוקן בשלב כלשהו, אך בינתיים, הכי טוב להיות בטוח ולהשתמש ב-url-ים מוחלטים בדפי הסגנון שלכם.

ל-URL-ים יש צורה ישירה:

URL(the URL)

URL-ים מוחלטים כתובים באופן הבא:

URL(http://www.cbs.com/news/main.gif)

URL-ים יחסיים נכתבים באופן דומה:

URL(../gifs/main.gif)

ערכיי מילת מפתח

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

bold and bolder for font weight

small and smaller for font size

ערכיי צורה

ערך הצורה הלא נפוץ (שנמצא בשימוש כעת רק עבור מאפיין ה-clip המוצג כחלק מ-CSS2) מגדיר צורה. כעת קיימת צורת מלבן.

צורת המלבן היא :

rect( top left bottom right )

כל אחד מעליון, תחתון, שמאלי וימני יכולים להיות ערך אורך או מילת המפתח auto, פירושו של auto, לפחות בהקשר של חיתוך, הוא כי הערך של מיקום החיתוך הוא זהה לזה של האלמנט עצמו.

ערך זה, ככל הנראה, יוגדר מחדש כיוון שהוא אינו עוקב אחר אותו מודל בסיסי כמו מודל הקופסא של CSS1, שבו מיקומי אלמנטים מוגדרים ע"י פינה עליונה שמאלית, יחד עם רוחב וגובה.

בנוסף, צורות נוספות נמצאות בתכנון.

בחלק זה

בחלק זה לקחנו את השביל העוקף כדי להתרכז קצת יותר בסוגים שונים של הערכים שהמאפיינים יכולים לקבל.