Style Sheets Ιστού
CSS συμβουλές και κόλπα

Κατάσταση

Προειδοποίηση: όταν γράφτηκε αυτό το κείμενο (Φεβρουάριος 2003), οι πιο γνωστοί πλοηγοί δεν είχαν υποστήριξη για τον 'nth-child' selector (ο οποίος παρουσιάστηκε τον Νοέμβριο 2001) και μόνο λίγοι είχαν υποστήριξη για το COL στοιχείο.

Ζυγοί και μονοί κανόνες

Ένας τρόπος για βελτίωση της ανάγνωσης μεγάλων πινάκων είναι γραμμές με εναλλασσόμενο χρώμα. Για παράδειγμα, ο παρακάτω πίνακας έχει ένα απαλό γκρι φόντο στις ζυγές γραμμές και άσπρο στις μονές. Οι κανόνες για αυτό είναι φοβερά απλοί:

tr:nth-child(even) {background: #CCC}
tr:nth-child(odd) {background: #FFF}

Μήνας	1994	1995	1996	1997	1998	1999	2000	2001	2002
Ιαν	14	13	14	13	14	11	11	11	11
Φεβ	13	15	12	15	15	12	14	13	13
Μαρ	16	15	14	17	16	15	14	15	15
Απρ	17	16	17	17	17	15	15	16	16
Μάϊ	21	20	20	21	22	20	21	20	19
Ιουν	24	23	25	24	25	23	25	23	24
Ιουλ	29	28	26	26	27	26	25	26	25
Αυγ	29	28	27	28	28	27	26	28	26
Σεπ	24	23	23	26	24	24	24	22	21
Οκτ	20	22	20	22	20	19	20	22
Νοε	18	17	16	17	16	15	14	15
Δεκ	15	13	13	14	13	10	13	11

Μάλιστα, CSS επιτρέπει όχι μόνο μονές/ζυγές εναλλαγές αλλά και αυθαίρετα διαστήματα. Οι λέξεις-κλειδιά 'ζυγά' και 'μονά' είναι μόνο βολικές συντομογραφίες. Για παράδειγμα, για μια μεγάλη λίστα θα μπορούσατε να κάνετε αυτό:

li:nth-child(5n+3) {font-weight: bold}

Αυτό λέει ότι κάθε 5η λίστα αντικειμένου είναι έντονη, ξεκινόντας από την 3η. Με άλλα λόγια, τα αντικείμενα με αρίθμηση 3, 8, 13, 18, 23 κλπ θα είναι έντονα.

Ζυγές και μονές στήλες

Το ίδιο λειτουργεί για στήλες πίνακα επίσης, αλλά τότε θα πρέπει να υπάρχει ένα στοιχείο στο έγγραφο το οποίο αντιστοιχεί στην στήλη. Η HTML παρέχει την COL γιαυτό. Ο πίνακας πρέπει να αρχίζει με ένα COL για κάθε στήλη:

<table>
<col><col><col><col><col><col><col><col><col><col>
<tr><th>Month<th>1994<th>1995<th>1996...

(To COL μπορεί να χρησιμοποιηθεί και για άλλα πράγματα πέρα από την διαμόρφωση, αλλά σε αυτήν την περίπτωση το μόνο που χρειαζόμαστε τα στοιχεία COL να είναι παρόντα). Οι παρακάτω κανόνες δίνουν στην πρώτη στήλη ένα κίτρινο φόντο και κάθε άλλη στήλη ξεκινόντας από την 3η ένα γκρι φόντο:

col:first-child {background: #FF0}
col:nth-child(2n+3) {background: #CCC}

Μήνας	1994	1995	1996	1997	1998	1999	2000	2001	2002
Ιαν	14	13	14	13	14	11	11	11	11
Φεβ	13	15	12	15	15	12	14	13	13
Μαρ	16	15	14	17	16	15	14	15	15
Απρ	17	16	17	17	17	15	15	16	16
Μάϊ	21	20	20	21	22	20	21	20	19
Ιουν	24	23	25	24	25	23	25	23	24
Ιουλ	29	28	26	26	27	26	25	26	25
Αυγ	29	28	27	28	28	27	26	28	26
Σεπ	24	23	23	26	24	24	24	22	21
Οκτ	20	22	20	22	20	19	20	22
Νοε	18	17	16	17	16	15	14	15
Δεκ	15	13	13	14	13	10	13	11

Το φόντο των γραμμών (TR) έχει ζωγραφιστεί μπροστά από το φόντο των στηλών (COL), έτσι ώστε αν θέλετε να είστε σίγουροι ότι το φόντο των στηλών θα φαίνεται, δεν θα πρέπει να βάλετε φόντο στις σειρές.