Ιδιότητα 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,
που είναι μια συντόμευση για τους δείκτες