רשימת מאפיינים ב-css
| פונטים | טקסט | רקע | פס גלילה |
| רשימות | שוליים | ריפוד | מסגרת |
| סמן העכבר | כיוון טקסט | גודל | מיקום |
| מאפיינים נוספים |
כמה מילים לפני שמתחילים:
בדף הזה מופיעים מאפיינים וערכים. בשביל לדעת איך משתמשים בהם, העזרו במדריך ה-css.
לעניין עמודות ה"ערך":
מה שמופיע בסוגריים מרובעים [ ] מציין מה צריך להופיע במקומו, למשל שם או קוד של צבע בלי הסוגריים. סוגריים עגולים ( ) הם חלק מהתחביר, וכן צריכים להיות כלולים, כמו למשל url(picture.jpg) - כך זה צריך להופיע בקוד.
יש סוגים שונים של דפדפנים. לא הכל עובד בכולם, ולא תמיד באותה צורה. אם משהו נראה לכם כאילו "לא עובד", נסו לראות את הדף הזה עם דפדפן אחר: אם אתם באינטרנט אקספלורר, נסו נטסקייפ או מוזילה ולהפך.
עיצוב פונטים
| מאפיין | ערך | דוגמה/הסבר |
| font-weight | 100 | עובי... |
| 200 | עובי... | |
| 300 | עובי... | |
| 400 | עובי... | |
| 490 | עובי... | |
| 600 | עובי... | |
| 700 | עובי... | |
| 800 | עובי... | |
| 900 | עובי... | |
| normal | עובי... | |
| bold | עובי... | |
| lighter | עובי... | |
| bolder | עובי... | |
| font-size | 16pt | גודל... |
| xx-small | גודל... | |
| x-small | גודל... | |
| small | גודל... | |
| medium | גודל... | |
| large | גודל... | |
| x-large | גודל... | |
| xx-large | גודל... | |
| smaller | גודל... | |
| larger | גודל... | |
| font-family | serif | סוג פונט font |
| sans-serif | סוג פונט font | |
| cursive | סוג פונט font | |
| fantasy | סוג פונט font | |
| monospace | סוג פונט font | |
| שם של פונט ספציפי, למשל arial | סוג פונט | |
| color | [צבע במילים] | השתמשתי בצבע green |
| [צבע לפי קוד] | השתמשתי בצבע #ff0000 | |
| font-variant (עובד רק על אותיות לטיניות) |
normal | Capital Letters |
| small-caps | Capital Letters | |
עיצוב טקסט
| מאפיין | ערך | דוגמה/הסבר |
| text-align | left | הצמדת טקסט ל... |
| right | הצמדת טקסט ל... | |
| center | הצמדת טקסט ל... | |
| justify | הצמדת טקסט ל... | |
| text-decoration | none | קישוט טקסט |
| underline | קישוט טקסט | |
| overline | קישוט טקסט | |
| line-through | קישוט טקסט | |
| blink | קישוט טקסט - עובד רק בנטסקייפ | |
| text-transform | none | capital LETTERS |
| uppercase | Capital Letters | |
| lowercase | Capital Letters | |
| capitalize | Capital Letters | |
| text-indent | 0 | הזחה |
| 10px | הזחה | |
| 10% | ללא דוגמה - עושה בעיות ב-IE | |
עיצוב רקע
| מאפיין | ערך | דוגמה/הסבר |
| background-color | [צבע במילים או בקוד] | רקע צהוב |
| transparent | רקע שקוף | |
| background-image | url[(כתובת יחסית/מוחלטת) | רקע תמונה |
| background-repeat | repeat |
חזרה על הרקע |
| repeat-x |
חזרה על הרקע | |
| repeat-y |
חזרה על הרקע | |
| no-repeat |
חזרה על הרקע | |
| background-attachment | scroll | הרקע זז יחד עם הדף |
| fixed | הרקע קבוע גם כשהדף זז | |
| background-position | 10% 10% | מיקום הרקע - ציר ה-x משמאל וה-y מימין |
| 10px 10px | מיקום הרקע - ציר ה-x משמאל וה-y מימין |
|
| left/center/right top/center/bottom | מיקום הרקע (left center) |
|
עיצוב פס הגלילה
| מאפיין | ערך | דוגמה/הסבר |
 פס גלילה רגיל של חלונות XP. פס גלילה פשוט יותר.שימו לב איזה חלק נצבע באדום כל פעם: |
||
| scrollbar-base-color | [צבע] |  כל חלקי הפס נצבעים |
| scrollbar-face-color | [צבע] |  |
| scrollbar-arrow-color | [צבע] |  |
| scrollbar-shadow-color | [צבע] |  |
| scrollbar-darkshadow-color | [צבע] |  |
| scrollbar-highlight-color | [צבע] |  |
| scrollbar-3dlight-color | [צבע] |  |
| scrollbar-track-color | [צבע] |  |
עיצוב רשימות
| מאפיין | ערך | דוגמה/הסבר |
| list-style-image | none |
|
| url(כתובת הסימן) |
|
|
| list-style-type | none |
|
| disc |
|
|
| circle |
|
|
| square |
|
|
| decimal |
|
|
| lower-roman |
|
|
| upper-roman |
|
|
| lower-latin |
|
|
| upper-latin |
|
|
| hebrew |
|
|
עיצוב שוליים (margin)
| מאפיין | ערך | דוגמה/הסבר |
| margin | כל שולי האלמנט בבת אחת. ניתן לרשום גם כל צד בנפרד לפי הסדר הבא: top right bottom left לדוגמה: style="margin: 10px 5px 7px 5px;" |
|
| 10px או: |
גודל שוליים של אלמנט בפיקסלים | |
| 5% או: |
גודל שוליים של אלמנט באחוזים | |
| margin-top | 10px | שוליים עליונים בפיקסלים |
| 5% | שוליים עליונים באחוזים | |
| margin-bottom | 10px | שוליים תחתונים בפיקסלים |
| 5% | שוליים תחתונים באחוזים | |
| margin-left | 10px | שוליים שמאליים בפיקסלים |
| 5% | שוליים שמאליים באחוזים | |
| margin-right | 10px | שוליים ימניים בפיקסלים |
| 5% | שוליים ימניים באחוזים | |
עיצוב ריפוד (padding)
| מאפיין | ערך | דוגמה/הסבר |
| padding | ריפוד כל צידי האלמנט בבת אחת. ניתן לרשום גם כל צד בנפרד לפי הסדר הבא: top right bottom left לדוגמה: style="padding: 10px 5px 7px 5px;" |
|
| 10px או: |
עובי הריפוד של אלמנט בפיקסלים | |
| 5% או: |
עובי הריפוד של אלמנט באחוזים | |
| padding-top | 10px | ריפוד עליון בפיקסלים |
| 5% | ריפוד עליון באחוזים | |
| padding-bottom | 10px | ריפוד תחתון בפיקסלים |
| 5% | ריפוד תחתון באחוזים | |
| padding-left | 10px | ריפוד שמאלי בפיקסלים |
| 5% | ריפוד שמאלי באחוזים | |
| padding-right | 10px | ריפוד ימני בפיקסלים |
| 5% | ריפוד ימני באחוזים | |
עיצוב מסגרת (border)
המאפיינים הבאים מתייחסים לכל צידי האלמנט בבת אחת. ניתן להגדיר גם כל מאפיין בנפרד לכל צד, כמו ב-margin וב-padding (ראה למעלה), או לפרט אותם בתוך התכונה, לפי הסדר הבא: top right bottom left
לדוגמה:
style="border-color: blue, red, green, red;"
| מאפיין | ערך | דוגמה/הסבר |
| border-width | thin | עובי גבול - דק |
| medium | עובי גבול - בינוני |
|
| thick | עובי גבול - עבה |
|
| 3px | עובי גבול - בפיקסלים |
|
| border-style | none | סוג המסגרת |
| dotted | סוג המסגרת |
|
| dashed | סוג המסגרת |
|
| solid | סוג המסגרת |
|
| groove | סוג המסגרת |
|
| ridge | סוג המסגרת |
|
| inset | סוג המסגרת |
|
| outset | סוג המסגרת |
|
| double | סוג המסגרת |
|
| border-color | transparent | סוג המסגרת - לא עובד ב-IE |
| [צבע] | סוג המסגרת |
|
| border | [width] [style] [color] example: |
שילוב של כל 3 התכונות הנ"ל בתכונה אחת. הסדר לא משנה. |
עיצוב סמן העכבר
| מאפיין | ערך | דוגמה/הסבר |
| הניחו את סמן העכבר מעל כל אחד מהתאים בעמודה הימנית כדי לראות את ההשפעה על הסמן. | ||
| cursor | default | ברירת המחדל בלי קשר לתוכן |
| auto | רגיל לפי סוג התוכן | |
| crosshair | צלב | |
| pointer | מצביע | |
| move | הזזה | |
| text | טקסט | |
| wait | שעון חול | |
| help | סימן שאלה | |
| hand | יד | |
כיוון טקסט
| מאפיין | ערך | דוגמה/הסבר |
| direction | ltr | כיוון הטקסט |
| rtl | כיוון הטקסט | |
| unicode-bidi | embed | לא תמיד ה-direction מספיק בשביל לשנות את כיוון הטקסט. לפעמים צריך להוסיף את התכונה הזאת כשמשחקים על הכיוונים של עברית-אנגלית. |
עיצוב גודל
| מאפיין | ערך | דוגמה/הסבר |
| width | 200px | רוחב האלמנט - קופסה למשל |
| 75% | רוחב האלמנט - קופסה למשל |
|
| height | 50px | גובה האלמנט - קופסה למשל |
| 75% | גובה האלמנט - קופסה למשל |
|
מיקום
| מאפיין | ערך | דוגמה/הסבר |
| vertical-align האפקטים בתוך טבלה (כמו כאן) הם שונים. בשימוש מחוץ לטבלה זה אמור לעבוד. |
top |
מיקום בגובה |
| bottom |
מיקום בגובה | |
| top | 100px | מרחק האלמנט מהגבול העליון של התחום בו הוא נמצא (חלון, טבלה או div) - בפיקסלים או באחוזים |
| 20% | ||
| bottom | 100px | מרחק האלמנט מהגבול התחתון של התחום בו הוא נמצא (חלון, טבלה או div) - בפיקסלים או באחוזים |
| 20% | ||
| left | 100px | מרחק האלמנט מהגבול השמאלי של התחום בו הוא נמצא (חלון, טבלה או div) - בפיקסלים או באחוזים |
| 20% | ||
| right | 100px | מרחק האלמנט מהגבול הימני של התחום בו הוא נמצא (חלון, טבלה או div) - בפיקסלים או באחוזים |
| 20% | ||
| z-index | [מספר שלם] | הרמה בה נמצא האלמנט - מספר גדול יותר פירושו רמה גבוהה יותר, קרובה יותר למסך. אפשר להשתמש גם במספרים שליליים. |
עוד כמה תכונות שאני לא יודעת איזו כותרת לתת להן
| מאפיין | ערך | דוגמה/הסבר |
| visibility | visible | רואים את האלמנט |
| hidden | לא רואים את האלמנט | |
| position | relative | מיקום רגיל בזרימה של הדף, לפי שאר האלמנטים בדף |
| absolute | מיקום ללא תלות בשאר האלמנטים - לפי top, bottom, left, right | |
| fixed | מיקום קבוע ללא קשר לגלילה - האלמנט ישאר תמיד באותה נקודה על המסך | |
| float מקביל ל-align ב-html: גלישה של אלמנטים אחרים סביב האובייקט המדובר. |
none | ללא גלישה |
| left | גלישה משמאל | |
| right | גלישה מימין | |