Πώς να κάνετε στυλ λίστες με CSS

Ανακεφαλαίωση λιστών HTML

Υπάρχουν δύο βασικοί τύποι λιστών σε HTML - Ταξινομημένες και Μη ταξινομημένες .

Σε λίστες με παραγγελία (

    ), η σειρά των στοιχείων της λίστας είναι σημαντική. Τα στοιχεία ενδέχεται να εμφανίζονται με σειρά ανά αριθμό, λατινικούς αριθμούς, άλφα αριθμούς ή άλλο τύπο δείκτη. Ο προεπιλεγμένος δείκτης για παραγγελθείσες λίστες είναι ένας αριθμός (ή decimal):

    Σε λίστες χωρίς ταξινόμηση (

      ), η σειρά των στοιχείων της λίστας δεν έχει σημασία. Τα στοιχεία εμφανίζονται σε μορφή κουκκίδας. Ο προεπιλεγμένος δείκτης για μη ταξινομημένες λίστες είναι ένα στρογγυλό σημείο κουκκίδας ή disc.

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

      Ειδικά στυλ λίστας

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

      list-style-type

      Οι δείκτες (ή οι κουκκίδες) που εμφανίζονται σε ταξινομημένες και μη ταξινομημένες λίστες μπορούν να διαμορφωθούν με διάφορους τρόπους. Η ιδιότητα CSS για το στυλ του δείκτη είναι list-style-type. Η προεπιλεγμένη list-style-typeτιμή για μια λίστα με παραγγελία είναι decimal, ενώ η προεπιλεγμένη για μια λίστα χωρίς ταξινόμηση είναι disc.

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

      /* css */ ol { list-style-type: upper-roman; }

      Παράδειγμα λίστας χωρίς ταξινόμηση:

      /* css */ ul { list-style-type: square; }

      Δεν υπάρχει δείκτης:

      /* css */ ul { list-style-type: none; }

      Οι αποδεκτές τιμές για την list-style-typeιδιοκτησία περιλαμβάνουν:

      Χωρίς παραγγελία:

      • δίσκος ( προεπιλογή )
      • κύκλος
      • τετράγωνο

      Διέταξε:

      • δεκαδικό ( προεπιλογή )
      • δεκαδικό-προβάδισμα-μηδέν
      • κάτω ρωμαϊκά
      • άνω ρωμαϊκός
      • κατώτερα ελληνικά
      • κάτω-λατινικά
      • άνω-λατινικά
      • αρμενικός
      • Γεωργίας
      • χαμηλότερο άλφα
      • άνω-άλφα

      Αλλα:

      • κανένας

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

      list-style-position

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

      Τοποθετήστε το δείκτη outsideτου στοιχείου λίστας και όλες οι γραμμές κειμένου και οι υπο-γραμμές κάθε στοιχείου λίστας θα ευθυγραμμιστούν κάθετα:

      /* css */ ul { list-style-position: outside; /* default */ }

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

      /* css */ ul { list-style-position: inside; }

      list-style-image

      Η list-style-imageιδιότητα δέχεται μια διεύθυνση url εικόνας στη θέση του δείκτη λίστας. Η προεπιλεγμένη τιμή για αυτήν την ιδιότητα είναι none.

      /* css */ ul { list-style-image: url(//url-to-image); }

      list-style Shorthand

      list-style is a shorthand property for the three style properties listed above. The order of values list-style accepts is list-style-type, list-style-position, and list-style-image. If any value is omitted, the default value for that property will be used.

      Example:

      /* css */ ul { list-style: circle inside none; }

      More List-Specific Styling

      Ordered list tags also accept attributes that control the flow, count, or specific marker values of its list items. These include the start, reversed, and value attributes. See the MDN resources listed below for further details.

      General Styling

      List content can be styled just like other p or div elements. color, font-family, margin, padding, or border are just a few examples of properties that can be added to either the ul, ol, or li elements.

      Λάβετε υπόψη ότι τυχόν στυλ που προστίθενται στο στοιχείο ulή olθα επηρεάσουν ολόκληρη τη λίστα. Τα στυλ που προστίθενται απευθείας στα liστοιχεία θα επηρεάσουν τα μεμονωμένα στοιχεία λίστας. Στο παρακάτω παράδειγμα, οι ιδιότητες περιγράμματος και χρώματος φόντου διαμορφώνονται διαφορετικά μεταξύ των στοιχείων λίστας και στοιχείων λίστας:

      /* css */ ul { list-style-type: circle; border: 2px solid blue; background-color: lightblue; } li { margin: 5px; background-color: lightyellow; }

      Απόσταση λίστας

      Ενδέχεται να παρατηρήσετε επιπλέον διαστήματα μπροστά από τα στοιχεία της λίστας όταν list-style-typeέχει οριστεί σε none. Η ρύθμιση paddingσε 0(ή σε οποιοδήποτε διάστημα προτιμάται) στο στοιχείο λίστας θα αντικαταστήσει αυτήν την προεπιλεγμένη επένδυση.

      /* css */ ul { list-style: none; padding: 0; } li { padding: 5px 10px; background-color: #EEEEEE; border: 1px solid #DDDDDD; }

      Πηγές:

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

      Περισσότερες πληροφορίες:

      MDN - Λίστες στυλ

      W3Schools - Λίστες CSS

      CSS Tricks - στυλ λίστας