CSS 列表

Μη ταξινομημένη λίστα:

  • Coffee
  • Tea
  • Coca Cola
  • Coffee
  • Tea
  • Coca Cola

Ταξινομημένη λίστα:

  1. Coffee
  2. Tea
  3. Coca Cola
  1. Coffee
  2. Tea
  3. Coca Cola

Λίστες HTML και ιδιότητες CSS

Στο HTML, υπάρχουν δύο κύριες τύποι λίστας:

  • Μη ταξινομημένη λίστα (π.χ. <ul>) - τα στοιχεία της λίστας χρησιμοποιούν στίγματα λίστας
  • Ταξινομημένη λίστα (π.χ. <ol>) - τα στοιχεία της λίστας χρησιμοποιούν αριθμούς ή γράμματα στίξης

Οι ιδιότητες της λίστας του CSS σας επιτρέπουν:

  • Ρύθμιση διαφορετικών στίξεων για ταξινομημένες λίστας
  • Ρύθμιση διαφορετικών στίξεων για μη ταξινομημένες λίστας
  • Ρύθμιση εικόνας ως στίξης του στοιχείου της λίστας
  • Προσθήκη χρώματος φόντου στη λίστα και τα στοιχεία της λίστας

Διαφορετικές στίξεις των στοιχείων της λίστας

list-style-type Η ιδιότητα καθορίζει τον τύπο της στίξης του στοιχείου της λίστας.

Το παρακάτω παράδειγμα δείχνει μερικές από τις διαθέσιμες στίξεις των στοιχείων της λίστας:

παράδειγμα

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;
}

Δοκιμάστε το προσωπικά σας

Σημείωση:Κάποιες τιμές χρησιμοποιούνται για μη ταξινομημένες λίστας, ενώ άλλες τιμές χρησιμοποιούνται για ταξινομημένες λίστας.

Η εικόνα ως στίξη του στοιχείου της λίστας

list-style-image Η ιδιότητα καθορίζει την εικόνα ως στίξη του στοιχείου της λίστας:

παράδειγμα

ul {
  list-style-image: url('sqpurple.gif');
}

Δοκιμάστε το προσωπικά σας

Σταθμός της στίξης του στοιχείου της λίστας

list-style-position Η ιδιότητα καθορίζει τη θέση της στίξης του στοιχείου της λίστας (στίξη λίστας).

"list-style-position: outside;" σημαίνει ότι η στίξη της λίστας θα βρίσκεται εκτός του στοιχείου της λίστας. Η κάθε γραμμή του στοιχείου της λίστας θα είναι οριζόντια συγχρονισμένη. Αυτό είναι το προεπιλεγμένο:

  • Coffee - Αποτελείται από βρασμένο καφέ με κατεψυγμένα καφέ κόκκια
  • Tea
  • Coca-cola

"list-style-position: inside;" Αυτή η ιδιότητα σημαίνει ότι τα σημειώματα θα εμφανιστούν μέσα στο στοιχείο της λίστας. Επειδή είναι μέρος του στοιχείου της λίστας, θα γίνει μέρος του κειμένου και θα ανοίξει το κείμενο στο αρχείο:

  • Coffee - Αποτελείται από βρασμένο καφέ με κατεψυγμένα καφέ κόκκια
  • Tea
  • Coca-cola

παράδειγμα

ul.a {
  list-style-position: outside;
}
ul.b {
  list-style-position: inside;
}

Δοκιμάστε το προσωπικά σας

Αφαίρεση προεπιλεγμένων ρυθμίσεων

list-style-type:none Η ιδιότητα μπορεί επίσης να χρησιμοποιηθεί για την αφαίρεση ετικετών/σημειωμάτων. Παρακαλώ σημειώστε ότι η λίστα έχει προεπιλεγμένες μαργίνα και χώρους πλήρωσης. Για να αφαιρεθούν αυτά, προσθέστε στο <ul> ή <ol> μαργίνα:0 και χώρος πλήρωσης:0 :

παράδειγμα

ul {
  list-style-type: none;
  μαργίνα: 0;
  χώρος πλήρωσης: 0;
}

Δοκιμάστε το προσωπικά σας

Λίστα - Συντομευμένη ιδιότητα

list-style Η ιδιότητα είναι μια συντομευμένη ιδιότητα. Χρησιμοποιείται για να ρυθμίσει όλες τις ιδιότητες λίστας σε μια μόνο δήλωση:

παράδειγμα

ul {
  list-style: square inside url("sqpurple.gif");
}

Δοκιμάστε το προσωπικά σας

Όταν χρησιμοποιούνται συντομεύσεις ιδιοτήτων, η σειρά των τιμών των ιδιοτήτων είναι:

  • list-style-type(Αν οριστεί list-style-image και η εικόνα δεν μπορεί να εμφανιστεί για οποιοδήποτε λόγο, θα εμφανιστεί η τιμή αυτής της ιδιότητας)
  • list-style-position(Ορίζει αν η ετικέτα στοιχείου πρέπει να εμφανιστεί στο εσωτερικό ή στο εξωτερικό του ρεύματος περιεχομένου)
  • list-style-image(Σημαίνει την εικόνα ως ετικέτα στοιχείου λίστας)

Αν λείπει οποιαδήποτε από τις παραπάνω τιμές ιδιοτήτων, θα χρησιμοποιηθεί η προεπιλεγμένη τιμή (αν υπάρχει).

Ρύθμιση χρωματικού στυλ λίστας

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

Οποιαδήποτε στυλ που προστίθεται στις ετικέτες <ol> ή <ul> επηρεάζει την ολόκληρη τη λίστα, ενώ οι ιδιότητες που προστίθενται στις ετικέτες <li> επηρεάζουν κάθε στοιχείο της λίστας:

παράδειγμα

ol {
  βάθος χρώματος: #ff9999;
  χώρος πλήρωσης: 20px;
}
ul {
  βάθος χρώματος: #3399ff;
  χώρος πλήρωσης: 20px;
}
ol li {
  βάθος χρώματος: #ffe5e5;
  χώρος πλήρωσης: 5px;
  μαργίνα αριστεράς: 35px;
}
ul li {
  βάθος χρώματος: #cce5ff;
  μαργίνα: 5px;
}

Αποτελέσματα:

  1. Coffee
  2. Tea
  3. Coca Cola
  • Coffee
  • Tea
  • Coca Cola

Δοκιμάστε το προσωπικά σας

Περισσότερες παραδείγματα

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

Όλες οι ιδιότητες λίστας CSS

Ιδιότητα Περιγραφή
list-style Σύντομη ιδιότητα. Σε μια δήλωση καθορίζει όλες τις ιδιότητες της λίστας.
list-style-image Καθορίζει την εικόνα ως σημειώσεις της λίστας.
list-style-position Καθορίζει τη θέση σημειώσεων της λίστας (σημειώσεις).
list-style-type Καθορίζει τον τύπο σημειώσεων της λίστας.