המדריך השלם לתכונות בשפת CSS

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

  1. תכונות לעיצוב רקע
  2. תכונות לעיצוב טבלאות
  3. תכונות לעיצוב גבולות
  4. תכונות לעיצוב שוליים
  5. תכונות לעיצוב קווי מיתאר
  6. תכונות לעיצוב שטח ריפוד
  7. תכונות לעיצוב טקסט וגופנים
  8. תכונות עמודים
  9. קביעת ממדי אלמנטים בדף
  10. עיצוב רשימות
  11. תכונות למיקום ויישור אלמנטים בדף
  12. תכונות לעיצוב רשימות

תכונות לעיצוב רקע

תכונה הסבר
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 מציין את סוג הסמן של פריטי הרשימה.

 

 
© 2010-2013  www.Devschool.co.il | מדיניות פרטיות | תנאי שימוש