שיעור 7: מזהה והקבצה של אלמנטים (מזהה ומחלקה) (Id ו-Class)

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

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

הקבצת אלמנטים באמצעות מחלקה

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

	
	<p>Grapes for white wine:</p>
	<ul>
	<li><a href="ri.htm">Riesling</a></li>
	<li><a href="ch.htm">Chardonnay</a></li>
	<li><a href="pb.htm">Pinot Blanc</a></li>
	</ul>
 
	<p>Grapes for red wine:</p>
	<ul>
	<li><a href="cs.htm">Cabernet Sauvignon</a></li>
	<li><a href="me.htm">Merlot</a></li>
	<li><a href="pn.htm">Pinot Noir</a></li>
	</ul>

ראה דוגמה

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

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

בוא וננסה להגדיר מספר מחלקות בדוגמה הבאה:

	
	<p>Grapes for white wine:</p>
	<ul>
	<li><a href="ri.htm" class="whitewine">Riesling</a></li>
	<li><a href="ch.htm" class="whitewine">Chardonnay</a></li>
	<li><a href="pb.htm" class="whitewine">Pinot Blanc</a></li>
	</ul>
 
	<p>Grapes for red wine:</p>
	<ul>
	<li><a href="cs.htm" class="redwine">Cabernet Sauvignon</a></li>
	<li><a href="me.htm" class="redwine">Merlot</a></li>
	<li><a href="pn.htm" class="redwine">Pinot Noir</a></li>
	</ul>

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

	
	a {
		color: blue;
	}
 
	a.whitewine {
		color: #FFBB00;
	}
 
	a.redwine {
		color: #800000;
	}

ראה דוגמה

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

זיהוי של אלמנט באמצעות מזהה (Id)

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

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

	
	<h1>Chapter 1</h1>
	...
	<h2>Chapter 1.1</h2>
	...
	<h2>Chapter 1.2</h2>
	...
	<h1>Chapter 2</h1>
	...
	<h2>Chapter 2.1</h2>
	...
	<h3>Chapter 2.1.2</h3>
	...

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

	
	<h1 id="c1">Chapter 1</h1>
	...
	<h2 id="c1-1">Chapter 1.1</h2>
	...
	<h2 id="c1-2">Chapter 1.2</h2>
	...
	<h1 id="c2">Chapter 2</h1>
	...
	<h2 id="c2-1">Chapter 2.1</h2>
	...
	<h3 id="c2-1-2">Chapter 2.1.2</h3>
	...

בוא נניח שהכותרת לפרק 1.2 חייבת להיות באדום. זה יכול להיעשות בהתאם עם CSS: