תחי ישראל - אין לנו ארץ אחרת

תחי ישראל -אין לנו ארץ אחרת

מדריך 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.

 

למדריך הבא בסדרת ה-CSS

לכל מדריכי ה-CSS

 

 

אהבתם? לא אהבתם? דרגו!

0 הצבעות, ממוצע 0 מתוך 5 כוכבים

 

 

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

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

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

המשתמש באתר צריך להיות מודע לכך שאם וכאשר הוא מפתח קוד בשביל פרויקט הוא חייב לשים לב ולהשתמש בסביבת הפיתוח המתאימה ביותר, הבטוחה ביותר, היעילה ביותר וכמובן שהוא צריך לבדוק את הקוד בהיבטים של יעילות ואבטחה. מי אמר שלהיות מפתח זו עבודה קלה ?

השימוש שלך באתר מהווה ראייה להסכמתך עם הכללים והתקנות שנוסחו בהסכם תנאי השימוש.

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

 

 

ענה על השאלה הפשוטה הבאה כתנאי להוספת תגובה:

איך קוראים בעברית לצ`ופצ`יק של הקומקום?