נגישות       נגישות
שינוי גודל טקסט:
א א א
שינוי צבעי האתר:
? מקשי קיצור:

לחיצה חוזרת ונשנית על המקש Tab תעביר אתכם בין הקישורים והאזורים השונים בעמוד.

הפעלת מקשי הקיצור תלויה בדפדפן שבו אתם משתמשים.

Internet Explorer, Chrome ובגרסאות ישנות של Firefox: לחצו על מקש Alt ועל מקש המספר או האות על-פי הרשימה. ב Firefox 3 ומעלה: לחצו על המקשים Alt + Shift + המספר או האות.

S - עבור לתוכן הדף
L - חיפוש
1- עמוד הבית
2 - פרוייקטים
3 - מדריכים
4 - אודות
5 - צרו קשר
6 - הצהרת נגישות
 

מדריך CSS מספר 22 - הצגה והסתרה של אלמנטים

מחבר:
בתאריך:

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

 

הצגת אלמנטים באמצעות display

display: block גורם להצגת האלמנטים האחד מתחת לשני, כשאין לצידם אלמנטים נוספים של html אלא אם הוגדר אחרת באמצעות float ודומיו. כך זה נראה. שלושה אלמנטים מסודרים אחד מתחת לשני.

display:block גורם להצגת האלמנטים אחד מתחת לשני

 

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

display:inline גורם להצגת האלמנטים אחד לצד השני

הבעיה עם display:inline שאי-אפשר לקבוע את רוחבם של אלמנטים באמצעות התכונה width. כדי שנוכל לקבוע את רוחבם של אלמנטים נשתמש ב-display: inline-block

הסתרת אלמנטים

כשמעצבים אתרים עולה מדי פעם הצורך להסתיר אלמנטים. במדריך זה נלמד להסתיר אלמנטים באמצעות התכונות display ו-visibility

כדי להדגים את פעולתם של התכונות נתחיל בהעתקת הקוד הבא לקובץ ה-html:

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
       <p dir="rtl" class="para_1">
         פסקה להדגמת ההבדל בין התכונות 
         visibility, display
       </p>
       <p dir="rtl" class="hide">
         פסקה נוספת להדגמת ההבדל בין התכונות 
         visibility, display
       </p>
        <p dir="rtl" class="para_1">
        טקסט נוסף כלשהו בתוך פסקה
       </p>
  </body>
</html>

הקוד מייצר שתי פסקאות ששייכות למחלקה para_1 וביניהן פסקה ששייכת למחלקה hide.

כדי לראות את המצב ללא הסתרה של אלמנטים נכתוב את הקוד הבא לגיליון העיצוב החיצוני, style.css:

p {
border: 1px solid black;
padding: 5px;
}
.para_1 {
background: yellow;
}
.hide {
background: gray;
}

משמעות הקוד היא שאנחנו נותנים קו מתאר ורווח פנימי לכל הפסקאות, וצבעי רקע שונים למחלקות.

 

הסתרת אלמנט באמצעות display:none

נריץ את קובץ ה-html באמצעות הדפדפן, ונצפה בתוצאה:

 

המצב הרגיל לפני הסתרת האלמנטים באמצעות פקודות CSS

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

כדי לראות את השפעת display:none נכתוב מחדש את הקובץ style.css, כשהפעם מוסיפים את התכונה לפסקה האפורה:

p {
border: 1px solid black;
padding: 5px;
}
.para_1 {
background: yellow;

.hide {
background: gray;
display: none;

נריץ את הקובץ ה-html באמצעות הדפדפן, ונראה את התוצאה:

 

השתמשנו בdisplay none כדי להסתיר אלמנט והאלמנט נעלם לגמרי

אנחנו יכולים ש-display:none גרם להעלמות הפסקה האפורה באופן מוחלט.

 

הסתרת אלמנט באמצעות visibility:hidden

כדי לראות את השפעת visibility:hidden על הנראות נכתוב מחדש את הקובץ style.css:

p {
border: 1px solid black;
padding: 5px;
}
.para_1 {
background: yellow;

.hide { 
background: gray;
visibility: hidden;
}

נריץ את קובץ ה-html על הדפדפן, וזה מה שנראה:

 

שימוש ב-visibility hidden מעלים את האלמנט ומשאיר מרווח לבן במקום

אפשר לראות שvisibility:hidden גרמה להסתרת הפסקה האפורה, והשאירה במקומה מרווח לבן.

סיכום הסתרת אלמנטים

אפשר להסתיר אלמנטים באמצעות display:none ואז הם נעלמים בלי עקבות או באמצעות visibility:hidden ואז הם נעלמים אבל משאירים מרווח לבן במקום שבו היו צריכים להימצא.

 

 

 

הוסף תגובה חדשה

 

= 4 + 8