Ιδιότητες κειμένου στη CSS
Με τις ιδιότητες κειμένου στη CSS διαμορφώνουμε την εμφάνιση του κειμένου στην ιστοσελίδα μας. Μπορούμε δηλαδή να ορίσουμε για το κείμενο μας χρώμα, θέση, εσοχή, διακόσμηση, κατεύθυνση αλλά και απόσταση μεταξύ λέξεων, γραμμάτων και γραμμών.
Οι ιδιότητες κειμένου στη CSS που θα δούμε στο πρώτο μέρος είναι οι εξής:
- color
- text-align
- text-decoration
- text-transform
- text-indent
Color
Με την ιδιότητα color ορίζουμε το χρώμα του κειμένου. Μπορούμε να δώσουμε τιμή για το χρώμα είτε με το όνομα του χρώματος, είτε με rgb τιμή, είτε με δεκαεξαδική τιμή.
Παράδειγμα
h1 {
color: red;
}
h2 {
color: rgb(0, 255, 0); /*πράσινο */
}
p {
color: #0000FF; /* μπλε */
}Αποτέλεσμα
Text-aling
Με την ιδιότητα text-align ορίζουμε τη οριζόντια θέση του κειμένου μέσα στο στοιχείο που θα το βάλουμε.
Στο παρακάτω παράδειγμα θα βάλουμε τρεις επικεφαλίδες μέσα στο body.
Παράδειγμα
h1 {
text-align: center;
}
h2 {
text-align: left;
}
h3 {
text-align: right;
}Αποτέλεσμα
Για να ορίσουμε την κάθετη θέση του κειμένου μέσα στο στοιχείο χρησιμοποιούμε τη ιδιότητα vertical-align.
Text-decoration
Με την ιδιότητα text-decoration μπορούμε να διακοσμήσουμε το κείμενο με μία γραμμή. Οι τιμές που μπορούμε να δώσουμε σε αυτή την ιδιότητα είναι underline, overline, line-through, none. Με την τιμή none μπορούμε να αφαιρέσουμε τη διακόσμηση από ένα κείμενο, πχ. ένα link που δε θέλουμε να έχει υπογράμμιση.
Παράδειγμα
h1 {
text-decoration: overline;
}
h2 {
text-decoration: line-through;
}
h3 {
text-decoration: underline;
}
h4 {
text-decoration: none;
}Αποτέλεσμα
Text-transform
Με την ιδιότητα text-transform μπορούμε να αλλάξουμε τη μορφή του κειμένου. Οι τιμές που μπορούμε να δώσουμε σε αυτή την ιδιότητα είναι uppercase, lowercase, capitalize. Η τιμή uppercase μετατρέπει το κείμενο μας σε κεφαλαία γράμματα, η τιμή lowercase μετατρέπει το κείμενο μας σε πεζά γράμματα και η τιμή capitalize μετατρέπει το πρώτο γράμμα όλων των λέξεων του κειμένου σε κεφαλαίο και τα υπόλοιπα γράμματα σε πεζά.
Παράδειγμα
p.uppercase {
text-transform: uppercase;
}
p.lowercase {
text-transform: lowercase;
}
p.capitalize {
text-transform: capitalize;
}Αποτέλεσμα
Text-indent
H ιδιότητα text-indent προσδιορίζει την εσοχή της πρώτης γραμμής του κειμένου. H τιμή που δίνουμε σε αυτή την ιδιότητα είναι ο αριθμός των pixels.
Παράδειγμα
p {
text-indent: 50px;
}Αποτέλεσμα
