CSS -  המדריך ליישור אלמנטים בדף HTML

התכונה Display ותפקידה ביישור אלמנטים בדף

התכונה display - וליתר דיוק הערך inline שהיא מקבלת - היא שחקן מרכזי ביישור אלמנטים כך שישכנו זה לצד זה. באמצעות תכונה זו ביכולתנו לקבוע איזה סוג של קופסה תהיה סביב אלמנט. אלמנטים מסוג קופסא כגון פסקאות <p> או <div> וכדומה מכילים בתוכם כברירת מחדל גם שובר שורה <br/>. מצב זה גורם לכך שמעבר בין פסקה לפסקה למשל  יכניס את הפסקה החדשה לשורה חדשה ויצור הפרדה בין פסקה לפסקה.

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

 
<html>
<head>
<style type="text/css">
  .align {display:inline}
</style>
</head>

<body>
   <p class="align">This is the first paragraph.</p>
   <p class="align">This is the second paragraph.</p>
   <p>This is the third paragraph.</p>
</body>

</html>

   

מלבד הערך inline יכולה התכונה Display לקבל את הערכים הבאים:

תכונה ערכים הסבר
display block כאשר אלמנט מקבל ערך זה הוא מתנהג כמו פסקה או div
אשר מעליהם ומתחתם ישנו רווח המפריד בינם לבין אלמנטים
אחרים.
inherit האלמנט מקבל את ערכו של האלמנט שבתוכו הוא שוכן.
inline האלמנט יוצג בתוך השורה, בתוך הבלוק הקיים וזאת גם אם
מטבעו האלמנט מכיל שבירת שורות מעליו או מתחתיו.
משמש לעתים קרובות ליישור אלמנטים והצגתם זה לצד זה.
inline-block האלמנט יתמקם בתוך השורה כמו במצב inline אולם מכל שאר
הבחינות יתנהג כבלוק עצמאי.
inline-table האלמנט יצור סביבו קופסה בתוך השורה המתנהגת כמו טבלה
אך ללא שבירת שורות מעל או מתחת לקופסא.
list-item האלמנט יתנהג כאילו היה פריט ברשימה, בדרך כלל משמעות
הדבר תהיה שיקבל תבליט לפניו כפי שנהוג ברשימות לא
ממסודרות מסוג <ul>. בגרסאות שונות של דפדפנים יתכן
ויוצגו מספרים במקום התבליטים ואז האלמנט יתנהג
כמו ברשימות מסודרות מסוג <ol>.
none האלמנט לא יוצג כלל.
run-in אם אלמנט קופסא המקבל ערך זה יוצב לאחר אלמנט קופסא אחר
הוא יתנהג כאילו האלמנט שלפניו הוא האלמנט הראשון בשורה
ותייצב מיד אחריו.
table אלמנט המקבל ערך זה יתנהג כמו טבלה מבחינה זו שברישא
ובסיפא שלו יהיו שבירות שורה היוצרות רווח והאלמנטים
המקננים בתוכו יתנהגו כמו אלמנטים המרכיבים טבלה כגון
ההאלמנטים <td> ו - <tr>.
table-caption אלמנט המקבל ערך זה יתנהג בצורה זהה לאלמנט <caption>.
table-cell אלמנט המקבל ערך זה יתנהג בצורה זהה לתא בטבלה.
table-column אאלמנט המקבל ערך זה יתנהג כאילו היה עמודה <col> בטבלה
table-column-group אלמנט המקבל ערך זה יתנהג כאלמנט <colgroup>
table-footer-group אלמנט המקבל ערך זה יתנהג כקבוצת פוטר בטבלה
table-header-group אלמנט המקבל ערך זה יתנהג כשורת כותרת בטבלה.
table-row אאלמנט המקבל ערך זה יתנהג כשורה <tr> בטבלה.
table-row-group אאלמנט המקבל ערך זה יתנהג כקבוצה של שורות בטבלה.


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