מדריך CSS מספר 14 - איך להחביא ולהציג אובייקטים

מדריך CSS מספר 14 - איך להחביא ולהציג אובייקטים

במדריך זה נראה כיצד ניתן לשנות את הגדרות האובייקטים כך שלא יהיו נראים לעין, את השינויים נעשה ע"י הגדרת המאפיינים display או visibility.

בינוני 4,698 צפיות

מה תצטרך

  • CSS
  • עיצוב אתר
  • החבאת אלמנטים
  • hidden
  • visibility

שלבים

  1. 1

    שלב 1

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

    שלב 2

    שלב 2
    h2.hide {display:none;} I can see this!

    I'm blind!

  3. 3

    שלב 3

    שלב 3
    הגדרנו שמאפיין הdisplay יקבל ערך none. ניתן לראות (או יותר נכון, לא לראות) שאלמנט הh2 (עם הקלאס hide) לא מופיע בדף האינטרנט שלנו. לעומתו, שימוש בvisibility הוא קצת אחר:
  4. 4

    שלב 4

    שלב 4
    h2.hide {visibility:hidden;} This is visible!

    Sssssshhhh, i'm hiding.

  5. 5

    שלב 5

    שלב 5
    פה, השתמשנו במאפיין הvisibility עם הערך hidden. בדומה לדוגמא הקודמת, גם כאן את הטקסט שבאלמנט הh2 עם הקלאס hide לא נוכל לראות, ההבדל היחיד הוא שבdisplay:none האלמנט לא תופס מקום.

מדריכים קשורים

מדריך CSS: רקעים (background) - איך לשלוט ברקע האתר שלך

מדריך CSS: רקעים (background) - איך לשלוט ברקע האתר שלך

למדו איך להשתמש ב-CSS כדי לשלוט ברקע של אלמנטים באתר. מדריך מפורט עם דוגמאות וטיפים לשימוש נכון ב-CSS background.

קל 8K צפיות
מדריך CSS: רקעים (background) - איך לשלוט ברקע האתר שלך

מדריך CSS: רקעים (background) - איך לשלוט ברקע האתר שלך

למדו איך להשתמש ב-CSS כדי לשלוט ברקע של אלמנטים באתר. מדריך מפורט עם דוגמאות וטיפים לשימוש נכון ב-CSS background.

קל 8K צפיות
ניפוי באגים באתר אינטרנט באמצעות כלי הפיתוח של גוגל כרום

ניפוי באגים באתר אינטרנט באמצעות כלי הפיתוח של גוגל כרום

מדריך מפורט לשימוש בכלי הפיתוח של גוגל כרום לניפוי באגים באתרי אינטרנט, כולל בדיקת HTML, CSS, JavaScript וניטור תעבורת הרשת.

קל 7K צפיות
הורדת והתקנת Sublime Text 2: מדריך למשתמשים מתחילים

הורדת והתקנת Sublime Text 2: מדריך למשתמשים מתחילים

למד כיצד להוריד ולהתקין את Sublime Text 2, עורך טקסט פופולרי לכתיבת קוד HTML, CSS, JavaScript ו-PHP, ופתח בו קבצים בקלות.

קל 7K צפיות
מדריך HTML מפורט - תבניות וטכניקות מתקדמות

מדריך HTML מפורט - תבניות וטכניקות מתקדמות

למד כיצד להשתמש בתבניות HTML מתקדמות ובטכניקות ארגון תוכן ביעילות באמצעות div וטבלאות

בינוני 7K צפיות
מדריך CSS: איך לעצב טבלאות (Tables) בצורה יעילה

מדריך CSS: איך לעצב טבלאות (Tables) בצורה יעילה

למד לעצב ולשדרג טבלאות באתרים שלך באמצעות CSS. מדריך מפורט עם דוגמאות וטיפים מעשיים.

קל 7K צפיות