Με τις CSS ιδιότητες που παρουσιάζονται σε αυτό το εγχειρίδιο, μπορείτε να διαμορφώσετε λίστες. Οι πληροφορίες αφορούν τα στοιχεία HTML ul και ol. Έτσι μπορείτε να προσαρμόσετε τις ταξινομημένες και μη ταξινομημένες λίστες σύμφωνα με τις επιθυμίες σας.
Γενικές πληροφορίες για τη λίστα
Η list-style είναι μια σύνοψη των τριών ακόλουθων ιδιοτήτων:
• list-style-type
• list-style-position
• list-style-image
Με τη χρήση της list-style, μπορείτε να επηρεάσετε τον τρόπο που παρουσιάζονται γραφικά τα bullets πριν από τις λίστες και τον εσοχισμό τους. Οι παραπάνω πληροφορίες καταγράφονται χωριστά, και το καθένα διαχωρίζεται με κόμμα. Η σειρά δεν είναι τελεσίδικη. Επιπλέον, δεν χρειάζεται να δοθεί τιμή για κάθε ιδιότητα.
Ένα παράδειγμα:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
ul {
list-style:square;
}
</style>
</head>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</body>
</html>Στο πρόγραμμα περιήγησης, φαίνεται ως εξής:
Γραφικά σύμβολα λίστας
Μπορείτε να καθορίσετε τη δική σας γραφική εικόνα ως σύμβολο λίστας. Χρησιμοποιείται η ιδιότητα list-style-image. Οι ακόλουθες τιμές είναι δυνατές:
• url – το όνομα αρχείου και ενδεχομένως η διαδρομή της εικόνας
• none – δεν εμφανίζεται κάποια εικόνα.
Ένα παράδειγμα:
ul {
list-style-image: url(bullet.gif);
}
Φροντίστε να είναι σωστή η διαδρομή προς την εικόνα που αναφέρεται στην URL.
Αν δοθεί μια λανθασμένη διαδρομή, οι περιηγητές θα πρέπει να χρησιμοποιήσουν ένα προεπιλεγμένο σύμβολο λίστας.
Η θέση των συμβόλων λίστας
Με την list-style-position καθορίζεται πώς θα πρέπει να συμπεριφέρονται οι "αναγραφές" ή τα σύμβολα λίστας όσον αφορά τον εσοχισμό.
• inside – η πρώτη γραμμή εσοχιζεται τόσο ώστε τα σύμβολα και η καταχώρηση της λίστας να τελειώνουν αριστερά στοίχιση.
• outside – το σύμβολο λίστας είναι αριστερά από την καταχώρηση της λίστας.
Στο παρακάτω παράδειγμα χρησιμοποιούνται οι δύο τιμές inside και outside.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
ul.a {
list-style-position:inside;
}
ul.b {
list-style-position:outside;
}
</style>
</head>
<body>
<p>Μια λίστα με inside στοίχιση:</p>
<ul class="a">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<p>Μια λίστα με outside στοίχιση:</p>
<ul class="b">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</body>
</html>Έτσι μπορείτε να δείτε αμέσως τις διαφορετικές επιπτώσεις αυτών των δύο τιμών.
Καθορισμός εμφάνισης των συμβόλων λίστας
Για τα bullets ή τα σύμβολα λίστας, μπορείτε να καθορίσετε εκ των προτέρων την εμφάνισή τους. Επίσης, μπορείτε να επηρεάσετε την αρίθμηση των λιστών. Χρησιμοποιείται η ιδιότητα list-style-type. Επιτρεπόμενες τιμές σε αυτή την ιδιότητα είναι οι ακόλουθες:
• decimal – για λίστες ol: Αρίθμηση 1, 2, 3 κλπ.
• lower-roman – για λίστες ol: Αρίθμηση i., ii., iii. κλπ.
• upper-roman – για λίστες ol: Αρίθμηση I., II., III., IV. κλπ.
• lower-alpha ή lower-latin – για λίστες ol-: Αρίθμηση I., II., III., IV. κλπ.
• upper-alpha ή upper-latin – για λίστες ol: Αρίθμηση A., B., C., D. κλπ.
• disc – για λίστες ul: Γεμισμένος κύκλος ως σύμβολο bullet
• circle – για λίστες ul: Κενός κύκλος ως σύμβολο bullet
• square – για λίστες ul: Ορθογώνιο ως σύμβολο bullet
• none – ούτε σύμβολο bullet ούτε αρίθμηση
• lower-greek – για λίστες ol: Αρίθμηση με ελληνικούς χαρακτήρες
• hebrew – για λίστες ol: Αρίθμηση με εβραϊκούς χαρακτήρες
• decimal-leading-zero – για λίστες ol: Αρίθμηση με κεφαλίδα μηδέν 0: 01., 02., 03., 04. κλπ.
• cjk-ideographic – για λίστες ol: Αρίθμηση με ιδεογραφικούς χαρακτήρες
• hiragana – για λίστες ol: Ιαπωνική αρίθμηση (με μικρά γράμματα)
• katakana – για λίστες ol: Ιαπωνική αρίθμηση (με κεφαλαία γράμματα)
• hiragana-iroha – για λίστες ol: Ιαπωνική αρίθμηση (με μικρά γράμματα)
• katakana-iroha – για λίστες ol: Ιαπωνική αρίθμηση (με κεφαλαία γράμματα)
Στο παρακάτω παράδειγμα χρησιμοποιούνται μερικές από τις παρατιθέμενες παραλλαγές.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
ul.a {
list-style-type:circle;
}
ul.b {
list-style-type:square;
}
ol.c {
list-style-type:upper-roman;
}
ol.d {
list-style-type:lower-alpha;
}
</style>
</head>
<body>
<ul class="a">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<ul class="b">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<ol class="c">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
<ol class="d">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
</body>
</html>Στον περιηγητή εμφανίζεται η παρακάτω εικόνα:
Μετρητής
Μέσω των λιστών ol μπορούν να αριθμούνται περιεχόμενα. Σε πιο πολύπλοκες εφαρμογές, αυτός ο τρόπος αρίθμησης όμως δεν είναι πραγματικά λειτουργικός. Το CSS προσφέρει ως εναλλακτική λύση τους μετρητές (Counters).
Παρακάτω θα δείξω πώς μπορούν να χρησιμοποιηθούν οι μετρητές.
Αρχικά, δημιουργώ έναν νέο μετρητή για το στοιχείο body.
body {
counter-reset: kapitel;
}Με αυτό τον ορισμό, ο μετρητής "kapitel" υπάρχει στο έγγραφο. Αυτό τον μετρητή μπορεί κανείς τώρα να χρησιμοποιήσει.
h1 {
counter-increment: kapitel;
}
Με τη συγκεκριμένη σύνταξη, ο μετρητής αυξάνεται αυτόματα κατά τιμή 1 κάθε φορά που εμφανίζεται ένα νέο στοιχείο h1. Το πρόβλημα είναι πως αυτή τη στιγμή δεν φαίνεται ακόμα η αρίθμηση. Αυτό μπορεί να αλλάξει εύκολα με τη χρήση ψευδοστοιχείων.
h1::before {
content: counter(kapitel) ". ";
}
Μια πλήρης εφαρμογή θα μπορούσε να φαίνεται κάπως έτσι:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
body {
counter-reset: kapitel;
}
h1 {
counter-increment: kapitel;
}
h1::before {
content: counter(kapitel) ". ";
}
</style>
</head>
<body>
<h1>Kapitel</h1>
<h1>Kapitel</h1>
</body>
</html>Και εδώ το αποτέλεσμα στον περιηγητή:
Τα παραδείγματα έχουν δείξει πόσο ισχυροί είναι οι μετρητές.
content: counter(kapitel) ". "
Είναι επίσης δυνατές και οι εμφωλευμένες αρίθμησεις. Γι' αυτό ορίζεται ο μετρητής εκεί όπου θα έπρεπε να ξεκινάει ξανά.
h1 {
counter-increment: kapitel;
counter-reset: unterkapitel;
}Έτσι, σε αυτό το παράδειγμα ο μετρητής επαναφέρεται κάθε φορά που εμφανίζεται ένα νέο h1. Το επόμενο παράδειγμα δείχνει μια τυπική εφαρμογή για εμφωλευμένους μετρητές.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
body {
counter-reset:kapitel;
}
h1 {
counter-reset:unterkapitel;
}
h1:before {
counter-increment:kapitel;
content: counter(kapitel) ". ";
}
h2:before {
counter-increment:unterkapitel;
content:counter(kapitel) "." counter(unterkapitel) " ";
}
</style>
</head>
<body>
<h1>Kapitel</h1>
<h2>Unterkapitel</h2>
<h2>Unterkapitel</h2>
<h2>Unterkapitel</h2>
<h1>Kapitel</h1>
<h2>Unterkapitel</h2>
<h2>Unterkapitel</h2>
<h2>Unterkapitel</h2>
</body>
</html>Στον περιηγητή, η εικόνα είναι η εξής:
Τα παραδείγματα έχουν δείξει πόσο ισχυροί είναι οι μετρητές.
