• הרשמה
    • התחברות
    • פוסטים אחרונים
    • תגיות
    • משתמשים
    • קבוצות

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

    מדריכים
    1
    1
    112
    טוען פוסטים נוספים
    • מהישן לחדש
    • מהחדש לישן
    • הכי הרבה הצבעות
    תגובה
    • הגיבו כנושא
    התחברו בכדי לפרסם תגובה
    נושא זה נמחק. רק משתמשים עם הרשאות מתאימות יוכלו לצפות בו.
    • Men770
      Men770 מנהל ראשי מנהל תכנות נערך לאחרונה על ידי 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 תגובה אחרונה תגובה ציטוט 4
      • פוסט ראשון
        פוסט אחרון