Κεφάλαιο 18: CSS Ψευδό-στοιχεία

• 18 Ιουλίου 2012
• by: Georgios
• in: Web Design

Συντακτικό

Η σύνταξη των ψευδό-στοιχείων είναι λίγο διαφορετική από αυτή των κανονικών στοιχείων του CSS, αλλά είναι σχετικά όμοια. Αν ήδη έχετε  διαβάσει το κεφάλαιο 11, τότε κάποια πράγματα θα σας φανούν λίγο ποιο οικία.

selector:pseudo-element { property:value}

Όπως μπορείτε να δείτε η διαφορά είναι πως γράφετε το ψευδό-στοιχείο μετά τον επιλογέα, και διαχωρίζεται τα δυο στοιχεία με άνω και κάτω τελεία (:).

Ένας άλλος τρόπος για να κάνετε κάτι παρόμοιο είναι να εισάγετε μια κλάση σε ένα ψευδό-στοιχείο όπως συμβαίνει με τον κώδικα που ακολουθεί.

selector.p:pseudo-element { property:value }

Με τον παραπάνω κώδικα μπορείτε να μορφοποιήσετε όλες τις παραγράφους μέσα στον δηλωμένο επιλογέα με το ψευδό-στοιχείο.

Τα στοιχεία

• first-line
• first-letter

First Line

Το ψευδό-στοιχείο first-line μορφοποιεί την πρώτη γραμμή κειμένου σε ένα στοιχείο επιπέδου πλαισίου.

Παραδείγματα

p { font-size: small; }
p:first-line { font-size: medium; color : #F00; }

Όπως βλέπετε οι παράγραφοι του παραπάνω παραδείγματος έχουν μορφοποιηθεί έτσι ώστε να έχουν μικρή γραμματοσειρά, αλλά η πρώτη γραμμή έχει μορφοποιηθεί έτσι ώστε να έχει μέτριου μεγέθους γραμματοσειρά με κόκκινα γράμματα. Αυτός ο κώδικας μορφοποίησης έχει ως αποτέλεσμα κάθε παράγραφος να έχει μικρά γράμματα και η πρώτη τους γραμμή να είναι με μεσαίου μεγέθους  κόκκινα γράμματα.

Ας υποθέσουμε τώρα πως θέλετε να έχετε αυτή τη μορφοποίηση μόνο στις παραγράφους που εσείς επιλέγετε και όχι όλες τις παραγράφους της σελίδας σας. Για να το πετύχουμε αυτό θα πρέπει να ορίσουμε μια κλάση για το ψευδό-στοιχείο.

Παράδειγμα

p.specialized:first-line { font-size: medium; color : #F00; }

Έτσι μπορούμε σε κάθε παράγραφο που εμείς επιθυμούμε να μορφοποιηθεί βάση τον επιλογών μας στο τελευταίο παράδειγμα να του εισάγουμε την κλάση specialized.

Θα πρέπει να σημειωθεί πως, ως πρώτη γραμμή εννοούμε το σύνολο των χαρακτήρων που υπάρχουν στην πρώτη γραμμή του στοιχείου, ανάλογα με το πλάτος του, το πλάτος του παραθύρου του περιηγητή διαδικτύου αν δεν υπάρχει κάποια μορφοποίηση ή το πλάτος του στοιχείου που περιέχει την παράγραφο.

Με το ψευδό-στοιχείο μπορείτε να χρησιμοποιήσετε τις ακόλουθες ιδιότητες:

background
clear
color
font
letter-spacing
line-height
text-decoration
text-transform
vertical-aling
word-spacing

 First Letter

Το ψευδό-στοιχείο first-letter χρησιμοποιείτε για να μορφοποιήσουμε μόνο τον πρώτο χαρακτήρα του κειμένου μέσα σε ένα στοιχείο επιπέδου πλαισίου.

p { font-size : small; }
p:first-letter { font-size : medium; color : #F00; }

Όπως μπορείτε στις παραγράφους του παραδείγματος έχουμε ορίσει μικρά γράμματα, αλλά με το ψευδό-στοιχείο first-letter έχουμε ορίσει μεσαίου μεγέθους γραμματοσειρά με κόκκινο γράμμα. Το αποτέλεσμα αυτού του παραδείγματος θα είναι να έχουμε όλες τις παραγράφους της σελίδας μας με μικρού μεγέθους γράμματα, αλλά το πρώτο γράμμα κάθε παραγράφου θα είναι κόκκινο και μεσαίου μεγέθους.

Τώρα ας υποθέσουμε πως θέλουμε να έχουμε μεσαίου μεγέθους πρώτο γράμμα με κόκκινο χρώμα μόνο σε επιλεγμένες παραγράφους. Για να το κάνουμε αυτό θα πρέπει να δημιουργήσουμε μια κλάση για το ψευδό-στοιχείο όπως με το παράδειγμα που ακολουθεί.

Παράδειγμα

p.specialized_first:first_letter { font-size : medium; color : #F00; }

Τώρα σε όποια παράγραφο θέλουμε να έχουμε μεσαίου μεγέθους κόκκινη γραμματοσειρά, θα πρέπει να δηλώσουμε την κλάση specialized_first.

Το ψευδό-στοιχείο first_letter μπορεί να χρησιμοποιήσει τις ακόλουθες ιδιότητες:

background
border
clear
color
float
font
line-height
margin
padding
text-decoration
text-transform
word-spacing

Προηγούμενο : CSS Τοποθέτηση στοιχείων