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

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

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

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

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

מדריך CSS מספר 9 - האלמנטים המבחינים div ו-span

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

 

כשאנחנו רוצים ליצור אזורים בעלי עיצוב שונה אנחנו משתמשים באלמנטים של HTML ששמם div ו-span. בעוד div מגדיר אזורים ברמה שמעל לפסקה הבודדת (מפסקה בודדת ועד דף), span מגדיר אזורים בתוך הפסקה (מספר מילים, מילה בודדת או אפילו אות). נתחיל מהעתקת הקוד הבא לקובץ ה-html שנמצא בתיקיית השורש:

<html>
<head>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body> 
<div class="above_paragraph_level"> <h1>?איך נבחין בין אלמנטים בדף האינטרנט</h1> <p> נשתמש ב  <span class="inside_paragraph"> אלמנטים מבחינים </span> </p> </div> <p>.זו רק פסקה להשוואה

</body>
</html>

נשים לב ש-div עוטף את הפסקה <p> ואת הכותרת <h1> מבחוץ. 

נשמור את קובץ ה-html.

 

בנוסף, לכל div ו-span חייבים לתת איזשהי מחלקה (class) או מזהה (id). במקרה זה, ה-div קיבל מחלקה ששמה above_paragraph_level וה-span קיבל מחלקה ששמה inside_paragraph.

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

.above_paragraph_level {
  background: yellow;
}

.inside_paragraph {
  color: green;
}

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

עיצוב דפי אינטרנט באמצעות CSS עם האלמנטים div ו-span

 

סיכום div ו-span

  • div מאפשר עיצוב מעל רמת הפסקה, של מספר פסקאות.
  • span מאפשר עיצוב בתוך הפסקה של כמה מילים או אותיות.
  • כדי לאפשר ל-div ו-span לעבוד אנחנו חייבים להצמיד לכל אחד מהם מחלקה (class) או מזהה ( (id.

 

 

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

 

= 3 + 9