Στυλ λίστας - CSS-Κόλπα

Η list-styleιδιότητα είναι μια στενή ιδιότητα που ορίζει τιμές για τρεις διαφορετικές ιδιότητες που σχετίζονται με τη λίστα σε μία δήλωση:

ul ( list-style: || || ; )

Ακολουθεί ένα παράδειγμα της σύνταξης:

ul ( list-style: square outside none; )

Ποια θα ήταν η ίδια με την ακόλουθη μακροχρόνια έκδοση:

ul ( list-style-type: square; list-style-position: outside; list-style-image: none; )

Στο στενό, εάν παραλείπονται τυχόν τιμές, θα επανέλθουν στην αρχική τους κατάσταση.

Τιμές για list-style-type

Η list-style-typeιδιότητα καθορίζει τον τύπο λίστας ορίζοντας το περιεχόμενο κάθε δείκτη ή κουκκίδας στη λίστα. Οι αποδεκτές τιμές λέξεων-κλειδιών list-style-typeπεριλαμβάνουν:

• disc
• circle
• square
• decimal
• decimal-leading-zero
• lower-roman
• upper-roman
• lower-greek
• lower-latin
• upper-latin
• armenian
• georgian
• lower-alpha
• upper-alpha
• none

Το MDN έχει μια πιο ολοκληρωμένη λίστα. Οι τιμές χωρίς λέξεις-κλειδιά εισήχθησαν στο CSS3 και αρχίζουν να βλέπουν κάποια υποστήριξη, όπως:

ul ( list-style-type: "→"; )

Η ακόλουθη επίδειξη περιλαμβάνει μια ομάδα λιστών χωρίς ταξινόμηση για να δείξει κάθε τιμή λέξης-κλειδιού:

Η list-style-typeιδιότητα ισχύει για όλες τις λίστες και για οποιοδήποτε στοιχείο έχει οριστεί σε display: list-item.

Το χρώμα του δείκτη λίστας θα είναι ανεξάρτητα από το υπολογιστικό χρώμα του στοιχείου (ορίστε μέσω της colorιδιότητας).

Τιμές για list-style-position

Η list-style-positionιδιότητα καθορίζει πού να τοποθετήσει το δείκτη λίστας και δέχεται μία από τις δύο τιμές: insideή έξω. Αυτά παρουσιάζονται παρακάτω με την paddingκατάργηση από τις λίστες και ένα αριστερό κόκκινο περίγραμμα που προστίθεται:

Τιμές για list-style-image

Η list-style-imageιδιότητα καθορίζει εάν ο δείκτης λίστας έχει οριστεί με μια εικόνα και αποδέχεται μια τιμή "κανένα" ή μια διεύθυνση URL που δείχνει την εικόνα:

ul ( list-style-image: url(images/bullet.png.webp); )

Περισσότερες επιδείξεις

Υποστήριξη προγράμματος περιήγησης

Χρώμιο	Σαφάρι	Firefox	ΛΥΡΙΚΗ ΣΚΗΝΗ	ΙΕ	Android	iOS
Εργα	Εργα	Εργα	Εργα	Εργα	Εργα	Εργα

Το IE6 / 7 δεν υποστηρίζει όλες τις τιμές των λέξεων-κλειδιών list-style-typeκαι έχουν επίσης ένα σφάλμα όπου τα στοιχεία λίστας αιωρούμενων δεν εμφανίζουν το δείκτη λίστας τους. Αυτό επιλύεται χρησιμοποιώντας μια εικόνα φόντου (αντί list-style-image) στα στοιχεία της λίστας.