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

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

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

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

Οι ιδιότητες κειμένου στη CSS που θα δούμε στο δεύτερο μέρος είναι οι εξής:

  • letter-spacing
  • word-spacing
  • line-height
  • text-shadow
  • text-direction

Letter-spacing

H ιδιότητα letter-spacing χρησιμοποιείται για να ορίσουμε την απόσταση μεταξύ των γραμμάτων του κειμένου. H τιμή που δίνουμε σε αυτή την ιδιότητα είναι ο αριθμός των pixels. Στο παρακάτω παράδειγμα θα δούμε πως μπορούμε να αυξήσουμε και να μειώσουμε τις αποστάσεις.

Παράδειγμα

h1 {
    letter-spacing: 3px;
}
h2 {
    letter-spacing: -3px;
}

Αποτέλεσμα

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

Word-spacing

H ιδιότητα word-spacing χρησιμοποιείται για να ορίσουμε την απόσταση μεταξύ των λέξεων του κειμένου. H τιμή που δίνουμε σε αυτή την ιδιότητα είναι ο αριθμός των pixels. Στο παρακάτω παράδειγμα θα δούμε πως μπορούμε να αυξήσουμε και να μειώσουμε τις αποστάσεις.

Παράδειγμα

h1 {
    letter-spacing: 10px;
}
h2 {
    letter-spacing: -5px;
}

Αποτέλεσμα

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

Line-height

Με την ιδιότητα line-height ορίζουμε την απόσταση μεταξύ των γραμμών του κειμένου. H τιμή που δίνουμε σε αυτή την ιδιότητα είναι δεκαδικός αριθμός ή ποσοστό (%). Η προεπιλογή για την απόσταση μεταξύ των γραμμών, για τα περισσότερα προγράμματα περιήγησης (browsers), είναι 1,1 με 1,2.

Παράδειγμα

p.small {
    line-height: 0.8;
}
p.big {
    line-height: 1.8;
}

Αποτέλεσμα

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

Text-shadow

Με την ιδιότητα text-shadow μπορούμε να δημιουργήσουμε σκιά στο κείμενο μας. Στην ιδιότητα αυτή δίνουμε τρεις τιμές. Η πρώτη τιμή ορίζει την οριζόντια σκίαση και δίνεται σε αριθμό pixels. Η δεύτερη τιμή ορίζει την κάθετη σκίαση και δίνεται και αυτή σε αριθμό pixels και η τρίτη τιμή είναι για το χρώμα της σκίασης. Τη τιμή του χρώματος μπορούμε να τη δώσουμε, όπως και στην ιδιότητα color.

Παράδειγμα

h1 {
 text-shadow: 2px 2px red;
}

Αποτέλεσμα

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

Text-direction

Με την ιδιότητα text-direction μπορούμε να αντιστρέψουμε το κείμενο μας και να ξεκινά από δεξιά προς τα αριστερά. Η τιμή που δίνουμε για να το επιτύχουμε αυτό είναι rtl.

Παράδειγμα

div {
    direction: rtl;
}

Αποτέλεσμα

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

Απάντηση

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