Ιδιότητα list-style-type

Η ιδιότητα list-style-type επιτρέπει για μια λίστα ul αντί για δείκτες-τελείες να κάνει τετράγωνα ή κύκλους. Για μια λίστα ol αντί για συνηθισμένους αριθμούς μπορεί να κάνει ρωμαϊκούς, αρίθμηση σε μορφή γραμμάτων: λατινικών ή ελληνικών.

Σύνταξη

επιλογέας {
	list-style-type: τιμή;
}

Τιμές για ul

Τιμή	Περιγραφή
`circle`	Δημιουργεί δείκτες σε μορφή κύκλων.
`disc`	Δημιουργεί δείκτες σε μορφή γεμισμένων κύκλων.
`square`	Δημιουργεί δείκτες σε μορφή τετραγώνων.
`none`	Αφαιρεί τους δείκτες.

Προεπιλεγμένη τιμή: disc.

Τιμές για ol

Τιμή	Περιγραφή
`armenian`	Παραδοσιακή αρμενική αρίθμηση.
`decimal`	Αραβικοί αριθμοί.
`decimal-leading-zero`	Αραβικοί αριθμοί με μηδέν μπροστά για αριθμούς μικρότερους του δέκα.
`georgian`	Παραδοσιακή γεωργιανή αρίθμηση.
`lower-alpha`	Πεζά λατινικά γράμματα.
`lower-greek`	Πεζά ελληνικά γράμματα.
`lower-latin`	Αυτή η τιμή είναι ανάλογη της lower-alpha.
`lower-roman`	Ρωμαϊκοί αριθμοί σε πεζά γράμματα.
`upper-alpha`	Κεφαλαία λατινικά γράμματα.
`upper-latin`	Αυτή η τιμή είναι ανάλογη της upper-alpha.
`upper-roman`	Ρωμαϊκοί αριθμοί σε κεφαλαία γράμματα.
`none`	Αφαιρεί τους δείκτες.

Προεπιλεγμένη τιμή: decimal.

Παράδειγμα

<ul>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
</ul>

ul {
	list-style-type: disc;
}

Παράδειγμα

<ul>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
</ul>

ul {
	list-style-type: circle;
}

Παράδειγμα

<ul>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
</ul>

ul {
	list-style-type: square;
}

Παράδειγμα

<ul>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
</ul>

ul {
	list-style-type: none;
}

Παράδειγμα

<ol>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
</ol>

ol {
	list-style-type: decimal;
}

Παράδειγμα

<ol>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
</ol>

ol {
	list-style-type: armenian;
}

Παράδειγμα

<ol>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
</ol>

ol {
	list-style-type: decimal-leading-zero;
}

Παράδειγμα

<ol>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
</ol>

ol {
	list-style-type: georgian;
}

Παράδειγμα

<ol>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
</ol>

ol {
	list-style-type: lower-alpha;
}

Παράδειγμα

<ol>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
</ol>

ol {
	list-style-type: lower-greek;
}

Παράδειγμα

<ol>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
</ol>

ol {
	list-style-type: lower-latin;
}

Παράδειγμα

<ol>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
</ol>

ol {
	list-style-type: lower-roman;
}

Παράδειγμα

<ol>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
</ol>

ol {
	list-style-type: upper-alpha;
}

Παράδειγμα

<ol>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
</ol>

ol {
	list-style-type: upper-roman;
}

Παράδειγμα

Αυτό το παράδειγμα δείχνει ότι η ιδιότητα color επηρεάζει όχι μόνο το χρώμα του κειμένου, αλλά και το χρώμα των δεικτών:

<ul>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
</ul>

ul {
	list-style-type: disc;
	color: red;
}

Δείτε επίσης

η ιδιότητα list-style-image,
που ορίζει δείκτες σε μορφή συγκεκριμένων εικόνων
η ιδιότητα list-style-position,
που ορίζει τη θέση των δεικτών
η ιδιότητα list-style,
που είναι μια συντόμευση για τους δείκτες