המדריך השלם לתכונות בשפת CSS
מאת יוסי סיגורה
תכונות (Properties) הן החומר והלבנים שממנו עשויה שפת CSS. למעשה, גיליון CSS הוא אוסף של משפטים המגדירים תכונות כאלה ואחרות לאלמנטים שונים בדף האינטרנט שלנו. בפרק זה של המדריך השלם לשפת CSS רוכזו מרבית התכונות בשפת CSS 2.0. התכונות מקובצות על פי נושאים לנוחות ההתמצאות בהן:
- תכונות לעיצוב רקע
- תכונות לעיצוב טבלאות
- תכונות לעיצוב גבולות
- תכונות לעיצוב שוליים
- תכונות לעיצוב קווי מיתאר
- תכונות לעיצוב שטח ריפוד
- תכונות לעיצוב טקסט וגופנים
- תכונות עמודים
- קביעת ממדי אלמנטים בדף
- עיצוב רשימות
- תכונות למיקום ויישור אלמנטים בדף
- תכונות לעיצוב רשימות
תכונות לעיצוב רקע
| תכונה | הסבר |
|---|---|
| background | מאפשר להגדיר את כל תכונות הרקע בהגדרה אחת. |
| background-attachment | קובע האם תמונת הרקע קבועה או שהיא נעה כאשר גוללים את הדף. |
| background-color | מאפשר לקבוע מה יהיה צבע הרקע של אלמנטים בדף. |
| background-image | מאפשר להגדיר תמונת רקע לאלמנטים בדף. |
| background-position | קובע את נקודת ההתחלה של תמונת רקע בתוך אל |
| background-repeat | קובע את האופן שבו תמונת הרקע תחזור על עצמה ברקע של אלמנט נתון. |
תכונות לעיצוב טבלאות
| תכונה | הסבר |
|---|---|
| border-collapse |
במקרה שהערך שתכונה זו תקבל הוא collapse גבולות הטבלה יהפכו להיות לגבול אחד משותף. |
| border-color | מגדיר את צבע קווי הגבול של הטבלה. |
| caption-side | קובע את מיקומה של כותרת הצד בטבלה. |
| empty-cells | מגדיר האם להציג גבולות ורקע בתאים ריקים בטבלה. |
| table-layout | מגדיר את דרך פריסת ויצירת הטבלה בזמן טעינת דף. בשימוש נכון עשוי להאיץ את מהירות טעינת דף עם טבלאות גדולות. |
תכונות לעיצוב גבולות
| תכונה | הסבר |
|---|---|
| border | מאפשר להגדיר את כל תכונות הגבולות בהגדרה אחת. |
| border-bottom | מאפשר להגדיר את כל התכונות של הגבול התחתון של אלמנט בהגדרה אחת. |
| border-bottom-color | מאפשר לקבוע מה יהיה צבע הגבול התחתון של אלמנט. |
| border-bottom-style | קובע את סגנון קו הגבול התחתון של אלמנט. |
| border-bottom-width | מגדיר את עובי קו הגבול התחתון של אלמנט בדף. |
| border-color | מגדיר את צבע כל גבולות האלמנט. |
| border-collapse |
במקרה שהערך שתכונה זו תקבל הוא collapse גבולות הטבלה יהפכו להיות לגבול אחד משותף. |
| border-left | מאפשר להגדיר את כל תכונות הגבול השמאלי של אלמנט. |
| border-left-color | מגדיר את צבע הגבול השמאלי של אלמנט. |
| border-left-style | קובע את סגנון קו הגבול השמאלי של אלמנט. |
| border-left-width | קובע את עוביו של קו הגבול השמאלי של אלמנט. |
| border-right | מאפשר להגדיר את כל תכונות הגבול הימני של אלמנט נתון. |
| border-right-color | מגדיר את צבע הגבול הימני של אלמנט נתון. |
| border-right-style | קובע את סגנון קו הגבול הימני של אלמנט נתון. |
| border-right-width | קובע את עוביו של קו הגבול הימני של אלמנט נתון. |
| border-spacing | קובע את המרחק בין גבולות של תאים מיושרים בטבלה. |
| border-style | קובע את סגנון הקו של כל ארבעת הגבולות באלמנט נתון. |
| border-top | באמצעות תכונה זו ניתן להגדיר את כל תכונות הגבול העליון של אלמנט נתון. |
| border-top-color | קובע את צבעו של הגבול העליון באלמנט נתון. |
| border-top-style | קובע את סגנון קו הגבול העליון באלמנט נתון. |
| border-top-width | מגדיר את עוביו של קו הגבול העליון. |
| border-width | מגדיר את עוביים של כל קווי הגבול באלמנט נתון. |
תכונות לעיצוב שוליים (Margins)
| תכונה | הסבר |
|---|---|
| margin | מאפשר להגדיר את כל תכונות השוליים במשפט אחד. |
| margin-bottom | מאפשר להגדיר את השוליים בחלקו התחתון של אלמנט נתון. |
| margin-left | מאפשר להגדיר את השוליים בצדו השמאלי של אלמנט נתון. |
| margin-right | מאפשר להגדיר את השוליים בצדו הימני של אלמנט נתון. |
| margin-top | מאפשר להגדיר את השוליים בחלקו העליון של אלמנט נתון. |
תכונות לעיצוב קו מיתאר (Outline)
| תכונה | הסבר |
|---|---|
| outline | מאפשר להגדיר את כל תכונות קווי הגבול החיצוניים במשפט CSS אחד. |
| outline-color | הגדרת צבעו של קו הגבול של אלמנט. |
| outline-style | להגדרת סגנון קו הגבול (רציף, מקווקו, מנוקד וכדומה). |
| outline-width | להגדרת עובי קו הגבול. |
תכונות לעיצוב שטח ריפוד (Padding)
| תכונה | הסבר |
|---|---|
| padding | מאפשר להגדיר את כל תכונות שטח הריפוד באלמנט במשפט CSS אחד. |
| padding-bottom | להגדרת שטח הריפוד התחתון של אלמנט. |
| padding-left | להגדרת שטח הריפוד השמאלי של אלמנט. |
| padding-right | להגדרת שטח הריפוד הימני של אלמנט. |
| padding-top | להגדרת שטח הריפוד העליון של אלמנט. |
תכונות לעיצוב טקסט וגופנים (Text & Fonts)
| תכונה | הסבר |
|---|---|
| color | באמצעות תכונה זו נגדיר את צבע הטקסט. |
| content | משמש להכנסת טקסט לאלמנטים. |
| direction | בעזרת תכונה זו נגדיר את כיוון הטקסט (ימין-שמאל, שמאל-ימין). |
| font | מאפשר להגדיר את כל תכונות הפונטים בשורה אחת. |
| font-family | הגדרת משפחות של פונטים עבור הטקקסט באלמנט כלשהו בדף. |
| font-size | הגדרת גודל הפונט באלמנט נתון. |
| font-style | מאפשר להגדיר האם הפונט יהיה רגיל, נטוי וכדומה. |
| font-variant | מציין האם על הטקסט להיות באותיות קטנות או לא (טוב ללועזית בלבד). |
| font-weight | מציין את רמת ההדגשה של הטקסט. |
| letter-spacing | מאפשר להגדיר את הרווח שבין האותיות בטקסט נתון. |
| line-height | הגדרת גובהן של שורות בתוך אלמנט. |
| quotes | מאפשר להגדיר סוגים שונים של סימנים המציינים ציטוט. |
| text-align | מציין מה יהיה היישור האופקי של טקסט (מיושר לימין, לשמאל, למרכז...). |
| text-decoration | מגדיר כיצד יעוטר הטקסט (קו תחתי, קו חוצה וכדומה). |
| quotestext-indent | מגדיר את מידת כניסת השורה הראשונה של פסקת טקסט . |
| text-shadow | מגדיר האם ובאיזה אופן יהיה לטקסט נתון צל. |
| text-transform | מאפשר להגדיר באותיות לועזיות האם האותיות יופיעו כאותיות גדולות קטנות וכדומה. |
| word-spacing | מאפשר להגדיר את הרווח שבין מילים בטקסט נתון. |
תכונות עמודים (Page properties)
| תכונה | הסבר |
|---|---|
| orphans | באמצעות תכונה זו נגדיר מה יהיה המספר המינימלי של שורות בסופו של עמוד. |
| page-break-after | קובע מה תהיה דרך שבירת עמוד על ידי הדפדפן לאחר אלמנט נתון. |
| page-break-before | קובע מה תהיה דרך שבירת עמוד על ידי הדפדפן לפני אלמנט נתון. |
| page-break-inside | מגדיר את התנהגות שבירת עמוד בתוך אלמנט. |
קביעת ממדי אלמנטים בדף
| תכונה | הסבר |
|---|---|
| Height | מאפשר להגדיר את גובהו של אלמנט נתון. |
| max-height | הגדרת גובהו המקסימלי של אלמנט. |
| max-width | קביעת רוחבו המקסימלי של אלמנט. |
| min-height | קביעת גובהו המינימלי של אלמנט. |
| min-width | קביעת רוחבו המינימלי של אלמנט. |
| width | קביעת רוחבו של אלמנט נתון. |
עיצוב רשימות
| תכונה | הסבר |
|---|---|
| list-style | מאפשר להגדיר את כל תכונות העיצוב לרשימות במשפט אחד. |
| list-style-image | מגדיר תמונה שתוצג בתחילת כל פריט ברשימה. |
| list-style-position | מגדיר את מיקום התמונה שתוצג בכל פריט ברשימה. |
| list-style-type | מציין את סוג הסמן של פריטי הרשימה. |
תכונות למיקום ויישור אלמנטים בדף
| תכונה | הסבר |
|---|---|
| bottom |
למיקום אבסולוטי של אלמנט. מגדיר מה יהיה המרחק של חלקו התחתון של אלמנט נתון משולי האלמנט שבתוכו הוא מקנן. |
| clear | מגדיר באיזה צד של אלמנט לא יוכלו אלמנטים אחרים להתמקם. |
| float | מאפשר להגדיר האם אלמנט יתמקם לצד אלמנט אחר ובאיזה צד. |
| left | להגדרת מיקומו האבסולוטי של אלמנט משמאל לאלמנט אחר. |
| position | מאפשר להגדיר את סוג המיקום של אלמנט - אבסולוטי, סטטי, יחסי וכדומה. |
| right | להגדרת מיקומו של אלמנט מימין לאלמנט אחר. |
| top | במיקום אבסולוטי מגדיר את מיקום חלקו העליון של אלמנט בתוך או מחוץ לאלמנט שבתוכו הוא שוכן. במיקום יחסי מגדיר את מיקום חלקו העליון של אלמנט יחסית לאלמנט שאליו הוא מתייחס. |
| vertical-align | מגדיר את היישור הורטיקלי של אלמנט בהתייחס לאלמנט אחר. |
עיצוב רשימות
| תכונה | הסבר |
|---|---|
| list-style | מאפשר להגדיר את כל תכונות העיצוב לרשימות במשפט אחד. |
| list-style-image | מגדיר תמונה שתוצג בתחילת כל פריט ברשימה. |
| list-style-position | מגדיר את מיקום התמונה שתוצג בכל פריט ברשימה. |
| list-style-type | מציין את סוג הסמן של פריטי הרשימה. |
