Κεφάλαιο 14 : CSS λίστες

• 22 Ιουλίου 2012
• by: Georgios
• in: Web Design

List Style

Μπορείτε να αλλάξετε την εμφάνιση είτε των ταξινομημένων λιστών είτε τον αταξινόμητων λιστών, απλά δηλώνοντας την ιδιότητα list-style όπως στο παράδειγμα που ακολουθεί:

list-style : value value;

και οι τιμές μπορεί να είναι οι ακόλουθες :

εικόνα
θέση
τύπος

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

List Style Image

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

list-style-image : url(‘διαδρομή προς μια εικόνα gif, png ή jpg’);

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

List Style Position

Μπορείτε να ελένξετε τη θέση των ταξινομημένων και αταξινόμητων λιστών με την ιδιότητα list-style-position δηλώνοντας την όπως στο παράδειγμα που ακολουθεί:

list-style-position : value;

ενώ οι τιμές που μπορεί να δεχτεί είναι οι ακόλουθες:

inside
outside

List Style Type

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

list-style-type : value;

ενώ οι τιμές που μπορεί να δεχτεί είναι οι ακόλουθες :

disc
circle
square
decimal
lower-roman
upper-roman
lower-alpha
upper-alpha
none

Προηγούμενο : Περίγραμμα
Επόμενο :  CSS πλάτος και ύψος