Οι λίστες στο CSS χρησιμοποιούνται για τη διάταξη και την εμφάνιση στοιχείων λίστας, όπως τα στοιχεία <ul> (ακατάτακτη λίστα) και <ol> (ταξινομημένη λίστα). Μπορούμε να προσαρμόσουμε την εμφάνιση των στοιχείων λίστας με τη χρήση CSS.
Ας δούμε μερικά παραδείγματα για το πώς μπορούμε να προσαρμόσουμε τις λίστες με τη χρήση CSS:
- Προσαρμογή του στυλ των στοιχείων λίστας:
ul {
/* Ορίζει τον τύπο της μαρκαρίσματος σε τετράγωνο */
list-style-type: square;
/* Ορίζει το χρώμα του κειμένου σε μπλε */
color: blue;
/* Ορίζει τον πάχος της γραμματοσειράς σε έντονο */
font-weight: bold;
}
Ο παραπάνω κώδικας ορίζει το στυλ των στοιχείων μιας ακατάτακτης λίστας (<ul>) ως τετράγωνα, με μπλε χρώμα και έντονη γραφή.
- Προσαρμογή του στυλ των στοιχείων μιας ταξινομημένης λίστας:
ol {
/* Ορίζει τον τύπο της αρίθμησης σε δεκαδική (1, 2, 3, ...) */
list-style-type: decimal;
/* Ορίζει το χρώμα του κειμένου σε κόκκινο */
color: red;
/* Ορίζει την καλλιγραφία του κειμένου σε πλάγια γράμματα */
font-style: italic;
}
Ο παραπάνω κώδικας ορίζει το στυλ των στοιχείων μιας ταξινομημένης λίστας (<ol>) ως δεκαδικά αριθμητικά, με κόκκινο χρώμα και πλάγια γραφή.
- Προσαρμογή του στυλ των στοιχείων λίστας όταν βρίσκονται μέσα σε ένα συγκεκριμένο στοιχείο:
.custom-list li {
/* Ορίζει το χρώμα των στοιχείων της λίστας σε πράσινο */
color: green;
/* Ορίζει το μέγεθος γραμματοσειράς των στοιχείων της λίστας σε 20px */
font-size: 20px;
}
Ο παραπάνω κώδικας ορίζει το στυλ των στοιχείων λίστας (<li>) που βρίσκονται μέσα σε ένα συγκεκριμένο στοιχείο με την κλάση “custom-list” ως πράσινο χρώμα και μεγέθους γραμματοσειράς 20px.
Αυτά είναι μόνο μερικά παραδείγματα του πώς μπορούμε να προσαρμόσουμε τις λίστες με CSS. Μπορείτε να πειραματιστείτε με διάφορες ιδιότητες CSS για να επιτύχετε το επιθυμητό αισθητικό αποτέλεσμα στα στοιχεία λίστας της ιστοσελίδας σας.
[adinserter block=”2″]
Στην HTML, μπορούμε να διακρίνουμε δύο βασικούς τύπους λιστών:
- Μη ταξινομημένες λίστες: Τα στοιχεία της λίστας εμφανίζονται με κουκίδες ως σύμβολα.
- Ταξινομημένες λίστες: Τα στοιχεία της λίστας σημαδεύονται με αριθμούς ή γράμματα ως σύμβολα.
Οι ιδιότητες CSS για τις λίστες σας επιτρέπουν να κάνετε τα εξής:
- Ορίσετε διάφορα σύμβολα για τα στοιχεία των ταξινομημένων λιστών.
- Ορίσετε διάφορα σύμβολα για τα στοιχεία των μη ταξινομημένων λιστών.
- Ορίσετε μια εικόνα ως σύμβολο για τα στοιχεία της λίστας.
- Προσθέσετε φόντο σε λίστες και στοιχεία της λίστας.
Η ιδιότητα CSS “list-style-type” καθορίζει τον τύπο του συμβόλου που χρησιμοποιείται για τα στοιχεία της λίστας.
Το παρακάτω παράδειγμα δείχνει μερικούς από τους διαθέσιμους τύπους συμβόλων των στοιχείων της λίστας:
ul {
list-style-type: disc; /* Κουκίδα */
}
ol {
list-style-type: decimal; /* Αριθμοί */
}
ol.upper-roman {
list-style-type: upper-roman; /* Κεφαλαίοι ρωμαϊκοί αριθμοί */
}
ol.lower-alpha {
list-style-type: lower-alpha; /* Μικρά γράμματα αγγλικού αλφαβήτου */
}
Στο παράδειγμα αυτό, η ιδιότητα list-style-type ορίζει τον τύπο του συμβόλου για τις μη ταξινομημένες λίστες (ul) και τις ταξινομημένες λίστες (ol). Οι διαθέσιμοι τύποι συμβόλων περιλαμβάνουν τις κουκίδες (disc), τους αριθμούς (decimal), τους κεφαλαίους ρωμαϊκούς αριθμούς (upper-roman) και τα μικρά γράμματα του αγγλικού αλφαβήτου (lower-alpha).
Μπορείτε να χρησιμοποιήσετε αυτές τις τιμές για να προσαρμόσετε τον τύπο του συμβόλου που εμφανίζεται για τα στοιχεία της λίστας ανάλογα με τις προτιμήσεις σας.
Η ιδιότητα list-style-image καθορίζει μια εικόνα ως σύμβολο των στοιχείων της λίστας:
ul {
/* Ορίζει την εικόνα που θα χρησιμοποιηθεί ως δείκτης λίστας για τα μη αριθμημένα στοιχεία */
list-style-image: url("marker.png");
}
ol {
/* Ορίζει την εικόνα που θα χρησιμοποιηθεί ως δείκτης λίστας για τα αριθμημένα στοιχεία */
list-style-image: url("marker.png");
}
Στο παράδειγμα αυτό, η ιδιότητα list-style-image ορίζει την εικόνα "marker.png" ως σύμβολο των μη ταξινομημένων λιστών (ul) και των ταξινομημένων λιστών (ol). Αντικαταστήστε το "marker.png" με το URL της εικόνας που επιθυμείτε να χρησιμοποιήσετε ως σύμβολο.
Με αυτόν τον τρόπο, μπορείτε να προσθέσετε μια εικόνα ως σύμβολο για τα στοιχεία της λίστας, δίνοντας ένα μοναδικό στυλ στην εμφάνισή τους. Σιγουρευτείτε ότι η εικόνα είναι προσβάσιμη μέσω του συγκεκριμένου URL.
Η ιδιότητα list-style-position καθορίζει τη θέση των συμβόλων των στοιχείων της λίστας (σημεία ή αριθμοί) σε σχέση με το περιεχόμενο των στοιχείων.
ul {
/* Ορίζει τη θέση των στοιχείων της λίστας μέσα στην εσοχή */
list-style-position: inside;
}
ol {
/* Ορίζει τη θέση των στοιχείων της λίστας έξω από την εσοχή */
list-style-position: outside;
}
Στο παράδειγμα αυτό, η ιδιότητα list-style-position ορίζει τη θέση των συμβόλων για τις μη ταξινομημένες λίστες (ul) και τις ταξινομημένες λίστες (ol). Η τιμή inside θέτει τα σύμβολα εντός του πλαισίου του περιεχομένου του στοιχείου, ενώ η τιμή outside τα θέτει έξω από το πλαίσιο του περιεχομένου.
Μπορείτε να προσαρμόσετε αυτήν την ιδιότητα ανάλογα με τις προτιμήσεις σας για τη θέση των συμβόλων των στοιχείων της λίστας.
[adinserter block=”3″]
Η ιδιότητα list-style-type: none μπορεί επίσης να χρησιμοποιηθεί για να αφαιρέσει τα σύμβολα/σημεία από τα στοιχεία της λίστας. Παρατηρήστε ότι η λίστα έχει επίσης προεπιλεγμένο περιθώριο (margin) και περιθώριο εσοχής (padding). Για να τα αφαιρέσετε, προσθέστε margin: 0 και padding: 0 στα στοιχεία <ul> ή <ol>:
ul, ol {
/* Απενεργοποιεί τα σύμβολα λίστας */
list-style-type: none;
/* Μηδενίζει το περιθώριο */
margin: 0;
/* Μηδενίζει το περιθώριο */
padding: 0;
}
Με αυτόν τον τρόπο, θα αφαιρεθούν τα προεπιλεγμένα σύμβολα/σημεία, καθώς και το περιθώριο και η εσοχή που εφαρμόζονται από προεπιλογή. Έτσι, μπορείτε να ξεκινήσετε με μια λίστα χωρίς στυλ και προεπιλεγμένα περιθώρια.
Η ιδιότητα list-style είναι μια συντομογραφία (shorthand property). Χρησιμοποιείται για να ορίσει όλες τις ιδιότητες της λίστας σε μία δήλωση:
ul {
list-style: none;
}
Στο παράδειγμα αυτό, η ιδιότητα list-style ορίζει το είδος του συμβόλου (none) για τις μη ταξινομημένες λίστες (ul). Χρησιμοποιώντας αυτήν τη συντομογραφία, μπορείτε να ορίσετε το είδος του συμβόλου, το περιθώριο και τη θέση των συμβόλων με μία μόνο δήλωση. Εάν δεν οριστεί κάποια τιμή για ένα στοιχείο της λίστας, θα χρησιμοποιηθούν οι προεπιλεγμένες τιμές.
Μπορούμε επίσης να δώσουμε στυλ σε λίστες με χρώματα, για να τις κάνουμε πιο ενδιαφέρουσες.
Οτιδήποτε προστίθεται στο στοιχείο <ol> ή <ul>, επηρεάζει ολόκληρη τη λίστα, ενώ ιδιότητες που προστίθενται στο στοιχείο <li> θα επηρεάζουν τα ατομικά στοιχεία της λίστας:
/* Επιρροή στην ολόκληρη λίστα */
ul {
background-color: lightgray;
padding: 10px;
}
/* Επιρροή στα ατομικά στοιχεία της λίστας */
li {
color: blue;
font-weight: bold;
}
Στο παραπάνω παράδειγμα, η ιδιότητα background-color και padding προστίθενται στο στοιχείο <ul>, επηρεάζοντας ολόκληρη τη λίστα. Αυτό ορίζει το χρώμα του φόντου και το περιθώριο γύρω από τη λίστα.
Αντίθετα, οι ιδιότητες color και font-weight προστίθενται στο στοιχείο <li>, επηρεάζοντας τα ατομικά στοιχεία της λίστας. Αυτό ορίζει το χρώμα και το πάχος της γραμματοσειράς των στοιχείων της λίστας.
Μπορείτε να προσαρμόσετε αυτές τις ιδιότητες για να δημιουργήσετε ενδιαφέρουσες εμφανίσεις για τις λίστες σας, χρησιμοποιώντας τα χρώματα και τα στιλ που επιθυμείτε.