Οι λίστες CSS είναι πολύ χρήσιμες για την επίτευξη ενός συνόλου είτε αριθμημένων είτε κουκκίδων. Αυτό το άρθρο θα σας δείξει πώς να ελέγξετε τον τύπο, τη θέση, το στυλ του χρησιμοποιώντας CSS. Οι ακόλουθοι δείκτες θα καλυφθούν εδώ,
- Ιδιότητες 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: Δείγμα προγράμματος
- Ιάβα
- Πύθων
- Γωνιώδης
- Ιάβα
- Πύθων
- Γωνιώδης
- Ιάβα
- Πύθων
- Γωνιώδης
- Ιάβα
- Πύθων
- Γωνιώδης
- Ιάβα
- Πύθων
- Γωνιώδης
Παραγωγή
Προχωρώντας με αυτό το άρθρο στις λίστες CSS
Η ιδιότητα λίστας-στυλ-θέσης
Τιμές δείκτη για σε ιδιότητα θέσης στυλ λίστας
Στην ιδιότητα list-style-position δείχνει ότι ο δείκτης θα πρέπει να εμφανίζεται μέσα ή έξω από το κουτί που περιέχει τα σημεία κουκκίδων. Αυτό μπορεί να έχει μία από τις δύο τιμές:
αξία | Περιγραφή |
Κανένας | ΝΑ |
Μέσα | Σε αυτήν την περίπτωση, εάν το κείμενο πηγαίνει στη δεύτερη γραμμή, τότε το κείμενο θα τυλιχτεί κάτω από το δείκτη. Θα δείξει επίσης πού θα είχε ξεκινήσει το κείμενο εάν οι λίστες είχαν μια κοιλάδα έξω. |
εξω απο | Σε αυτήν την περίπτωση, εάν το κείμενο μεταβεί στη δεύτερη γραμμή, το κείμενο θα ευθυγραμμιστεί με την αρχή της πρώτης γραμμής. |
Παράδειγμα:
- Μαθηματικά
- Κοινωνικές επιστήμες
- Η φυσικη
- Μαθηματικά
- Κοινωνικές επιστήμες
- Η φυσικη
- Μαθηματικά
- Κοινωνικές επιστήμες
- Η φυσικη
- Μαθηματικά
- Κοινωνικές επιστήμες
- Η φυσικη
Παραγωγή
Αυτό μας φέρνει στο τέλος αυτού του άρθρου σχετικά με τις λίστες CSS.
τι είναι η ανάμειξη δεδομένων στον πίνακα
Ρίξτε μια ματιά στο δικό μας που έρχεται με ζωντανή εκπαίδευση με καθοδήγηση εκπαιδευτή και πραγματική εμπειρία έργου. Αυτή η εκπαίδευση σας κάνει ικανό σε δεξιότητες για να εργαστείτε με τεχνολογίες ιστού back-end και front-end. Περιλαμβάνει εκπαίδευση σε Web Development, jQuery, Angular, NodeJS, ExpressJS και MongoDB.
Έχετε μια ερώτηση για εμάς; Παρακαλώ αναφέρετέ το στην ενότητα σχολίων του άρθρου και θα επικοινωνήσουμε μαζί σας.