CSS/עיצוב רשימות

< CSS

תזכורת

עריכה

יש כמה סוגי רשימות ב-HTML:

  • ul
  • ol
  • dl

המאפיין list-style

עריכה

המאפיין list-style קובע את סוג התבליט ויכול לקבל את הערכים הבאים

  • disc - עיגול מלא ליד כל פריט
  • circle - מעגל ליד כל פריט
  • square - ריבוע ליד כל פריט
  • decimal - מספר
  • decimal-leading-zero - מספר עם אפסים בהתחלה
  • hebrew - גימטריה
  • lower-roman - ספרות רומיות קטנות
  • upper-roman - ספרות רומיות גדולות
  • none - ללא שום תבליט

דוגמא

עריכה
<html>
<head>
<style type="text/css">
ul.disc {list-style-type: disc;}
ul.circle {list-style-type: circle;}
ul.square {list-style-type: square;}
ul.none {list-style-type: none;}
</style>
</head>

<body>
<ul class="disc">
<li>אתר א</li>
<li>אתר ב</li>
<li>אתר ג</li>
</ul>

<ul class="circle">
<li>אתר א</li>
<li>אתר ב</li>
<li>אתר ג</li>
</ul>

<ul class="square">
<li>אתר א</li>
<li>אתר ב</li>
<li>אתר ג</li>
</ul>

<ul class="none">
<li>אתר א</li>
<li>אתר ב</li>
<li>אתר ג</li>
</ul>
</body>

</html>

התוצאה שתתקבל בדוגמה זו היא אוסף של רשימות מהצורה

  • אתר א
  • אתר ב
  • אתר ג

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


הפרק הקודם:
גבולות
עיצוב רשימות הפרק הבא:
סוגי מדיה