Τι είναι το List Style Type και πώς να το χρησιμοποιήσετε στο Tailwind;

Αυτό το άρθρο θα επεξηγήσει:

• Τι είναι ο τύπος στυλ λίστας στο Tailwind CSS;
• Πώς να χρησιμοποιήσετε τον τύπο στυλ λίστας στο Tailwind CSS;

Τι είναι ο τύπος στυλ λίστας στο Tailwind CSS;

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

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

---





---






Ο τύπος στυλ λίστας περιέχει τρεις κλάσεις, όπως:





λίστα-δίσκος

Ορίζει την ιδιότητα 'list-style-type' σε δίσκο, ο οποίος εμφανίζει έναν γεμάτο κύκλο ως δείκτη για μη ταξινομημένες λίστες '

”




λίστα-δεκαδικός

Ορίζει την ιδιότητα 'list-style-type' σε δεκαδικό, η οποία εμφανίζει αριθμητικές δεκαδικές τιμές (1, 2, 3, κ.λπ.) ως δείκτες για ταξινομημένες λίστες '

'.

---





---

λίστα-κανένας

Ορίζει την ιδιότητα 'list-style-type' σε κανένα, πράγμα που σημαίνει ότι δεν εμφανίζεται κανένας δείκτης για τα στοιχεία της λίστας.

Πώς να χρησιμοποιήσετε τον τύπο στυλ λίστας στο Tailwind CSS;

Για να χρησιμοποιήσετε τον τύπο στυλ λίστας στο Tailwind CSS, πρώτα, δημιουργήστε ένα πρόγραμμα HTML και χρησιμοποιήστε τα στοιχεία λίστας σε αυτό, καθορίζοντας το ' λίστα-δίσκος ' και ' λίστα-δεκαδικός ” βοηθητικά προγράμματα. Στη συνέχεια, εκτελέστε το πρόγραμμα HTML και προβάλετε την έξοδο για επαλήθευση:





Βήμα 1: Δημιουργία ιστοσελίδας HTML χρησιμοποιώντας στοιχεία λίστας

Πρώτα, φτιάξτε ένα πρόγραμμα HTML και χρησιμοποιήστε τα στοιχεία της λίστας σε αυτό χρησιμοποιώντας τα βοηθητικά προγράμματα 'list-disc' και 'list-decimal'. Για παράδειγμα, χρησιμοποιήσαμε τα ακόλουθα στοιχεία:

< σώμα >

< div τάξη = 'h-screen ml-10' >

< ul τάξη = 'λίστα-δίσκος' >

< ότι > Στοιχείο λίστας 1 < / ότι >

< ότι > Στοιχείο λίστας 2 < / ότι >

< ότι > Στοιχείο λίστας 3 < / ότι >

< / ul >

< br >

< ol τάξη = 'λίστα-δεκαδικός' >

< ότι > Στοιχείο λίστας 1 < / ότι >

< ότι > Στοιχείο λίστας 2 < / ότι >

< ότι > Στοιχείο λίστας 3 < / ότι >

< / ol >

< br >

< ul >

< ότι > Στοιχείο λίστας 1 < / ότι >

< ότι > Στοιχείο λίστας 2 < / ότι >

< ότι > Στοιχείο λίστας 3 < / ότι >

< / ul >

< / div >

< / σώμα >

Εδώ,

• Ο πρώτος, '
  ' έχει εφαρμοστεί η κλάση 'list-disc' που εμφανίζει δείκτες γεμάτους κύκλους για κάθε στοιχείο λίστας.
  • Το δεύτερο, '
    ' έχει εφαρμοστεί η κλάση 'list-decimal' που εμφανίζει αριθμητικές δεκαδικές τιμές ως δείκτες.
    1. Το τελευταίο '
       ” δεν έχει εφαρμοστεί καμία κατηγορία βοηθητικού προγράμματος, επομένως θα χρησιμοποιήσει το προεπιλεγμένο στυλ δείκτη λίστας.

       Βήμα 2: Προβολή ιστοσελίδας HTML

       Στη συνέχεια, εκτελέστε το πρόγραμμα HTML και προβάλετε την ιστοσελίδα για να επαληθεύσετε την έξοδο:

       

       Η παραπάνω έξοδος εμφανίζει τις λίστες σύμφωνα με τις οποίες διαμορφώθηκαν.

       συμπέρασμα

       Ο τύπος στυλ λίστας είναι μια ιδιότητα CSS που χρησιμοποιείται για την προσαρμογή της εμφάνισης δεικτών στοιχείων λίστας σε ταξινομημένες και μη ταξινομημένες λίστες. Καθορίζει τον τύπο της κουκκίδας ή το στυλ αρίθμησης που θα χρησιμοποιηθεί για τα στοιχεία της λίστας. Μπορεί να χρησιμοποιηθεί στο Tailwind καθορίζοντας το ' λίστα-δίσκος ' και ' λίστα-δεκαδικός ” βοηθητικά προγράμματα. Αυτό το άρθρο έχει εξηγήσει σχετικά με τον τύπο στυλ λίστας και τη χρήση του στο Tailwind.