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

Χρώμα στο κείμενο

Μπορούμε να χρωματίσουμε κείμενο με την χρήση της CSS ιδιότητας color.
Χρώμα στο κείμενο μιας παραγράφου
p.introduction {
color: #FF66CC;
}
Μπορούμε να ορίσουμε χρώμα με τρεις διαφορετικούς τρόπους:
  • με το όνομα του χρώματος, πχ. red, blue κτλ.
  • με την τιμή RGB (Red Green Blue), πχ. rgb(255,0,0)
  • με το δεκαεξαδικό σύστημα (hex), πχ. #66FF33

Παρακάτω ακολουθεί ένα παράδειγμα στο οποίο ορίζουμε χρώμα σε συγκεκριμένο κείμενο χρησιμοποιώντας την HTML ιδιότητα style όπως περιγράψαμε στον τρόπο "Ορισμός στυλ μέσα στις ετικέτες" στην ενότητα Ορισμός των στυλ (έτσι για να μην ξεχνάμε και τους άλλους τρόπους ορισμού των CSS στυλ)
Χρώμα σε κείμενο
<p>Γράφοντας τις σελίδες μας μόνο με <em style="color: red;">HTML κώδικα</em>, μπορούμε να ορίσουμε το χρώμα και το μέγεθος του κειμένου αλλά και άλλων στοιχείων της σελίδας <span style="color: #CC32F4;">(όπως πίνακες, links, λίστες κτλ)</span>. Για να αλλάξουμε το χρώμα κάποιου κειμένου ή το χρώμα ενός πίνακα, θα πρέπει να βρούμε το χρώμα αυτό μέσα στον κώδικα και να το αλλάξουμε.</p>

<p style="color: green;"> Η διαδικασία αυτή μπορεί να φαντάζει εύκολη όταν έχουμε να διαχειριστούμε μια μόνο σελίδα, αλλά ένα site αποτελείται από δεκάδες σελίδες τις οποίες χρειάζεται να διαχειριζόμαστε εύκολα και γρήγορα. </p>

Στοίχιση κειμένου

Με την CSS ιδιότητα text-align ορίζουμε την οριζόντια στοίχιση κειμένου:
  • αριστερή στοίχιση (τιμή left)
  • στο κέντρο (τιμή center)
  • δεξιά στοίχιση (τιμή right)
  • πλήρη στοίχιση (τιμή justify)
Ορισμός ενός χρώματος σαν φόντο σε όλη την σελίδα
p {
text-align: right;
}
Στο CSS στυλ αυτό χρησιμοποιούμε Επιλογέα την ετικέτα p για να ορίσουμε (με την ιδιότητα text-align) δεξιά στοίχιση στο κείμενο μέσα στις παραγράφους της σελίδας. Δοκιμάστε να αλλάξετε στοίχιση.

Εμπλουτισμός κειμένου

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

Περισσότερα για τις δυνατότητες της CSS στην μορφοποίηση των συνδέσμων θα βρτείτε στην ενότητα Σύνδεσμοι

Το παρακάτω παράδειγμα παρουσιάζει κι' άλλες εφαρμογές της ιδιότητας text-decoration
Παραδείγματα της ιδιότητας text-decoration
h1 {
text-decoration: overline;
}
h2 {
text-decoration: line-through;
}
h3 {
text-decoration: underline;
}
a {
text-decoration: none;
}
em {
text-decoration: blink;
}

Μετασχηματισμός κειμένου σε κεφαλαία (uppercase) ή πεζά (lowercase)

Με την ιδιότητα text-transform μπορούμε να εμφανίσουμε το κείμενο, ανεξάρτητα απο το αρχικό (κείμενο), με κεφαλαίους χαρακτήρες (τιμή uppercase), με πεζούς χαρακτήρες (τιμή lowercase) ή με κεφαλαίο τον πρώτο χαρακτήρα κάθε λέξης (τιμή capitalize).
Εμφάνιση όλων των επικεφαλίδων με κεφαλαία
h1 {
text-transform: uppercase;
}
Στο CSS στυλ αυτό χρησιμοποιούμε σαν Επιλογέα το h1 για να εμφανίσουμε (με την ιδιότητα text-transform και την τιμή uppercase) με κεφαλαίους χαρακτήρες όλες τις επικεφαλίδες που έχουν οριστεί με την ετικέτα <h1>. Προσέξτε το αρχικό κείμενο στον HTML κώδικα και πως αυτό μετασχηματίζεται στο αποτέλεσμα στον browser. Δοκιμάστε επίσης και τις τιμές lowercase και capitalize

Κείμενο σε δεξιότερη εσοχή

Με την CSS μπορούμε να εμφανίσουμε την πρώτη γραμμή του κειμένου σε δεξιότερη εσοχή. Η ιδιότητα που το κάνει αυτό είναι η text-indent η οποία σαν τιμή παίρνει το μέγεθος του κενού της εσοχής που θέλουμε να αφήσουμε
Εμφάνιση της πρώτης γραμμής κάθε παραγράφου σε δεξιότερη εσοχή
p {
text-indent: 80px;
}
Το CSS στυλ θα εμφανίσει την πρώτη γραμμή κάθε παραγράφου σε δεξιότερη εσοχή αφήνοντας απόσταση 80 pixels απο αριστερά

Ιδιότητες της CSS για το κείμενο

Στον παρακάτω πίνακα παρουσιάζονται όλες οι 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)
Pin It

Ο ιστότοπος wlearn.gr χρησιμοποιεί cookies για την αποτελεσματικότερη λειτουργία του. Συνεχίζοντας την περιήγησή σας στο wlearn.gr συμφωνείτε με την χρήση των cookies.