"/>

מספור אוטומטי של אלמנטים בדף HTML

אחד השימושים הנפוצים ביותר בתכונה content ב - CSS היא השימוש בה לצד פונקציות נוספות בשפה לצורך יצירת מספור אוטומטי של אלמנטים מכל הסוגים. כך, אנו יכולים להשתחרר מהתלות ברשימות ממוינות מסוג <ol> ולהשתמש בכל אלמנט אחר שנרצה בו כגון פסקאות <p> או <div> או לחילופין למספר את התגים הסמנטיים החדשים ב - HTML5 כגון <section> ו - <article>.

הערה: כדי שהתכונה content תעבוד באינטרנט אקספלורר 8 יש להוסיף בראש הדף את ה - DOCTYPE. נעשה זאת כך:

<!DOCTYPE html>

התכונות counter-reset ו - counter-increment

שתי תכונות (properties) ב - CSS משמשות כבסיס לבניית מספור אוטומטי לאלמנטים בדף אינטרנט. התכונות הן:

1. התכונה counter-reset

 תכונה זו מאפשרת לנו ליצור מונה (counter) אחד או יותר ואף להעניק למונה זה שם שמאוחר יותר נוכל להשתמש בו. להלן דוגמה לשימוש בתכונה זו:

h1 { counter-reset: section; }

בדוגמה שלמעלה יצרנו קשר בין האלמנט <h1> לבין מונה ששמו section. בהמשך נראה איזה שימוש נוכל לעשות ב"שידוך" שעשינו בין שניים אלה.

2. counter-increment

תכונה זו מאפשרת לנו להוסיף ערך למונה שלנו. נניח למשל שנרצה להוסיף ערך למונה שהגדרנו למעלה ששמו section נעשה זאת כך:

h2{
counter-increment: section;
}

בדוגמה שלמעלה הוספנו למונה ששמו section ערך אחד נוסף בכל פעם שהוא "פוגש" באלמנט <h2>.

הוספת המספור שיצרנו עם המונים האוטומטיים לדף האינטרנט שלנו לצורך תצוגה

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

בדוגמה הבאה אראה כיצד נכניס לתחילת התוכן בתג <h2> את המספר שבמונה שלנו:

h2:before {
counter-increment: section;
content: counter(section) ". ";
}

מספור אוטומטי של פסקאות בעזרת קוד CSS

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

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
   p {
      counter-increment: cnt;
     }

   p:before {
     content:counter(cnt) ". ";
     }
</style>
</head>

<body>
<p>This is the first paragraph</p>
<p>This is the second paragraph</p>
<p>This is the third paragraph</p>

</body>
</html>

   


מספור אוטומטי של אלמנטים ותת אלמנטים

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

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
   h1 { counter-reset: section; }
   h2 { counter-reset: subsection; }
   h2:before {
      content: counter(section) ". ";
      counter-increment: section;
   }
   p:before {
     content: counter(section) "." counter(subsection) " ";
     counter-increment: subsection;
   }
</style>
</head>
<body>

<h1>Menu</h1>
<h2>Pasta</h2>
<p>Lasagna</p>
<p>Alfredo</p>
<p>Polio</p>

<h2>Drinks</h2>
<p>Cola</p>
<p>Ice Tea</p>
<p>Orange Juice</p>
<p>Lemon Juice</p>

</body>
</html>

   

 

כלים ומאמרים בנושא

מדריך מפורט לתכונה content והדרך להשתמש בה נכון.

קישורים ב - HTML

מדריך לפסאודו אלמנטים ב - CSS


 
© 2010-2013  www.Devschool.co.il | מדיניות פרטיות | תנאי שימוש