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

Ορισμός στυλ στα bullets κάθε επιλογή της λίστας

Με την ιδιότητα list-type-style μπορούμε να ορίσουμε διαφορα στυλ για το bullet μιας λίστας. Οι τιμές που μπορεί να πάρει η ιδιότητα αυτή διοφέρουν όταν πρόκειται για αριθμημένες και μη-αριθμημένες λίστες:
  • τιμές για μη-αριθμημένες λίστες <ul>: none, disc, circle,square
  • τιμές για αριθμημένες λίστες <ol>: decimal, decimal-leading-zero, lower-roman, upper-roman, lower-alpha, upper-alpha, lower-greek, lower-latin, upper-latin, hebrew, armenian, georgian, cjk-ideographic, hiragana, katakana, hiragana-iroha, katakana-iroha
Ορισμός διαφορετικών bullets για αριθμητικές και μη-αρηθμιτικές λίστες
Παραδείγματα με μη-αριθμητικές λίστες:
ul.a {list-style-type:circle;}
ul.b {list-style-type:square;}

Παραδείγματα με αριθμητικές λίστες:
ol.c {list-style-type:upper-roman;}
ol.d {list-style-type:lower-alpha;}
Το παράδειγμα αυτό παρουσιάζει όλα τα διαθέσιμα στυλ που μπορούν να έχουν τα bullets των αριθμημένων και των μη-αριθμημένων λιστών

Ορισμός εικόνας αντί για bullet σε μια λίστα

Με την ιδιότητα list-style-image μπορούμε να ορίσουμε μια εικόνα που θα εμφανίζεται στην θέση των bullets κάθε επιλογής μιας λίστας.
Ορισμός εικόνας αντί για bullet
ul
{
list-style-image: url('bullet2.gif');
}
Το στυλ του παραπάνω παραδείγματος εμφανίζει την εικόνα λίγο πιο ψηλά στους browsers Opera και IE. Στο παρακάτω παρουσιάζεται η σύνταξη που δουλεύει σε όλους τους browsers
Τρόπος ορισμού εικόνας αντί για bullet που να δουλεύει σε όλους τους browses
ul
{
list-style-type: none;
padding: 0px;
margin: 0px;
}

li
{
background-image: url('bullet2.gif');
background-repeat: no-repeat;
background-position: 0px 5px;
padding-left: 14px;
}
Εξήγηση του παραπάνω παραδείγματος:
για την ετικέτα <ul>:
  • η ιδιότητα list-style-type με την τιμή none αφαιρεί τα bullets από όλες τις επιλογές της λίστας
  • ορίζουμε την τιμή 0 για padding και margin

για την ετικέτα <li>:
  • με την ιδιότητα background-image ορίζουμε το url του background της λίστας
  • με την τιμή no-repeat στην ιδιότητα background-repeat ορίζουμε να ΜΗΝ επαναλαμβάνεται η εικόνα μέχρι να γεμίσει το στοιχείο
  • με την ιδιότητα background-position ορίζουμε το σημείο (x,y) του στοιχείου από το οποίο θα αρχίσει το background. Στο παράδειγμα αυτό εμφανίζει το background 5px (0px,5px) πιο κάτω από το κανονικό (0,0)
  • με την ιδιότητα padding-left εμφανίζουμε το κείμενο κάθε επιλογής της λίστας να εμφανίζεται πιο αριστερά από το background κατά 14px

Η ιδιότητα list-style

Η ιδιότητα list-style είναι συντομογραφία των τριών ιδιοτήτων μορφοποίησης μιας λίστας, list-style-type, list-style-position, list-style-image με αυτήν ακριβώς την σειρά. Δεν πειράζει αν παραλείψουμε κάποια από τις τρεις τιμές, αρκεί να κρατάμε την σειρά:
1. list-style-type,
2. list-style-position,
3. list-style-image
Μορφοποίηση λίστας με την ιδιότητα list-style
ul
{
list-style:square url('bullet2.gif');
}
Στο παράδειγμα αυτό, αν και λείπει η τιμή της ιδιότητας list-style-position, η λίστα εμφανίζεται σωστά

Η ιδιότητα list-style-position μπορεί να πάρει δύο τιμές:
outside: εμφανίζει τις επιλογές της λίστας έξω από το περιεχόμενο της <ul> ή <ol>
inside
: εμφανίζει τις επιλογές της λίστας μέσα στο περιεχόμενο της <ul> ή <ol>
Λίστα με την τιμή outside στην ιδιότητα list-style-position
ul.outside
{
list-style-position:outside;
}

ul.inside
{
list-style-position:inside;
}

Ιδιότητες της CSS για το στυλ των λιστών

Στον παρακάτω πίνακα παρουσιάζονται όλες οι CSS ιδιότητες ορισμού του στυλ των λιστών:
ΙδιότηταΤιμέςΠεριγραφή
list-style list-style-type
list-style-position
list-style-image
Η ιδιότητα αυτή είναι συντομογραφία των τριών ιδιοτήτων ορισμού για τις λίστες: list-style-type, list-style-position και list-style-image
Δοκίμασε το
list-style-image url
none
Ορίζει μια εικόνα αντί για bullet
Δοκίμασε το
list-style-position inside
outside
Ορίζει το σημείο που θα τοποθετούνται τα bullets των επιλογών μέσα στην λίστα
Δοκίμασε το
list-style-type none
disc
circle
square
decimal
decimal-leading-zero
lower-roman
upper-roman
lower-alpha
upper-alpha
lower-greek
lower-latin
upper-latin
hebrew
armenian
georgian
cjk-ideographic
hiragana
katakana
hiragana-iroha
katakana-iroha
Ορίζει τον τύπο του bullet των επιλογών της λίστας
Δοκίμασε το

Παραδείγματα

Ορισμός του στυλ των bullets των επιλογών μιας μη-αριθμημένης λίστας
Το παράδειγμα αυτό παρουσιάζει πως ορίζουμε το στυλ των bullets των επιλογών μιας μη-αριθμημένης λίστας (ιδιότητα list-style-type)

Ορισμός του στυλ των bullets των επιλογών μιας αριθμημένης λίστας
Το παράδειγμα αυτό παρουσιάζει πως ορίζουμε το στυλ των bullets των επιλογών μιας αριθμημένης λίστας (ιδιότητα list-style-type)

Ορισμός εικόνας στην θέση των bullets των επιλογών μιας λίστας
Το παράδειγμα αυτό παρουσιάζει πως ορίζουμε μια εικόνα στην θέση των bullets των επιλογών μιας λίστας (ιδιότητα list-style-image)

Ορισμός της θέση των bullets των επιλογών μιας λίστας
Το παράδειγμα αυτό παρουσιάζει πως ορίζουμε την θέση που θα εμφανίζονται τα bullets των επιλογών μιας λίστας (ιδιότητα list-style-position)

Όλες οι ιδιότητες μιας λίστας σε μια δήλωση
Το παράδειγμα αυτό παρουσιάζει πως ορίζουμε τις τρεις ιδιότητες μιας λίστας σε μια δήλωση στυλ (ιδιότητα list-style)
Pin It

Ο ιστότοπος wlearn.gr χρησιμοποιεί cookies για την αποτελεσματικότερη λειτουργία του. Συνεχίζοντας την περιήγησή σας στο wlearn.gr συμφωνείτε με την χρήση των cookies.