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

(Αυτή η σελίδα χρησιμοποιεί CSS style sheets)

Το παρόν έγγραφο είναι μετάφραση του άρθρου «Cascading Style Sheets. CSS tips & tricks».
Αυθεντική εκδοχή του εγγράφου βρίσκεται μόνο στην ιστοσελίδα W3C www.w3.org/Style/Examples/007/evenodd
Η παρούσα μετάφραση ΔΕΝ είναι επίσημο έγγραφο της W3C.
Όλα τα κοπιράιτ ανήκουν στη W3C.
Το παρόν έγγραφο μπορεί να έχει λάθη της μετάφρασης και εσφαλμένη εκτύπωση.
Συγγραφέας: Dimitris Papadopoulos, InCityLoans
Το έγγραφο μεταφράστηκε με υποστήριξη: ιστοσελιδα

Κατάσταση

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

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

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

tr:nth-child(even) {background: #CCC}
tr:nth-child(odd) {background: #FFF}
Μήνας199419951996199719981999200020012002
Ιαν141314131411111111
Φεβ131512151512141313
Μαρ161514171615141515
Απρ171617171715151616
Μάϊ212020212220212019
Ιουν242325242523252324
Ιουλ292826262726252625
Αυγ292827282827262826
Σεπ242323262424242221
Οκτ2022202220192022
Νοε1817161716151415
Δεκ1513131413101311

Μάλιστα, 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}
Μήνας199419951996199719981999200020012002
Ιαν141314131411111111
Φεβ131512151512141313
Μαρ161514171615141515
Απρ171617171715151616
Μάϊ212020212220212019
Ιουν242325242523252324
Ιουλ292826262726252625
Αυγ292827282827262826
Σεπ242323262424242221
Οκτ2022202220192022
Νοε1817161716151415
Δεκ1513131413101311

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

CSS Valid CSS!Valid HTML 4.0!

Bert Bos
Δημιουργία 6 Feb 2003;
Τελευταία ανανέωση $Date: 2008/01/11 18:26:30 $ GMT