Ιδιότητες κειμένου στη CSS (Μέρος Α)

Ιδιότητες κειμένου στη CSS (Μέρος Α)

Ιδιότητες κειμένου στη 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; /* μπλε */
}

Αποτέλεσμα

Ιδιότητες κειμένου στη CSS

Text-aling

Με την ιδιότητα text-align ορίζουμε τη οριζόντια θέση του κειμένου μέσα στο στοιχείο που θα το βάλουμε.

Στο παρακάτω παράδειγμα θα βάλουμε τρεις επικεφαλίδες μέσα στο body.

Παράδειγμα

h1 {
 text-align: center;
}
h2 {
 text-align: left;
}
h3 {
 text-align: right;
}

Αποτέλεσμα

Ιδιότητες κειμένου στη CSS

Για να ορίσουμε την κάθετη θέση του κειμένου μέσα στο στοιχείο χρησιμοποιούμε τη ιδιότητα 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;
}

Αποτέλεσμα

Ιδιότητες κειμένου στη CSS

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;
}

Αποτέλεσμα

Ιδιότητες κειμένου στη CSS

Text-indent

H ιδιότητα text-indent προσδιορίζει την εσοχή της πρώτης γραμμής του κειμένου. H τιμή που δίνουμε σε αυτή την ιδιότητα είναι ο αριθμός των pixels.

Παράδειγμα

p {
 text-indent: 50px;
}

Αποτέλεσμα

Ιδιότητες κειμένου στη CSS

Απάντηση

Αυτός ο ιστότοπος χρησιμοποιεί το Akismet για να μειώσει τα ανεπιθύμητα σχόλια. Μάθετε πώς υφίστανται επεξεργασία τα δεδομένα των σχολίων σας.