CSS – Cascading Style Sheets (μορφοποίηση λιστών) Οι ιδιότητες CSS για τις λίστες σας επιτρέπουν να: καθορίζετε κουκίδες για λίστες με κουκίδες καθορίζετε.

Παρουσίαση με θέμα: "CSS – Cascading Style Sheets (μορφοποίηση λιστών) Οι ιδιότητες CSS για τις λίστες σας επιτρέπουν να: καθορίζετε κουκίδες για λίστες με κουκίδες καθορίζετε."— Μεταγράφημα παρουσίασης:

1 CSS – Cascading Style Sheets (μορφοποίηση λιστών) Οι ιδιότητες CSS για τις λίστες σας επιτρέπουν να: καθορίζετε κουκίδες για λίστες με κουκίδες καθορίζετε αρίθμηση για λίστες με αρίθμηση χρησιμοποιήσετε μια εικόνα ως κουκίδα

2 CSS – Cascading Style Sheets (ιδιότητα list-style-type για κουκίδες) Καθορίζει τον τύπο κουκίδας μιας λίστας με κουκίδες ΤιμήΠεριγραφή NoneΧωρίς κουκίδα DiscΔίσκος CircleΚύκλος SquareΤετράγωνο

3 CSS – Cascading Style Sheets (ιδιότητα list-style-type για κουκίδες) ul.a {list-style-type:circle;} ul.b {list-style-type:square;} Λίστες με κουκίδες: Καφές Τσάι Coca Cola Καφές Τσάι Coca Cola

4 CSS – Cascading Style Sheets (ιδιότητα list-style-type για αρίθμηση) Καθορίζει τον τύπο αρίθμησης μιας λίστας με αρίθμηση ΤιμήΠεριγραφή armenianΑρμενική αρίθμηση decimalΔεκαδικός αριθμός decimal-leading-zeroΔεκαδικός αριθμός με 0 μπροστά (π.χ. 01, 02, 03, …) georgianΓεωργιανή αρίθμηση lower-alphaΜικρά αγγλικά lower-greekΜικρά ελληνικά lower-latinΜικρά λατινικά lower-romanΛατινική αρίθμηση (μικρά) (π.χ. i, ii, iii, iv, …) upper-alphaΚεφαλαία αγγλικά upper-latinΚεφαλαία λατινικά upper-romanΛατινική αρίθμηση (μεγάλα) (π.χ. I, II, III, IV, …)

5 ol.a {list-style- type:armenian;} ol.b {list-style- type:georgian;} ol.c {list-style-type:lower- greek;} Λίστες με αρίθμηση: Καφές Τσάι Coca Cola CSS – Cascading Style Sheets (ιδιότητα list-style-type για αρίθμηση) Καφές Τσάι Coca Cola Καφές Τσάι Coca Cola

6 CSS – Cascading Style Sheets (ιδιότητα list-style-image) Χρησιμοποιεί μια εικόνα ως κουκίδα Σύνταξη: list-style-image: url (διαδρομή εικόνας)

7 CSS – Cascading Style Sheets (ιδιότητα list-style-image - παράδειγμα) ul { list-style-image: url(“dot1.gif”); } Καφές Τσάι Coca Cola

8 CSS – Cascading Style Sheets (ιδιότητα list-style-position) Καθορίζει αν η κουκίδα θα βρίσκεται σε προεξοχή ή όχι σε σχέση με το περιβάλλον κείμενο ΤιμήΠεριγραφή insideΗ κουκίδα και το κείμενο βρίσκονται σε εσοχή (η κουκίδα ακολουθεί τη ροή του κειμένου) outsideΗ κουκίδα βρίσκεται σε προεξοχή, έξω από την κανονική ροή του κειμένου (προεπιλεγμένη τιμή)

9 ol.a {list-style-position: inside;} ol.b {list-style-position: outside;} Λίστα με εσοχή (inside): Καφές Τσάι Coca Cola Λίστα χωρίς εσοχή (outside): Καφές Τσάι Coca Cola CSS – Cascading Style Sheets (ιδιότητα list-style-position – παράδειγμα)

10 CSS – Cascading Style Sheets (ιδιότητα list-style) Καθορίζει όλες τις ιδιότητες μορφοποίησης λίστας σε μία δήλωση Οι ιδιότητες που ορίζονται είναι με τη σειρά: είδος κουκίδας ή αρίθμησης θέση λίστας χρήση εικόνας ως κουκίδας

11 ul {list-style: square inside url("dot5.gif");} Καφές Τσάι Coca Cola CSS – Cascading Style Sheets (ιδιότητα list-style – παράδειγμα) Στο παράδειγμα υπερισχύει η εικόνα dot5.gif αντί του τετραγώνου (square) στη θέση της κουκίδας