Κείμενο

Στην ενότητα αυτή θα δούμε πως μπορούμε να μορφοποιήσουμε το κείμενο στις σελίδες μας χρησιμοποιώντας CSS ιδιότητες

Μπορούμε να χρωματίσουμε κείμενο με την χρήση της CSS ιδιότητας color. Μπορούμε να ορίσουμε χρώμα με τρεις διαφορετικούς τρόπους:

• με το όνομα του χρώματος, πχ. red, blue κτλ.
• με την τιμή RGB (Red Green Blue), πχ. rgb(255,0,0)
• με το δεκαεξαδικό σύστημα (hex), πχ. #66FF33

Παρακάτω ακολουθεί ένα παράδειγμα στο οποίο ορίζουμε χρώμα σε συγκεκριμένο κείμενο χρησιμοποιώντας την HTML ιδιότητα style όπως περιγράψαμε στον τρόπο "Ορισμός στυλ μέσα στις ετικέτες" στην ενότητα Ορισμός των στυλ (έτσι για να μην ξεχνάμε και τους άλλους τρόπους ορισμού των CSS στυλ)

Με την CSS ιδιότητα text-align ορίζουμε την οριζόντια στοίχιση κειμένου:

• αριστερή στοίχιση (τιμή left)
• στο κέντρο (τιμή center)
• δεξιά στοίχιση (τιμή right)
• πλήρη στοίχιση (τιμή justify)

Η ιδιότητα text-decoration χρησιμοποιείται για να αφαιρέσουμε ή να προσθέσουμε στο κείμενο οριζόντιες γραμμές αλλά και να το εμπλουτίσουμε με το εφέ του αναβοσβήματος (blinking). Το blinking effect βέβαια, δεν χρησιμοποιείται σχεδόν καθόλου στα σημερινά sites καθώς δεν ταιριάζει στην εμφάνιση και γενικά στην φιλοσοφία των μοντέρνων σελίδων. Αντιθέτως, περισσότερο συχνά χρησιμοποιούμε την ιδιότητα αυτή για να αφαιρέσουμε ή να προσθέσουμε την υπογράμμιση των links. Για παράδειγμα:
Περισσότερα για τις δυνατότητες της CSS στην μορφοποίηση των συνδέσμων θα βρτείτε στην ενότητα Σύνδεσμοι

Το παρακάτω παράδειγμα παρουσιάζει κι' άλλες εφαρμογές της ιδιότητας text-decoration

Με την ιδιότητα text-transform μπορούμε να εμφανίσουμε το κείμενο, ανεξάρτητα απο το αρχικό (κείμενο), με κεφαλαίους χαρακτήρες (τιμή uppercase), με πεζούς χαρακτήρες (τιμή lowercase) ή με κεφαλαίο τον πρώτο χαρακτήρα κάθε λέξης (τιμή capitalize).

Με την CSS μπορούμε να εμφανίσουμε την πρώτη γραμμή του κειμένου σε δεξιότερη εσοχή. Η ιδιότητα που το κάνει αυτό είναι η text-indent η οποία σαν τιμή παίρνει το μέγεθος του κενού της εσοχής που θέλουμε να αφήσουμε

Στον παρακάτω πίνακα παρουσιάζονται όλες οι CSS ιδιότητες μορφοποίησης κειμένου:

Ιδιότητα	Τιμές	Περιγραφή
color	χρώμα transparent	Ορίζει το χρώμα του κειμένου Δοκίμασε το
direction	ltr rtl	Ορίζει την κατεύθυνση του κειμένου. Η γραφή μερικών γλωσσών (κυρίως των ανατολικών χωρών) αποτυπώνεται από τα δεξιά προς τα αριστερά (rtl) ltr = Left To Right rtl = Right To Left Δοκίμασε το
line-height	normal αριθμός σε pixels αριθμός σε %	Ορίζει το κενό διάστημα μεταξύ των γραμμών του κειμένου Δοκίμασε το
letter-spacing	normal αριθμός σε pixels αριθμός σε cm	Ορίζει το κενό διάστημα μεταξύ των χαρακτήρων του κειμένου. Μπορεί να πάρει και αρνητικές τιμές Δοκίμασε το
text-align	left right center justify	Ορίζει την στοίχιση του κειμένου Δοκίμασε το
text-decoration	none underline overline line-through blink	Ορίζει την "διακόσμηση" του κειμένου με διάφορα μικρά εφέ (κυρίως το εμπλουτίζει με γραμμές) underline = εμφανίζεται μια γραμμή κάτω απο το κέιμενο overline = εμφανίζεται μια γραμμή πάνω απο το κέιμενο line-through = εμφανίζεται μια γραμμή η οποία διαπερνάει το κέιμενο blink = το κείμενο αναβοσβύνει Δοκίμασε το
text-indent	αριθμός σε pixels αριθμός σε cm αριθμός σε %	Ορίζει κενό από τα αριστερά της γραμμής Δοκίμασε το
text-transform	none capitalize uppercase lowercase	Ορίζει την γραφή του κειμένου, έτσι όπως θα εμφανιστεί στον browser ανεξάρτητα από το πως είναι γραμμένα στον πηγαίο κώδικα της σελίδας capitalize = εμφανίζει το πρώτο γράμμα κάθε λέξης του κειμένου με κεφαλαία γράμματα uppercase = εμφανίζει το κείμενο με κεφαλαία γράμματα lowercase = εμφανίζει το κείμενο με πεζά γράμματα Δοκίμασε το
white-space	normal pre nowrap	Ορίζει τον τρόπο που θα διαχειριστεί ο browser τα κενά διαστήματα μέσα στο κείμενο. normal = τα κενά διαστήματα αγνοούνται απο τον browser pre = τα κενά διαστήματα εμφανίζονται όπως στο πηγαίο κώδικα, χωρίς ο browser να αγνοήσει κανένα απο αυτά nowrap = το κείμενο δεν θα αλλάξει γραμμή ακόμη και αν υπερβεί το μήκος του χώρου που βρίσκεται. Θα αλλάξει γραμμή μόνο όταν δει την ετικέτα <br /> Δοκίμασε το
word-spacing	normal αριθμός σε pixels αριθμός σε cm	Ορίζει το κενό διάστημα μεταξύ των λέξεων. Μπορεί να πάρει και αρνητική τιμή Δοκίμασε το

Ορισμός χρώματος σε κείμενο
Το παράδειγμα αυτό παρουσιάζει πως βάζουμε χρώμα σε κείμενο μιας σελίδας (ιδιότητα color)

Ορισμός χρώματος σαν φόντο του κείμενο
Το παράδειγμα αυτό παρουσιάζει πως βάζουμε χρώμα στο φόντο του κειμένου. (ιδιότητα background-color)

Κενό διάστημα μεταξύ χαρακτήρων
Το παράδειγμα αυτό παρουσιάζει πως ορίζουμε κενό διάστημα μεταξύ των χαρακτήρων. (ιδιότητα letter-spacing). Η ιδιότητα αυτή μπορεί να πάρει και αρνητικές τιμές

Κενό διάστημα μεταξύ γραμμών
Το παράδειγμα αυτό παρουσιάζει πως ορίζουμε το κενό διάστημα μεταξύ των γραμμών. (ιδιότητα line-height).

Στοίχιση κειμένου
Το παράδειγμα αυτό παρουσιάζει πως στοιχίζουμε κείμενο. (ιδιότητα text-align).

Εμπλουτισμός κειμένου
Το παράδειγμα αυτό παρουσιάζει πως εμπλουτίζουμε το κείμενο με διάφορα μικρά "εφέ". (ιδιότητα text-decoration).

Εσοχή κειμένου
Το παράδειγμα αυτό παρουσιάζει πως αφήνουμε κενό από τα αριστερά της παραγράφου. (ιδιότητα text-indent).

Έλεγχος κειμένου
Το παράδειγμα αυτό παρουσιάζει πως να ελέγχουμε ένα κείμενο ώστε, ανεξάρτητα πως είναι γραμμένο στον κώδικα HTML, να εμφανίζεται με κεφαλαία γράμματα ή με μικρά ή με κεφαλαία γράμματα στην αρχή κάθε λέξης. (ιδιότητα text-transform)