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

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

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

  • הקבצה עם <span>
  • הקבצה עם <div>

הקבצה עם <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).

<< שיעור 7 - מזהה והקבצת אלמנטים (Id ו-Classes)

שיעור 9: מודל התיבה >>

cron