CSS List

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

CSS List

Σε κάποιον τρόπο, οποιοδήποτε περιεχόμενο που δεν είναι περιγραφικό μπορεί να θεωρηθεί λίστα. Απογραφές, ηλιακό σύστημα, γενεαλογικό δέντρο, λίστα επισκεπτών, ακόμη και όλοι οι φίλοι σου μπορούν να εκφραστούν ως λίστα ή λίστα λιστών.

Επειδή οι λίστες είναι τόσο ποικίλες, αυτό κάνει τις λίστες πολύ σημαντικές, οπότε η έλλειψη πλούσιων στυλ λίστας στο CSS είναι πραγματικά ένα μεγάλο λάθος.

Τύπος λίστας

Για να επηρεάσεις το στυλ της λίστας, η πιο απλή και πιο ευρέως υποστηριζόμενη μέθοδος είναι να αλλάξεις τον τύπο της σημαίας.

π.χ., σε μια μη ευ序λίστα, η σημαία του στοιχείου της λίστας (marker) είναι ένας κύκλος που βρίσκεται δίπλα σε κάθε στοιχείο της λίστας. Σε μια ευ序λίστα, η σημαία μπορεί να είναι γράμμα, αριθμός ή κάποιο άλλο σύστημα αρίθμησης.

Για να αλλάξεις τον τύπο σημαίας του στοιχείου της λίστας, μπορείς να χρησιμοποιήσεις την ιδιότητα list-style-type:

ul {list-style-type : square}

Η παραπάνω δήλωση ορίζει τη σημαία του στοιχείου της μη ευ序λίστας ως τετράγωνο.

εικόνα στοιχείου λίστας

Συχνά, τα συμβατικά σημάδια δεν είναι αρκετά. Μπορείς να θέλεις να χρησιμοποιήσεις μια εικόνα για κάθε σημαία, κάτι που μπορεί να χρησιμοποιηθεί list-style-image η ιδιότητα κάνει:

ul li {list-style-image : url(xxx.gif)}

παρά μόνο με τη χρήση μιας τιμής url(), μπορεί να χρησιμοποιηθεί μια εικόνα ως σημαία.

θέση σημαίας λίστας

Το CSS2.1 μπορεί να καθορίσει αν η σημαία εμφανίζεται εκτός ή μέσα στο περιεχόμενο της λίστας. Αυτό γίνεται με τη χρήση list-style-position τελειωμένο.

Σύντομη λίστα στυλ

Για απλότητα, μπορεί να συγχωνευθούν οι παραπάνω 3 ιδιότητες λίστας σε μια ευκολότερη ιδιότητα:list-styleόπως αυτό:

li {list-style : url(example.gif) square inside}

Οι τιμές του list-style μπορούν να αναφέρονται σε οποιαδήποτε σειρά και αυτές μπορούν να αγνοηθούν. Αρκεί να παρέχεται μια τιμή, οι άλλες θα συμπληρωθούν με τις προεπιλεγμένες τους τιμές.

Παράδειγμα CSS λίστας:

Σε μια μη ευ序λίστα, τα σημάδια των διαφορετικών τύπων των σημαδιών της λίστας
This example demonstrates different types of list item markers in CSS.
Σε μια ευ序λίστα, τα σημάδια των διαφορετικών τύπων των στοιχείων της λίστας
This example demonstrates different types of list item markers in CSS.
All List Style Types
This example demonstrates all different types of list item markers in CSS.
Using Image as List Item Marker
This example demonstrates how to use an image as a list item marker.
Placing List Marker
This example demonstrates where to place the list marker.
Define all list properties in one declaration
This example demonstrates how to set all list properties in one shorthand attribute.

CSS List Properties (list)

Property Description
list-style Abbreviated attribute. Used to set all properties used for lists in one declaration.
list-style-image Set the image as the list item marker.
list-style-position Set the position of the list item marker in the list.
list-style-type Set the type of list item marker.
marker-offset