לוגו האתר
    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Users
    • Groups

    23c4eb44-2a95-4f93-be69-843c8d729b1f-image.png

    מדריך בסיסי | CSS - חלק ה' | -- מודל הקופסא. --

    מדריכים
    1
    1
    67
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • Men770
      Men770 מנהל ראשי מנהל תכנות last edited by Men770

      ב"ה.


      #guide(מודל הקופסא - Box model.)

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


      אז איך זה עובד?
      מודל הקופסא מורכב מ-4 דברים:

      • position - המיקום בדף. (זה לא באמת חלק מהמודל. זו התוספת שדיברתי עליה…)
      • margin - שטח מחוץ למסגרת, הגדרות כמו רקע לא חלים עליו.
      • border - מסגרת.
      • padding - שטח בתוך המסגרת, הגדרות כמו רקע חלות עליו.

      position

      את position מגדירים כך:
      left: מרחק מצד שמאל.
      right: מרחק מצד ימין.
      top: מרחק מלמעלה.
      bottom: מרחק מלמטה.
      position לא עובד ללא הגדרת ההגדרה שנקראת “position”.
      2 האפשרויות הנפוצות שלה הן:

      • relative - המיקום משפיע באופן יחסי למיקום הנוכחי (ניתן להשתמש במינוס.)
      • absolute - המיקום משפיע ללא כל קשר למקום ההתחלתי, אלא ביחס לתחילת הדף.

      margin

      את margin מגדירים כך:
      margin-left: מרחק מצד שמאל.
      margin-right: מרחק מצד ימין.
      margin-top: מרחק מלמעלה.
      margin-bottom: מרחק מלמטה.

      border

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

      padding

      את padding מגדירים כך:
      padding-left: מרחק מצד שמאל.
      padding-right: מרחק מצד ימין.
      padding-top: מרחק מלמעלה.
      padding-bottom: מרחק מלמטה.


      בכל ההגדרות (חוץ מ-position), אפשר להגדיר הגדרה זהה לכל הצדדים כך:
      שם ההגדרה: ערך;
      לדוגמא:

      margin: 1px;
      padding: 1px;
      

      יש עוד 2 דברים, height ו-width.
      height - גובה.
      width - רוחב.
      איתם מגדירים את רוחב האלמנט.


      והנה דוגמא לאתר מהפרק הקודם, אבל עם מה שלמדנו היום.


      בהצלחה!

      |- יחי אדוננו מורנו ורבינו מלך המשיח לעולם ועד! -|

      |-יש לנו ב"ה אתר חדש, מוזמנים להיכנס.-|

      1 Reply Last reply Reply Quote 4
      • First post
        Last post
      חוקי הפורום