Το χρώμα της γραφής μπορεί να οριστεί μέσω του color. Αναμένεται η καθορισμένη τιμή χρώματος.
p {
color: red;
}Ως τιμή μπορείτε να καθορίσετε χρωματικές λέξεις ή έναν εξαδεκαδικό κωδικό χρώματος.
Καθορισμός κατεύθυνσης γραφής
Με την ιδιότητα direction, μπορεί να επιβληθεί η κατεύθυνση της γραφής σε στοιχεία. Ενδιαφέρουσα είναι η αντίστροφη κατεύθυνση γραφής σε σχέση με γλώσσες όπου γράφεται από δεξιά προς τα αριστερά.
Επιπλέον, μπορείτε να καθορίσετε σε ποια πλευρά θα πρέπει να περικόπτονται μεγάλες περιεχόμενα με overflow.
• ltr – από αριστερά προς τα δεξιά
• rtl – από δεξιά προς τα αριστερά
Το επόμενο παράδειγμα δείχνει πώς μπορείτε να χρησιμοποιήσετε αυτή την ιδιότητα.
.normal {direction:ltr;}
.rueckwaerts {direction:rtl;}
Εδώ ορίστηκαν δύο κλάσεις.
<p class="normal">Κείμενο που γράφεται από αριστερά προς τα δεξιά. 1 2 3 4 5 6 7 8 9 0</p> <p class="rueckwaerts">Κείμενο που γράφεται από δεξιά προς τα αριστερά. 1 2 3 4 5 6 7 8 9 0</p>
Το αποτέλεσμα στον περιηγητή εμφανίζεται ως εξής:
Ορισμός οριζόντιας ευθυγράμμισης κειμένου
Με την ιδιότητα text-align καθορίζεται η οριζόντια ευθυγράμμιση παραγράφων κειμένου και άλλων κειμένων που περιέχονται σε τετράγωνα στοιχεία ή σε ενσωματωμένα στοιχεία. Η προεπιλεγμένη ρύθμιση είναι αριστερή ευθυγράμμιση.
• left – αριστερή ευθυγράμμιση
• right – δεξιά ευθυγράμμιση
• center – κέντρο
• justify – δικαιώστε
Ένα παράδειγμα:
<p style="text-align:right;">
Καλώς ήλθατε
</p>
Το αποτέλεσμα δείχνει κάπως έτσι:
Ορισμός κατακόρυφης ευθυγράμμισης
Με την ιδιότητα vertical-align καθορίζεται η κατακόρυφη ευθυγράμμιση του κειμένου εντός μιας γραμμής σε σχέση με το ύψος της γραμμής. Η τιμή αναφέρεται πάντα στο γονικό στοιχείο, που πρέπει να είναι ενσωματωμένο στοιχείο. Επιπλέον, μπορεί να γίνει ευθυγράμμιση κειμένου μέσα σε πίνακες.
Οι παρακάτω τιμές είναι διαθέσιμες:
• sub – υπογράμμιση
• super – υπεργράμμιση
• baseline – ευθυγράμμιση στη βάση
• top – ευθυγράμμιση στο επάνω περιθώριο του γονικού στοιχείου
• bottom – ευθυγράμμιση στο κάτω περιθώριο του γονικού στοιχείου
• middle – μεσαία ευθυγράμμιση μεταξύ του επάνω και κάτω περιθωρίου του γονικού στοιχείου
• text-top – στο πάνω άκρο του κειμένου
• text-bottom – στο κάτω άκρο του κειμένου
• Ποσοστιαία τιμή – μια θετική ή αρνητική τιμή μετακινεί το στοιχείο πάνω ή κάτω από τη βάση.
Ένα παράδειγμα:
.baseline {
vertical-align: baseline;
}
Να σημειώσετε ότι οι τιμές του vertical-align ερμηνεύονται διαφορετικά ανάλογα με τον περιηγητή. Θα πρέπει να δοκιμάσετε τα αποτελέσματα πριν ανεβάσετε τις σελίδες στο διαδίκτυο.
Καθορισμός διακόσμησης κειμένου
Η text-decoration χρησιμοποιείται για τον καθορισμό επιπλέον ιδιοτήτων κειμένου ή υπερσυνδέσεων.
• none – χωρίς διακόσμηση κειμένου
• underline – με υπογράμμιση
• overline – με υπεργράμμιση
• line-through – με διαγράμμιση
• blink – αναβοσβήνον
Ένα ακόμα παράδειγμα:
a:link {
text-decoration: none;
}
Με αυτόν τον τρόπο, τα υπερσυνδέσμοι της σελίδας δεν θα έχουν πλέον υπογράμμιση.
Μπορείτε επίσης να καθορίσετε συγκεκριμένα το διάστημα μεταξύ των λέξεων.
<span style="word-spacing:0.5em">Καλώς ήλθατε στο PSD-Tutorials.de!</span><br /> <span style="word-spacing:1em">Καλώς ήλθατε στο PSD-Tutorials.de!</span>
Αναμένεται αριθμητική τιμή. Οι ποσοστιαίες τιμές δεν είναι εφικτές.
Παρόμοια με το word-spacing είναι εξάλλου το letter-spacing. Ωστόσο, με το letter-spacing καθορίζετε το διάστημα μεταξύ των μεμονωμένων γραμμάτων ενός κειμένου. Εδώ επιτρέπονται αριθμητικές τιμές, αλλά όχι ποσοστιαίες μονάδες.
<span style="letter-spacing:0.1em">Παράδειγμα κειμένου με διάστημα μεταξύ γραμμάτων 0.1em</span><br> <span style="letter-spacing:0.3em">Παράδειγμα κειμένου με διάστημα μεταξύ γραμμάτων 0.3em</span><br>
Με την ιδιότητα text-transform μπορείτε να ορίσετε εάν το κείμενο θα γίνεται με κεφαλαία ή με πεζά γράμματα. Και αυτό ανεξάρτητα από την πραγματική σημείωση στον κώδικα. Επιπλέον, μπορείτε να επιβάλλετε τη γραμματοσειρά σαν κεφαλαία γράμματα.
• lowercase – πεζά γράμματα
• uppercase – κεφαλαία γράμματα
• capitalize – τα πρώτα γράμματα κάθε λέξης είναι κεφαλαία
• none – χωρίς μετασχηματισμό κειμένου
Παράδειγμα:
.klein {
text-transform: lowercase;
}Στον περιηγητή, το αποτέλεσμα εμφανίζεται ως εξής:
Κενά και αλλαγές γραμμής
Με την ιδιότητα white-space καθορίζεται πώς θα πρέπει να εμφανίζονται τα κενά και οι αλλαγές γραμμής που υπάρχουν στον πηγαίο κώδικα στον περιηγητή.
• normal – Εισάγεται αυτόματη αλλαγή γραμμής. Επίσης, πολλά κενά συγχωνεύονται σε ένα.
• pre – Οι αλλαγές γραμμής εμφανίζονται όπως βρίσκονται στον πηγαίο κώδικα.
• nowrap – Δεν υπάρχει αυτόματη αλλαγή γραμμής.
• pre-line – Πολλά κενά συγχωνεύονται σε ένα. Επιπλέον, γίνεται αλλαγή αν η κελίδα για την εμφάνιση δεν είναι αρκετά μεγάλη.
• pre-wrap – Υπάρχει αλλαγή αν η κελίδα για την εμφάνιση δεν είναι αρκετά μεγάλη.
Ένα παράδειγμα είναι το εξής:
<pre class="brush:xml;"><!DOCTYPE html>
<html lang=& quot;de">
<head>
<title>PSD-Tutorials.de</title>
<meta charset="UTF-8" />
<style>
body>p {
font-family:"Courier New", Courier, monospace;
font-size: 200%;
}
body p {
color:#0066FF;
}
</style>
</head>
<body>
<p>Absatz 1</p>
<p>Absatz 2</p>
<p>Absatz 3</p>
<div>
<p>Absatz 4</p>
</div>
</body>
</html></pre>Στον περιηγητή, το αποτέλεσμα είναι όπως φαίνεται παρακάτω:
Υλοποίηση σκιάς
Με την ιδιότητα text-shadow μπορείτε να επιβάλετε μια σκιά στο κείμενο. Να ληφθεί υπόψη ότι αυτή η ιδιότητα υποστηρίζεται μόνο σε σχετικά πρόσφατους περιηγητές. Οι περιηγητές που δεν μπορούν να ερμηνεύσουν το text-shadow εμφανίζουν το κείμενο χωρίς σκιά.
Το text-shadow χρησιμοποιείται ως εξής:
text-shadow: hV vV blur #xxxxxx;
Και αυτές είναι οι τιμές:
• hV – Οριζόντια μετατόπιση
• vV – Κάθετη μετατόπιση
• blur – Θολότητα
• #xxxxxx – Το χρώμα της σκιάς
Το παρακάτω παράδειγμα δείχνει μια τυπική εφαρμογή για το text-shadow.
.schatten {
color: #444;
font-size: 34px;
text-shadow: 2px 2px 3px #333;
}
Η παρακάτω κλάση εφαρμόζεται σε μια κεφαλίδα πρώτης τάξης.
<h1 class="schatten">PSD-Tutorials.de</h1>
Και πάλι, εδώ βλέπουμε το αποτέλεσμα:
Όπως προαναφέρθηκε, μπορείτε να χρησιμοποιήσετε το text-shadow χωρίς προβλήματα, καθώς η μη ερμηνεία των περιηγητών δεν έχει αρνητικές επιπτώσεις. Το κείμενο απλά εμφανίζεται χωρίς σκιά.
