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



Αυτό το άρθρο θα σας παρουσιάσει λίστες CSS και θα σας βοηθήσει στη διαδικασία να κατανοήσετε πώς λειτουργεί το στυλ CSS List με μια επίδειξη.

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

Ας ξεκινήσουμε λοιπόν,





Λίστες CSS

Ιδιότητες CSS

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

  • List-style-type: Μας επιτρέπει να ελέγξουμε το σχήμα ή την εμφάνιση του δείκτη.
  • List-style-position: Καθορίζει ότι απαιτείται ένα μακρύ σημείο για να τυλίξει σε μια δεύτερη γραμμή ή πρέπει να ευθυγραμμιστεί με την πρώτη γραμμή ή να ξεκινήσει με τον δείκτη.
  • List-style-image: Καθορίζει ότι μια εικόνα για το δείκτη θα πρέπει να προστεθεί ή να γίνει πιο ελκυστική αντί για τις κουκκίδες ή τα αριθμημένα σημεία.
  • Στυλ λίστας: Εμφανίζει τη στενή περιγραφή στις προηγούμενες ιδιότητες.
  • Marker-offset: Καθορίζει την απόσταση μεταξύ του δείκτη και του κειμένου που έχει εισαχθεί στη λίστα.

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



Προχωρώντας με αυτό το άρθρο στις λίστες CSS

Η ιδιότητα τύπου τύπου λίστας

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

Κάτω από τον πίνακα που αντιπροσωπεύει τις μη ταξινομημένες λίστες:



αξία Περιγραφή
Κανένας ΝΑ
Δίσκος Είναι συμπληρωμένο στον κύκλο. (Προεπιλογή)
Κύκλος Είναι ένας άδειος κύκλος.
τετράγωνο Είναι γεμάτη στην πλατεία.

Κάτω από τον πίνακα που αντιπροσωπεύει τις παραγγελθείσες λίστες

αξία Περιγραφή Παράδειγμα
Δεκαδικός Είναι ένας αριθμός1,4,3
Δεκαδικό μηδέν μπροστά 0 πριν από τον πραγματικό αριθμό01, 04, 03
Κάτω-άλφα Είναι πεζά αλφαριθμητικοί χαρακτήρες.Α Β Γ Δ
Άνω-άλφα Είναι κεφαλαίοι αλφαριθμητικοί χαρακτήρες.Α Β Γ Δ
Κάτω λατινικά Είναι πεζά ρωμαϊκά ψηφία.i, ii, iii, iv, v
Άνω ρωμαϊκή Είναι κεφαλαίοι λατινικοί αριθμοί.I, II, III, IV, V
Κάτω ελληνικά Ο δείκτης είναι στα ελληνικάάλφα, γάμμα
Κάτω-λατινικά Ο δείκτης είναι κάτω λατινικάΑ Β Γ Δ
Άνω-λατινικά Ο δείκτης είναι στα άνω-λατινικάΑ Β Γ Δ

Προχωρώντας με αυτό το άρθρο στις λίστες CSS

Λίστες CSS: Δείγμα προγράμματος

 
  • Ιάβα
  • Πύθων
  • Γωνιώδης
  • Ιάβα
  • Πύθων
  • Γωνιώδης
  1. Ιάβα
  2. Πύθων
  3. Γωνιώδης
  1. Ιάβα
  2. Πύθων
  3. Γωνιώδης
  1. Ιάβα
  2. Πύθων
  3. Γωνιώδης

Παραγωγή

Έξοδος - Λίστες CSS - Edureka

Προχωρώντας με αυτό το άρθρο στις λίστες CSS

Η ιδιότητα λίστας-στυλ-θέσης

Τιμές δείκτη για σε ιδιότητα θέσης στυλ λίστας

Στην ιδιότητα list-style-position δείχνει ότι ο δείκτης θα πρέπει να εμφανίζεται μέσα ή έξω από το κουτί που περιέχει τα σημεία κουκκίδων. Αυτό μπορεί να έχει μία από τις δύο τιμές:

αξία Περιγραφή
Κανένας ΝΑ
Μέσα Σε αυτήν την περίπτωση, εάν το κείμενο πηγαίνει στη δεύτερη γραμμή, τότε το κείμενο θα τυλιχτεί κάτω από το δείκτη. Θα δείξει επίσης πού θα είχε ξεκινήσει το κείμενο εάν οι λίστες είχαν μια κοιλάδα έξω.
εξω απο Σε αυτήν την περίπτωση, εάν το κείμενο μεταβεί στη δεύτερη γραμμή, το κείμενο θα ευθυγραμμιστεί με την αρχή της πρώτης γραμμής.

Παράδειγμα:

 
  • Μαθηματικά
  • Κοινωνικές επιστήμες
  • Η φυσικη
  • Μαθηματικά
  • Κοινωνικές επιστήμες
  • Η φυσικη
  1. Μαθηματικά
  2. Κοινωνικές επιστήμες
  3. Η φυσικη
  1. Μαθηματικά
  2. Κοινωνικές επιστήμες
  3. Η φυσικη

Παραγωγή

Αυτό μας φέρνει στο τέλος αυτού του άρθρου σχετικά με τις λίστες CSS.

τι είναι η ανάμειξη δεδομένων στον πίνακα

Ρίξτε μια ματιά στο δικό μας που έρχεται με ζωντανή εκπαίδευση με καθοδήγηση εκπαιδευτή και πραγματική εμπειρία έργου. Αυτή η εκπαίδευση σας κάνει ικανό σε δεξιότητες για να εργαστείτε με τεχνολογίες ιστού back-end και front-end. Περιλαμβάνει εκπαίδευση σε Web Development, jQuery, Angular, NodeJS, ExpressJS και MongoDB.

Έχετε μια ερώτηση για εμάς; Παρακαλώ αναφέρετέ το στην ενότητα σχολίων του άρθρου και θα επικοινωνήσουμε μαζί σας.