3.1 Μορφοποίηση κειμένου στην γλώσσα CSS

Το CSS προσφέρει πολλές ιδιότητες για τη μορφοποίηση του κειμένου. Μερικές από αυτές περιλαμβάνουν:

• Η ιδιότητα font-family καθορίζει τη γραμματοσειρά που θα χρησιμοποιηθεί για το κείμενο.
• Η ιδιότητα font-size ορίζει το μέγεθος της γραμματοσειράς του κειμένου.
• Η ιδιότητα font-weight καθορίζει το πάχος της γραμματοσειράς του κειμένου.
• Η ιδιότητα font-style ορίζει το στυλ της γραμματοσειράς του κειμένου, όπως το italic ή το oblique.
• Η ιδιότητα text-align καθορίζει τον οριζόντιο στοίχισμα του κειμένου, όπως αριστερά, δεξιά, κέντρο ή δικαιοστοίχιση δικτύου.
• Η ιδιότητα text-decoration ορίζει τη διακόσμηση του κειμένου, όπως η υπογράμμιση, η διαγραφή ή η χρήση κεφαλαίων γραμμάτων.
• Η ιδιότητα text-transform καθορίζει τη μετατροπή του κειμένου σε κεφαλαία ή πεζά γράμματα.
• Η ιδιότητα line-height καθορίζει το ύψος της γραμμής για το κείμενο.
• Η ιδιότητα color καθορίζει το χρώμα του κειμένου.

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

Η ιδιότητα color χρησιμοποιείται για να καθορίσετε το χρώμα του κειμένου. Έχετε διάφορες επιλογές για να ορίσετε το χρώμα:

1. Όνομα χρώματος: Μπορείτε να χρησιμοποιήσετε ένα προκαθορισμένο όνομα χρώματος, όπως “red” (κόκκινο), “blue” (μπλε), “green” (πράσινο) κ.λπ.
2. Τιμή HEX: Μπορείτε να χρησιμοποιήσετε μια HEX τιμή χρώματος, όπως “#ff0000” για κόκκινο, “#00ff00” για πράσινο κ.λπ.
3. Τιμή RGB: Μπορείτε να χρησιμοποιήσετε μια τιμή RGB χρώματος, όπως “rgb(255, 0, 0)” για κόκκινο, “rgb(0, 255, 0)” για πράσινο κ.λπ.
4. Τιμή HSL: Μπορείτε να χρησιμοποιήσετε μια τιμή HSL χρώματος, όπως “hsl(0, 100%, 50%)” για κόκκινο, “hsl(120, 100%, 50%)” για πράσινο κ.λπ.

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

[adinserter block=”2″]

Παρακάτω παρουσιάζονται παραδείγματα για τη χρήση της ιδιότητας color:

h1 {
  color: red; /* Χρήση όνοματος χρώματος */
}

p {
  color: #00ff00; /* Χρήση HEX τιμής */
}

span {
  color: rgb(0, 0, 255); /* Χρήση RGB τιμής */
}

a {
  color: hsl(240, 100%, 50%); /* Χρήση HSL τιμής */
}

Μπορείτε να αντικαταστήσετε τις τιμές χρωμάτων με τα επιθυμητά χρώματα που επιθυμείτε να χρησιμοποιήσετε για το κείμενό σας.

Σε αυτό το παράδειγμα, ορίζουμε τόσο την ιδιότητα background-color όσο και την ιδιότητα color:

body {
  background-color: lightblue; /* Ορίζουμε το χρώμα του φόντου */
  color: white; /* Ορίζουμε το χρώμα του κειμένου */
}

Σε αυτό το παράδειγμα, ο κώδικας ορίζει το φόντο της σελίδας να είναι ανοικτό μπλε (lightblue) και το χρώμα του κειμένου να είναι λευκό. Μπορείτε να αλλάξετε τις τιμές των χρωμάτων ανάλογα με τις προτιμήσεις σας.

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

• text-align: Χρησιμοποιείται για να καθορίσετε τον τρόπο στοίχισης του κειμένου εντός ενός στοιχείου. Μπορεί να είναι αριστερά (left), δεξιά (right), στο κέντρο (center) ή απλώς να γίνεται δικαιολογημένο (justify).
• text-decoration: Χρησιμοποιείται για να προσθέσετε διακοσμητικά στοιχεία στο κείμενο, όπως υπογράμμιση (underline), διαγράμμιση (line-through) και άλλα. Μπορείτε να καθορίσετε περαιτέρω λεπτομέρειες, όπως το χρώμα και τον τύπο της γραμμής.
• text-transform: Χρησιμοποιείται για να μετατρέψετε το κείμενο σε κεφαλαία γράμματα (uppercase), πεζά γράμματα (lowercase) ή να κεφαλαιοποιήσετε το πρώτο γράμμα κάθε λέξης (capitalize).
• text-indent: Χρησιμοποιείται για να ορίσετε την εσοχή της πρώτης γραμμής ενός κειμένου. Μπορείτε να καθορίσετε την απόσταση μεταξύ της αριστερής περιοχής του στοιχείου και της πρώτης γραμμής του κειμένου.
• direction: Χρησιμοποιείται για να ορίσετε την κατεύθυνση του κειμένου. Η προεπιλεγμένη κατεύθυνση είναι από αριστερά προς τα δεξιά, αλλά μπορείτε επίσης να ορίσετε την κατεύθυνση από δεξιά προς τα αριστερά. Αυτό είναι χρήσιμο όταν ασχολείστε με γλώσσες προγραμματισμού ή γραφής από δεξιά προς τα αριστερά, όπως τα αραβικά ή τα εβραϊκά.

[adinserter block=”3″]

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

Μπορείτε να χρησιμοποιήσετε τις τιμές “left”, “center” και “right” για να ορίσετε την επιθυμητή στοίχιση του κειμένου. Η τιμή “left” εφαρμόζει αριστερή στοίχιση, η τιμή “center” εφαρμόζει κεντρική στοίχιση και η τιμή “right” εφαρμόζει δεξιά στοίχιση.

.center-align {
  /* Καθορίζει την ευθυγράμμιση του κειμένου στο κέντρο */
  text-align: center;
}

.left-align {
  /* Καθορίζει την ευθυγράμμιση του κειμένου στα αριστερά */
  text-align: left;
}

.right-align {
  /* Καθορίζει την ευθυγράμμιση του κειμένου στα δεξιά */
  text-align: right;
}

<p class="center-align">Center aligned text.</p> <!-- Κείμενο που είναι στο κέντρο -->

<p class="left-align">Left aligned text.</p> <!-- Κείμενο που είναι στα αριστερά -->

<p class="right-align">Right aligned text.</p> <!-- Κείμενο που είναι στα δεξιά -->

Μπορείτε να χρησιμοποιήσετε αυτήν την ιδιότητα για να ορίσετε τον οριζόντιο στοίχισμα του κειμένου στις ιστοσελίδες σας.

Όταν η ιδιότητα text-align ορίζεται σε “justify”, το κείμενο ευθυγραμμίζεται κατά τρόπο ώστε κάθε γραμμή να έχει ίσο πλάτος. Αυτό σημαίνει ότι οι λέξεις και οι χαρακτήρες στις γραμμές επεκτείνονται ή συμπιέζονται για να γεμίσουν το πλάτος της γραμμής.

Επιπλέον, τα αριστερά και δεξιά περιθώρια ευθυγραμμίζονται, δηλαδή οι λέξεις ξεκινούν και τελειώνουν στις ίδιες θέσεις στις αριστερές και δεξιές άκρες της γραμμής.

Αυτή η τεχνική ευθυγράμμισης του κειμένου χρησιμοποιείται συχνά σε περιοδικά και εφημερίδες για να προσδώσει μια πιο επαγγελματική και οργανωμένη εμφάνιση.

.justify-align {
  text-align: justify;
}

<p class="justify-align">Justified text. Each line is stretched to have equal width.</p>

Η ιδιότητα text-align-last χρησιμοποιείται για να καθορίσετε τον τρόπο ευθυγράμμισης της τελευταίας γραμμής ενός κειμένου.

Μπορείτε να επιλέξετε μία από τις παρακάτω τιμές για την ιδιότητα text-align-last:

• Η τιμή “auto” είναι η προεπιλεγμένη και σημαίνει ότι η ευθυγράμμιση της τελευταίας γραμμής θα γίνει όπως ορίζεται από την ιδιότητα text-align για τον υπόλοιπο κείμενο.
• Η τιμή “left” σημαίνει ότι η τελευταία γραμμή θα ευθυγραμμίζεται αριστερά.
• Η τιμή “right” σημαίνει ότι η τελευταία γραμμή θα ευθυγραμμίζεται δεξιά.
• Η τιμή “center” σημαίνει ότι η τελευταία γραμμή θα ευθυγραμμίζεται στο κέντρο.
• Η τιμή “justify” σημαίνει ότι η τελευταία γραμμή θα ευθυγραμμίζεται με δικαιολογημένο τρόπο, παρόμοιο με αυτόν που βλέπουμε σε περιοδικά και εφημερίδες.

Παράδειγμα:

.text-align-last-example {
  /* Ορίζει την ευθυγράμμιση του κειμένου σε justify */
  text-align: justify;

  /* Ορίζει την τελευταία ευθυγράμμιση του κειμένου σε center */
  text-align-last: center;
}

<p class="text-align-last-example">Παράδειγμα κειμένου με τελευταία γραμμή που ευθυγραμμίζεται στο κέντρο.</p>

Η ιδιότητα text-align-last σας επιτρέπει να ρυθμίσετε τον τρόπο ευθυγράμμισης της τελευταίας γραμμής ενός κειμένου και να επιτύχετε τον επιθυμητό σχεδιασμό για αυτήν.

Οι ιδιότητες direction και unicode-bidi χρησιμοποιούνται για να αλλάξουν την κατεύθυνση του κειμένου ενός στοιχείου.

Η ιδιότητα direction μπορεί να πάρει τις παρακάτω τιμές:

• ltr: Ορίζει την κατεύθυνση του κειμένου από αριστερά προς τα δεξιά (αριστερά προς δεξιά, left-to-right).
• rtl: Ορίζει την κατεύθυνση του κειμένου από δεξιά προς τα αριστερά (δεξιά προς αριστερά, right-to-left).

Η ιδιότητα unicode-bidi χρησιμοποιείται για τον έλεγχο της κατεύθυνσης των χαρακτήρων εντός ενός στοιχείου, όταν η γλώσσα ή η κατεύθυνση του κειμένου αλλάζει. Συνήθως συνδυάζεται με την ιδιότητα direction.

Παράδειγμα:

.text-direction-example {
  /* Ορίζει την κατεύθυνση του κειμένου σε δεξιό προς αριστερό */
  direction: rtl;

  /* Επιτρέπει την αναστροφή της διεύθυνσης του κειμένου */
  unicode-bidi: bidi-override;
}

<p class="text-direction-example">Παράδειγμα κειμένου με αντίθετη κατεύθυνση.</p>

Η ιδιότητα vertical-align χρησιμοποιείται για να καθορίσει την κατακόρυφη στοίχιση ενός στοιχείου. Αυτή η ιδιότητα μπορεί να εφαρμοστεί σε διάφορα στοιχεία, όπως κείμενο, εικόνες και inline στοιχεία.

Μπορείτε να χρησιμοποιήσετε την ιδιότητα vertical-align με διάφορες τιμές για να καθορίσετε τον τρόπο κατακόρυφης στοίχισης του στοιχείου. Ορισμένες από αυτές τις τιμές είναι:

• baseline: Το στοιχείο αυτοστοιχίζεται στην βασική γραμμή του κειμένου.
• top: Το στοιχείο αυτοστοιχίζεται στην επάνω άκρη του περιεχομένου.
• middle: Το στοιχείο αυτοστοιχίζεται στο κέντρο του περιεχομένου.
• bottom: Το στοιχείο αυτοστοιχίζεται στην κάτω άκρη του περιεχομένου.
• text-top: Το στοιχείο αυτοστοιχίζεται στην επάνω άκρη του κειμένου.
• text-bottom: Το στοιχείο αυτοστοιχίζεται στην κάτω άκρη του κειμένου.

Μπορείτε να εφαρμόσετε την ιδιότητα vertical-align σε ένα στοιχείο HTML με την αντίστοιχη τιμή που επιθυμείτε για να επιτύχετε την επιθυμητή κατακόρυφη στοίχιση του στοιχείου.

[adinserter block=”4″]

Η ιδιότητα vertical-align μπορεί να δεχτεί αριθμητικές τιμές σε pixels ή ποσοστά για να επιτύχει πιο ακριβή ευθυγράμμιση.

Αυτό σημαίνει ότι μπορείτε να καθορίσετε την ακριβή θέση του στοιχείου κατά μήκος του κατακόρυφου άξονα. Μπορείτε να χρησιμοποιήσετε αριθμητικές τιμές για να καθορίσετε την απόσταση σε pixels από τη βάση του στοιχείου ή να χρησιμοποιήσετε ποσοστιαίες τιμές για να καθορίσετε το ποσοστό του ύψους του στοιχείου.

Παρακάτω παρατίθενται δύο παραδείγματα χρήσης της ιδιότητας vertical-align:

1. Χρήση αριθμητικής τιμής σε pixels:

.vertical-align-example {
  vertical-align: 20px;
}

Αυτός ο κανόνας CSS εφαρμόζει μια απόσταση 20 pixels από τη βάση του στοιχείου.

2. Χρήση ποσοστιαίας τιμής:

.vertical-align-example {
  vertical-align: 50%;
}

Αυτός ο κανόνας CSS εφαρμόζει την ευθυγράμμιση στο 50% του ύψους του στοιχείου.

Μπορείτε να προσαρμόσετε αυτές τις τιμές ανάλογα με τις απαιτήσεις σας για να επιτύχετε την ευθυγράμμιση που επιθυμείτε.

Παράδειγμα:

.vertical-align-example {
  /* Ορίζει την κατακόρυφη στοίχιση του στοιχείου στο κέντρο */
  vertical-align: middle;
}

<p class="vertical-align-example">Κείμενο με κατακόρυφη ευθυγράμμιση στο κέντρο.</p>

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

Η ιδιότητα text-decoration χρησιμοποιείται για να προσθέσει διακοσμητικά στοιχεία στο κείμενο, όπως υπογράμμιση, διαγραφή, κεφαλίδες και λοιπά. Η ιδιότητα text-decoration μπορεί να αποτελείται από πολλαπλές τιμές που ορίζουν τον τρόπο με τον οποίο θα γίνει η διακόσμηση του κειμένου.

Ορισμένες από τις τιμές που μπορεί να λάβει η ιδιότητα text-decoration είναι:

• none: Καμία διακόσμηση, κανένα διακοσμητικό στοιχείο δεν προστίθεται στο κείμενο.
• underline: Υπογράμμιση του κειμένου.
• overline: Προσθήκη μιας κεφαλίδας πάνω από το κείμενο.
• line-through: Διαγράφη του κειμένου με μια διαγραμμένη γραμμή.
• underline overline: Υπογράμμιση και προσθήκη μιας κεφαλίδας πάνω από το κείμενο.
• inherit: Η διακόσμηση κληρονομείται από το γονικό στοιχείο.

Παράδειγμα:

.text-decoration-example {
  /* Ορίζει την υπογράμμιση κειμένου */
  text-decoration: underline;
}

<p class="text-decoration-example">Αυτό είναι ένα παράδειγμα κειμένου με υπογράμμιση.</p>

Η ιδιότητα text-decoration-color χρησιμοποιείται για να ορίσετε το χρώμα της γραμμής διακόσμησης του κειμένου.

Για να ορίσετε το χρώμα, μπορείτε να χρησιμοποιήσετε μια από τις ακόλουθες μορφές:

1. Ένα όνομα χρώματος, όπως “red”, “blue”, “green” κλπ.
2. Έναν κωδικό HEX χρώματος, π.χ. “#ff0000” για κόκκινο, “#00ff00” για πράσινο, “#0000ff” για μπλε κλπ.
3. Έναν κωδικό RGB χρώματος, π.χ. “rgb(255, 0, 0)” για κόκκινο, “rgb(0, 255, 0)” για πράσινο, “rgb(0, 0, 255)” για μπλε κλπ.

Παράδειγμα:

.text-decoration-color-example {
  text-decoration-line: underline; /* Ορίζει την υπογράμμιση */
  text-decoration-color: red; /* Ορίζει το χρώμα της υπογράμμισης */
}

<p class="text-decoration-color-example">Αυτό είναι ένα παράδειγμα κειμένου με κόκκινη υπογράμμιση.</p>

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

Η ιδιότητα text-decoration-style χρησιμοποιείται για να ορίσετε το στιλ της γραμμής διακόσμησης του κειμένου. Μπορεί να λάβει μία από τις παρακάτω τιμές:

• solid: Μία συνεχής γραμμή.
• double: Δύο παράλληλες γραμμές.
• dotted: Τελείες που δημιουργούν μια διακεκομμένη γραμμή.
• dashed: Παύλες που δημιουργούν μία παρακείμενη γραμμή.
• wavy: Μία κυματιστή γραμμή.

Παράδειγμα:

.text-decoration-style-example {
  text-decoration-line: underline; /* Εφαρμόζει υπογράμμιση στο κείμενο */
  text-decoration-color: blue; /* Ορίζει το χρώμα της υπογράμμισης ως μπλε */
  text-decoration-style: dotted; /* Ορίζει το στυλ της υπογράμμισης ως διακεκομμένη */
}

<p class="text-decoration-style-example">Αυτό είναι ένα παράδειγμα κειμένου με μπλε διακεκομμένη υπογράμμιση.</p>

Στο παραπάνω παράδειγμα, το κείμενο θα έχει μια μπλε διακεκομμένη γραμμή υπογράμμισης. Μπορείτε να χρησιμοποιήσετε την ιδιότητα text-decoration-style για να ορίσετε το στιλ της γραμμής διακόσμησης του κειμένου, προσαρμόζοντας το στον σχεδιασμό που επιθυμείτε.

Η ιδιότητα text-decoration-thickness χρησιμοποιείται για να ορίσετε το πάχος της γραμμής διακόσμησης του κειμένου. Αυτή η ιδιότητα λαμβάνει μία από τις παρακάτω τιμές:

• auto: Το πάχος της γραμμής διακόσμησης υπολογίζεται αυτόματα από τον φυλλομετρητή.
• Αριθμητική τιμή: Μπορείτε να ορίσετε έναν αριθμό για το πάχος της γραμμής διακόσμησης, όπου μεγαλύτερες τιμές αντιστοιχούν σε πιο παχιές γραμμές.

Παράδειγμα:

.text-decoration-thickness-example {
  text-decoration-line: underline; /* Εφαρμογή υπογράμμισης */
  text-decoration-color: blue; /* Χρώμα υπογράμμισης */
  text-decoration-style: solid; /* Στυλ υπογράμμισης */
  text-decoration-thickness: 2px; /* Πάχος υπογράμμισης */
}

<p class="text-decoration-thickness-example">Αυτό είναι ένα παράδειγμα κειμένου με μπλε υπογράμμιση πάχους 2px.</p>

Στο παραπάνω παράδειγμα, το κείμενο θα έχει μία μπλε γραμμή υπογράμμισης με πάχος 2px. Μπορείτε να προσαρμόσετε την τιμή της ιδιότητας text-decoration-thickness για να ορίσετε το επιθυμητό πάχος της γραμμής διακόσμησης του κειμένου.

[adinserter block=”5″]

Η ιδιότητα text-decoration είναι μία συντόμευση (shorthand) ιδιότητα που συνδυάζει τις παραπάνω ιδιότητες για την καθορισμό της διακόσμησης του κειμένου. Η σύνταξή της είναι η εξής:

text-decoration: line color style thickness;

line: Αυτή η ιδιότητα καθορίζει τον τύπο της γραμμής διακόσμησης που εφαρμόζεται σε ένα κείμενο. Είναι υποχρεωτική και μπορεί να πάρει μία από τις ακόλουθες τιμές: “none” (καμία γραμμή), “underline” (υπογράμμιση), “overline” (υπέργραμμιση), “line-through” (διαγράμμιση) και “blink” (αναβοσβήνουσα γραμμή).

color: Αυτή η ιδιότητα καθορίζει το χρώμα της γραμμής διακόσμησης που εφαρμόζεται σε ένα κείμενο. Είναι προαιρετική και μπορεί να πάρει μία από τις παραπάνω τιμές.

style: Αυτή η ιδιότητα καθορίζει το στυλ της γραμμής διακόσμησης που εφαρμόζεται σε ένα κείμενο. Είναι προαιρετική και μπορεί να πάρει μία από τις ακόλουθες τιμές: “solid” (συμπαγής γραμμή), “dotted” (τελείες), “dashed” (παύλες), “double” (διπλή γραμμή), “groove” (περίγραμμα εγλύφησης), “ridge” (περίγραμμα κορυφής), “inset” (εσοχή), “outset” (έξοδος) και “hidden” (κρυφή).

thickness: Αυτή η ιδιότητα καθορίζει το πάχος της γραμμής διακόσμησης που εφαρμόζεται σε ένα κείμενο. Είναι προαιρετική και μπορεί να πάρει μία αριθμητική τιμή που αναπαριστά το πάχος σε μονάδες μέτρησης.

Παράδειγμα:

.text-decoration-example {
  text-decoration: underline blue dotted 2px; /* Υπογράμμιση με γαλάζια τελείατη γραμμή 2px */
}

<p class="text-decoration-example">Αυτό είναι ένα παράδειγμα κειμένου με μια μπλε υπογράμμιση με το στυλ του γραμμοδιακοσμητή "dotted" και πάχος 2px.</p>

Στο παραπάνω παράδειγμα, το κείμενο θα έχει μια μπλε γραμμή υπογράμμισης με το στυλ “dotted” και πάχος 2px. Μπορείτε να προσαρμόσετε τις τιμές της ιδιότητας text-decoration για να ορίσετε την επιθυμητή διακόσμηση του κειμένου.

Ένας μικρός χρήσιμος συνηθισμένος κανόνας είναι ότι συχνά τα στοιχεία <a> (σύνδεσμοι) στο HTML είναι υπογραμμισμένα από προεπιλογή. Ωστόσο, μπορείτε να χρησιμοποιήσετε την ιδιότητα text-decoration: none; για να αφαιρέσετε το υπογράμμιση από τους συνδέσμους, όπως στο παρακάτω παράδειγμα:

a {
  text-decoration: none;
}

Αυτός ο κανόνας CSS θα αφαιρέσει το υπογράμμιση από όλους τους συνδέσμους στην ιστοσελίδα σας. Μπορείτε να τον προσαρμόσετε για να ταιριάζει στις ανάγκες σας και να εφαρμόσετε το στυλ που επιθυμείτε στους συνδέσμους σας.

Η ιδιότητα text-transform στη CSS χρησιμοποιείται για να εφαρμόσει μετασχηματισμούς στο κείμενο, συμπεριλαμβανομένης της μετατροπής ανάμεσα σε πεζά και κεφαλαία γράμματα.

Μπορείτε να χρησιμοποιήσετε την τιμή “uppercase” για να μετατρέψετε ολόκληρο το κείμενο σε κεφαλαία γράμματα. Αντίθετα, με την τιμή “lowercase” μπορείτε να μετατρέψετε το κείμενο σε πεζά γράμματα. Επιπλέον, με την τιμή “capitalize” μπορείτε να κάνετε κεφαλαίο το πρώτο γράμμα κάθε λέξης.

Παραδείγματα:

/* Μετατροπή όλου του κειμένου σε πεζά γράμματα */
p {
  text-transform: lowercase;
}

/* Μετατροπή όλου του κειμένου σε κεφαλαία γράμματα */
h1 {
  text-transform: uppercase;
}

/* Μετατροπή του πρώτου γράμματος κάθε λέξης σε κεφαλαίο γράμμα */
h2 {
  text-transform: capitalize;
}

Σε αυτά τα παραδείγματα, η ιδιότητα text-transform χρησιμοποιείται για να εφαρμόσει τους αντίστοιχους μετασχηματισμούς στα στοιχεία <p>, <h1> και <h2>. Το lowercase μετατρέπει όλα τα γράμματα σε πεζά, το uppercase μετατρέπει όλα τα γράμματα σε κεφαλαία, και το capitalize κάνει το πρώτο γράμμα κάθε λέξης κεφαλαίο.

Οι επιλογές αυτές σας επιτρέπουν να προσαρμόσετε τη μορφοποίηση του κειμένου σύμφωνα με τις ανάγκες σας.

Η CSS παρέχει διάφορες ιδιότητες για τον έλεγχο του διαστήματος και της διάταξης του κειμένου στα στοιχεία HTML. Ορισμένες από αυτές τις ιδιότητες περιλαμβάνουν:

1. Εσοχή κειμένου (text-indent): Αυτή η ιδιότητα χρησιμοποιείται για να ορίσετε την εσοχή του πρώτου γράμματος μιας παραγράφου. Μπορείτε να καθορίσετε το πλάτος της εσοχής σε μονάδες μέτρησης όπως pixels ή em.
2. Διάστημα γραμμάτων (letter-spacing): Αυτή η ιδιότητα επιτρέπει τον έλεγχο του διαστήματος μεταξύ των γραμμάτων ενός κειμένου. Μπορείτε να ορίσετε το διάστημα σε μονάδες μέτρησης όπως pixels ή em.
3. Ύψος γραμμής (line-height): Αυτή η ιδιότητα καθορίζει το ύψος μιας γραμμής κειμένου. Μπορείτε να ορίσετε το ύψος ως απόσταση από τη βάση μιας γραμμής στην επόμενη, ή ως ποσοστό του πλάτους του στοιχείου που περιέχει το κείμενο.
4. Διάστημα λέξεων (word-spacing): Αυτή η ιδιότητα ρυθμίζει το διάστημα μεταξύ των λέξεων ενός κειμένου. Μπορείτε να ορίσετε το διάστημα μεταξύ των λέξεων σε μονάδες μέτρησης όπως pixels ή em.
5. Λευκός χώρος (white-space): Αυτή η ιδιότητα ελέγχει τον χειρισμό του κενού χώρου μέσα στο κείμενο. Μπορείτε να ορίσετε τη συμπεριφορά του κενού χώρου, όπως αναδίπλωση γραμμής ή παράγραφος, ή την αγνόησή του.

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

Η ιδιότητα text-indent στην CSS χρησιμοποιείται για να ορίσει την εσοχή της πρώτης γραμμής ενός κειμένου.

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

Για παράδειγμα, αν θέλετε να εφαρμόσετε μια εσοχή 20 pixels στην πρώτη γραμμή ενός κειμένου, μπορείτε να χρησιμοποιήσετε τον παρακάτω κανόνα CSS:

.example {
  text-indent: 20px; /* Εφαρμόζει μια εσοχή 20px στην αρχή της γραμμής κειμένου */
}

Αυτός ο κανόνας θα εφαρμοστεί σε ένα στοιχείο HTML με την κλάση “example” και θα δημιουργήσει μια εσοχή 20 pixels στην πρώτη γραμμή του κειμένου που περιέχεται σε αυτό το στοιχείο.

CSS Διάστημα Γραμμάτων
Η ιδιότητα letter-spacing χρησιμοποιείται για να καθορίσει το διάστημα μεταξύ των χαρακτήρων ενός κειμένου.

Το παρακάτω παράδειγμα δείχνει πώς να αυξήσετε ή να μειώσετε το διάστημα μεταξύ των χαρακτήρων:

/* Ορίζει την απόσταση μεταξύ των γραμμάτων στοιχείων <p>.
   Με την τιμή 2px, τα γράμματα θα έχουν μια επιπλέον απόσταση 2 pixel μεταξύ τους. */

p {
  letter-spacing: 2px;
}

/* Ορίζει την απόσταση μεταξύ των γραμμάτων στοιχείων <h1>.
   Με την τιμή -1px, τα γράμματα θα έχουν μια μικρότερη απόσταση 1 pixel μεταξύ τους, 
   δημιουργώντας μια στενότερη εμφάνιση. */

h1 {
  letter-spacing: -1px;
}

Σε αυτό το παράδειγμα, ο ορισμός letter-spacing: 2px; καθορίζει ένα διάστημα 2 pixels μεταξύ των χαρακτήρων στα στοιχεία <p>. Αυτό σημαίνει ότι υπάρχει μια μικρή απόσταση μεταξύ των χαρακτήρων.

Επίσης, ο ορισμός letter-spacing: -1px; στα στοιχεία <h1> δημιουργεί ένα αρνητικό διάστημα -1 pixel μεταξύ των χαρακτήρων. Αυτό συμπιέζει τους χαρακτήρες λίγο και δημιουργεί μια πιο συμπαγή εμφάνιση.

Μπορείτε να προσαρμόσετε την τιμή του διαστήματος γραμμάτων σύμφωνα με τις ανάγκες σας, αντικαθιστώντας το 2px ή το -1px με την επιθυμητή τιμή σε pixels, em ή άλλες μονάδες μέτρησης.

CSS Ύψος Γραμμής
Η ιδιότητα line-height χρησιμοποιείται για να καθορίσει το διάστημα μεταξύ των γραμμών ενός κειμένου:

p {
  line-height: 1.5; /* Ορίζει το ύψος γραμμής των παραγράφων στο 1.5 */
}

h1 {
  line-height: 2; /* Ορίζει το ύψος γραμμής των επικεφαλίδων h1 στο 2 */
}

Σε αυτό το παράδειγμα, ο ορισμός line-height: 1.5; καθορίζει ένα διάστημα 1.5 μεταξύ των γραμμών στα στοιχεία <p>. Αυτό σημαίνει ότι οι γραμμές θα έχουν μια ελαφριά απόσταση μεταξύ τους.

Επίσης, ο ορισμός line-height: 2; στα στοιχεία <h1> καθορίζει ένα διάστημα 2 μεταξύ των γραμμών. Αυτό σημαίνει ότι οι γραμμές θα έχουν μεγαλύτερη απόσταση μεταξύ τους, δημιουργώντας έναν πιο ευρύχωρο χώρο μεταξύ των γραμμών.

Μπορείτε να προσαρμόσετε την τιμή του ύψους γραμμής σύμφωνα με τις ανάγκες σας, αντικαθιστώντας το 1.5 ή το 2 με την επιθυμητή τιμή. Μπορείτε να χρησιμοποιήσετε απολύτως ή σχετικά μεγέθη, όπως pixels, em, rem κλπ.

Η ιδιότητα CSS word-spacing χρησιμοποιείται για να προσδιορίσει το διάστημα μεταξύ των λέξεων σε ένα κείμενο. Αυτή η ιδιότητα επηρεάζει τον απόστασηκατακείμενων λέξεων μέσα σε μια παράγραφο ή ένα κείμενο. Μπορεί να πάρει τιμές σε μονάδες μέτρησης, όπως pixels (px), em ή rem, και μπορεί να είναι θετική ή αρνητική. Μια θετική τιμή αυξάνει το διάστημα μεταξύ των λέξεων, ενώ μια αρνητική τιμή το μειώνει. Με τη χρήση της ιδιότητας word-spacing, μπορείτε να προσαρμόσετε την αισθητική του κειμένου στην ιστοσελίδα σας, δίνοντάς του ένα πιο ανοιχτό ή στενό εμφάνιση, ανάλογα με τις ανάγκες του σχεδιασμού σας.

Το παρακάτω παράδειγμα δείχνει πώς να αυξήσετε ή να μειώσετε το διάστημα μεταξύ των λέξεων:

p {
  /* Ορίζει την απόσταση μεταξύ των λέξεων σε 5px */
  word-spacing: 5px;
}

h1 {
  /* Μειώνει την απόσταση μεταξύ των λέξεων κατά 2px */
  word-spacing: -2px;
}

Σε αυτό το παράδειγμα, ο ορισμός word-spacing: 5px; καθορίζει ένα διάστημα 5 pixels μεταξύ των λέξεων στα στοιχεία <p>. Αυτό σημαίνει ότι υπάρχει μια μικρή απόσταση μεταξύ των λέξεων.

Επίσης, ο ορισμός word-spacing: -2px; στα στοιχεία <h1> δημιουργεί ένα αρνητικό διάστημα -2 pixels μεταξύ των λέξεων. Αυτό συμπιέζει τις λέξεις λίγο και δημιουργεί μια πιο συμπαγή εμφάνιση.

Μπορείτε να προσαρμόσετε την τιμή του διαστήματος λέξεων σύμφωνα με τις ανάγκες σας, αντικαθιστώντας το 5px ή το -2px με την επιθυμητή τιμή σε pixels, em ή άλλες μονάδες μέτρησης.

Η ιδιότητα white-space στο CSS ρυθμίζει τον τρόπο που ο χώρος (κενά, αλλαγές γραμμής, tab) χειρίζεται μέσα σε ένα στοιχείο.

Το παρακάτω παράδειγμα δείχνει πώς να απενεργοποιήσετε την αναδίπλωση κειμένου μέσα σε ένα στοιχείο:

p {
  /* Ορίζει το white-space σε nowrap */
  white-space: nowrap;
}

Σε αυτό το παράδειγμα, ο ορισμός white-space: nowrap; καθορίζει ότι το κείμενο εντός των στοιχείων <p> δεν θα αναδιπλώνεται σε νέες γραμμές αν υπερβαίνει το πλάτος του στοιχείου. Αυτό σημαίνει ότι το κείμενο θα παραμένει οριζόντιο και δεν θα γίνεται αυτόματη αναδίπλωση.

Μπορείτε να προσαρμόσετε την τιμή του λευκού χώρου σύμφωνα με τις ανάγκες σας. Άλλες διαθέσιμες τιμές περιλαμβάνουν το normal (προεπιλογή, επιτρέπει την αναδίπλωση), το pre (διατηρεί τον αρχικό διάταξη και τους κενούς χώρους), το pre-wrap (διατηρεί τον αρχικό διάταξη αλλά επιτρέπει την αναδίπλωση), και το pre-line (επιτρέπει την αναδίπλωση αλλά αγνοεί πολλούς συνεχόμενους κενούς χώρους).

Η ιδιότητα text-shadow στη CSS χρησιμοποιείται για να προσθέσει μια σκιά στο κείμενο.

Στην απλούστερη μορφή χρήσης, καθορίζετε μόνο την οριζόντια σκιά (2px) και την κατακόρυφη σκιά (2px):

h1 {
  /* Προσθέτει μια σκίαση κειμένου με απόσταση 2px οριζόντια και 2px κατακόρυφα */
  text-shadow: 2px 2px;
}

Σε αυτό το παράδειγμα, ο ορισμός text-shadow: 2px 2px; προσθέτει μια σκιά με οριζόντια απόσταση 2 pixels και κατακόρυφη απόσταση 2 pixels στο κείμενο των στοιχείων <h1>. Αυτό δημιουργεί ένα εφέ σκίασης γύρω από το κείμενο.

Μπορείτε επίσης να καθορίσετε το χρώμα της σκιάς και την απόσταση από το κείμενο. Παρακάτω παρέχονται παραδείγματα:

h2 {
  /* Προσθέτει σκιά κειμένου στον τίτλο h2 */
  text-shadow: 3px 3px 5px red;
}

p {
  /* Προσθέτει σκιά κειμένου στην παράγραφο */
  text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.5);
}

Σε αυτά τα παραδείγματα, η οριζόντια απόσταση είναι 3 pixels, η κατακόρυφη απόσταση είναι 3 pixels και η απόσταση σκιάς είναι 5 pixels για το κείμενο των στοιχείων <h2>. Αυτό δημιουργεί μια κόκκινη σκιά γύρω από το κείμενο.

Για το κείμενο των στοιχείων <p>, η οριζόντια απόσταση είναι -1 pixel, η κατακόρυφη απόσταση είναι -1 pixel και η απόσταση σκιάς είναι 1 pixel. Το χρώμα της σκιάς είναι μαύρο με ένα αρκετά διαφανές αποτέλεσμα (0.5) χρησιμοποιώντας το rgba() χρωματικό μοντέλο.

Μπορείτε να προσαρμόσετε τις τιμές της σκιάς σύμφωνα με τις ανάγκες σας, καθορίζοντας τις ανάλογα με το επιθυμητό εφέ και την εμφάνιση.

Στη συνέχεια, προσθέστε ένα εφέ θολώματος (5px) στη σκιά:

h1 {
  /* Προσθέτει σκιά κειμένου με απόσταση στον άξονα x 2px, στον άξονα y 2px και ακτίνα σκιάς 5px */
  text-shadow: 2px 2px 5px;
}

Σε αυτό το παράδειγμα, η οριζόντια απόσταση είναι 2 pixels, η κατακόρυφη απόσταση είναι 2 pixels και η απόσταση θολώματος είναι 5 pixels για το κείμενο των στοιχείων <h1>. Αυτό δημιουργεί μια σκιά με ένα εφέ θολώματος που δίνει μια αίσθηση βάθους στο κείμενο.

Μπορείτε να προσαρμόσετε τις τιμές της σκιάς και του θολώματος σύμφωνα με τις ανάγκες σας, αντικαθιστώντας το 2px 2px 5px με τις επιθυμητές τιμές.