מדריכים על HTML ו-CSS - בנה אתר אינטרנט משלך

שיעור 8: הקבצה של אלמנטים  (Span ו-Div)

האלמנטים <span> ו-<div> משמשים לקיבוץ ובניית מסמך ולרוב נעשה בהם שימוש ביחד עם המאפיינים מחלקה (class) ומזהה (id).

בשיעור זה נראה את השימוש ב- <span> ו-<div> ואת חשיבותם המרכזית של שני תגי HTML אלו בכל הנוגע ל-CSS.

הקבצה עם <Span>

האלמנט <span> יכול להיקרא אלמנט טבעי שאינו מוסיף דבר למסמך עצמו. אבל, עם CSS האלמנט <span> יכול לשמש להוספת מאפיינים חזותיים לחלקים ייחודיים במסמכים שלך.

דוגמה לכך יכול להיות הציטוט הבא של בנג'מין פרנקלין:


<p>Early to bed and early to rise
makes a man healthy, wealthy and wise.</p>

בוא ונאמר שאנחנו רוצים להדגיש באדום את מה שמר פרנקלין רואה כניצול טוב של היום. למטרה זו אנחנו אנחנו יכולים לסמן קטע זה ב-<span>. לכל span נוסיף מחלקה שאנחנו יכולים להגדיר בגיליון העיצוב שלנו.


<p>Early to bed and early to rise
makes a man <span class="benefit">healthy</span>,
<span class="benefit">wealthy</span>
and <span class="benefit">wise</span>.</p>

ה-CSS המשויך לו:


span.benefit {
	color:red;
}

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

הקבצה עם <Div>

בעוד שב-<span> נעשה שימוש ברמת הקטע של אלמנט כפי שראית בדוגמה הקודמת,  ב-<div> משתמשים לקיבוץ ברמה של קטע אלמנט אחד או כמה.

פרט להבדל זה, הקבצה עם <div> זהה פחות או יותר. בוא ונראה דוגמה עם שתי רשימות של נשיאי ארה"ב הנחלקים לפי שייכותם הפוליטית:


<div id="democrats">
<ul>
<li>Franklin D. Roosevelt</li>
<li>Harry S. Truman</li>
<li>John F. Kennedy</li>
<li>Lyndon B. Johnson</li>
<li>Jimmy Carter</li>
<li>Bill Clinton</li>
</ul>
</div>

<div id="republicans">
<ul>
<li>Dwight D. Eisenhower</li>
<li>Richard Nixon</li>
<li>Gerald Ford</li>
<li>Ronald Reagan</li>
<li>George Bush</li>
<li>George W. Bush</li>
</ul>
</div>

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


#democrats {
	background:blue;
}

#republicans {
	background:red;
}

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

סיכום

בשיעורים 7 ו-8 למדת על הבוררים id ו-class ועל האלמנטים span ו-div.

עתה יש באפשרותך לקבץ ולזהות פחות או יותר את כל חלקי המסמך שזו התקדמות גדולה בדרך למומחיות ב-CSS. בשיעור 9 נציג לך את מודל התיבה (box).

ראה גם

Search