Η μορφοποίηση λιστών και πινάκων είναι ένα ουσιαστικό μέρος της εμφάνισης πληροφοριών στον ιστότοπό σας. Το CSS παρέχει ιδιότητες και κλάσεις για τη δημιουργία και την προσαρμογή λιστών και πινάκων σύμφωνα με τις προτιμήσεις σας. Ακολουθεί ένας λεπτομερής οδηγός για το πώς να μορφοποιήσετε λίστες και πίνακες σε CSS.
Μορφοποίηση λιστών
Μη ταξινομημένη λίστα(ul)
Κύρια ιδιότητα: list-style-type.
Αξίες: none, disc, circle, square.
Παράδειγμα:
ul {
list-style-type: disc;
}
Ταξινομημένη λίστα(ol)
Κύρια ιδιότητα: list-style-type.
Τιμές: καμία(προεπιλογή), δεκαδικός, κατώτερος-άλφα, ανώτερος-άλφα, κατώτερος-ρωμαϊκός, ανώτερος-ρωμανικός.
Παράδειγμα:
ol {
list-style-type: decimal;
}
Λίστα ορισμών(dl)
Κύρια ιδιότητα: Δεν υπάρχει συγκεκριμένη ιδιότητα CSS για τη μορφοποίηση λιστών ορισμών. Ωστόσο, μπορείτε να διαμορφώσετε τα στοιχεία μέσα στη λίστα χρησιμοποιώντας κλάσεις ή άλλες ιδιότητες όπως π.χ font-size, font-weight, margin, padding, etc.
Παράδειγμα:
<dl>
<dt>HTML</dt>
<dd>A markup language for creating web pages</dd>
<dt>CSS</dt>
<dd>A styling language for web pages</dd>
</dl>
dt {
font-weight: bold;
}
Μορφοποίηση πινάκων
Μορφοποίηση δομής πίνακα
Κύριο ακίνητο: border-collapse.
Αξίες: separate(default), collaps ε.
Παράδειγμα:
table {
border-collapse: collapse;
}
Μορφοποίηση περιγράμματος πίνακα
Κύριο ακίνητο: border.
Τιμές: Μια τιμή περιγράμματος, για παράδειγμα: 1px solid black.
Παράδειγμα:
table {
border: 1px solid black;
}
Μορφοποίηση περιγράμματος κελιού
Κύριο ακίνητο: border.
Τιμές: Μια τιμή περιγράμματος, για παράδειγμα: 1px solid black.
Παράδειγμα:
td, th {
border: 1px solid black;
}
Ευθυγράμμιση και απόσταση των κελιών του πίνακα
Κύρια ακίνητα: text-align, padding.
- text-align: Τιμές στοίχισης, για παράδειγμα:
left, right, center. - padding: Τιμή απόστασης εντός κελιών, για παράδειγμα: 10 px.
Παράδειγμα:
th {
text-align: center;
padding: 10px;
}
Χρώμα φόντου και κειμένου σε πίνακες
Κύριες ιδιότητες: background-color, color
background-color: Τιμή χρώματος φόντου, για παράδειγμα:lightgray.color: Τιμή χρώματος κειμένου, για παράδειγμα:white.
Παράδειγμα:
table {
background-color: lightgray;
color: white;
}
Μέγεθος στήλης και σειράς σε πίνακες
Κύρια ακίνητα: width, height.
width: Τιμή πλάτους, για παράδειγμα: "100px", "20%".height: Τιμή ύψους, για παράδειγμα: "50px", "10%".
Παράδειγμα:
th {
width: 100px;
height: 50px;
}
Αυτός είναι ένας περιεκτικός οδηγός για το πώς να μορφοποιήσετε λίστες και πίνακες σε CSS. Μπορείτε να προσαρμόσετε τις τιμές και τις ιδιότητες για να δημιουργήσετε στυλ λιστών και πινάκων που ταιριάζουν στις σχεδιαστικές σας ανάγκες στον ιστότοπό σας.