Οδηγός για τη μορφοποίηση κειμένου σε CSS

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

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

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

 

Χρώμα γραμματοσειράς

Παράμετρος: Μια τιμή χρώματος, η οποία μπορεί να είναι ένα όνομα χρώματος(π.χ., red), δεκαεξαδικός κώδικας(π.χ. "#FF0000"), τιμή RGB(π.χ. "rgb(255, 0, 0)") ή τιμή RGBA(π.χ., "rgba(255, 0, 0, 0.5)").

p {  
  color: blue;  
}  

 

Μέγεθος γραμματοσειράς

Παράμετρος: Μια τιμή μεγέθους, η οποία μπορεί να είναι σε pixel(π.χ. "16px"), μονάδες em(π.χ. "1em"), μονάδες rem(π.χ. "1.2rem"), μονάδες πλάτους θύρας προβολής(π.χ. "10vw"), μονάδες ύψους θυρίδας προβολής(π.χ. "5vh") ή άλλες μονάδες.

h1 {  
  font-size: 24px;  
}  

 

Οικογένεια γραμματοσειρών

Παράμετρος: Μια λίστα οικογένειας γραμματοσειρών, που καθορίζεται με την προτιμώμενη σειρά. Μπορείτε να καθορίσετε το όνομα της γραμματοσειράς(π.χ., Arial) ή να περικλείσετε ονόματα γραμματοσειρών που περιέχουν ειδικούς χαρακτήρες σε διπλά εισαγωγικά(π.χ., " Times New Roman).

body {  
  font-family: Arial, sans-serif;  
}  

 

Βάρος και στυλ γραμματοσειράς

Παράμετρος font-weight: normal(default), bold, bolder, lighter, ή αριθμητικές τιμές από 100 έως 900.

Παράμετρος font-style: normal(default), italic.

em {  
  font-style: italic;  
}  
  
strong {  
  font-weight: bold;  
}  

 

Διακόσμηση κειμένου

Παράμετρος: "none"(default), "underline", "overline", "line-through"  ή συνδυασμός τιμών που χωρίζονται με κενά.

a {  
  text-decoration: underline;  
}  
  
del {  
  text-decoration: line-through;  
}  

 

Ευθυγράμμιση κειμένου

Παράμετρος: "left"(default), "right", "center" or "justify".

p {  
  text-align: center;  
}  

 

Ύψος γραμμής και περιθώρια

Παράμετρος γραμμή-ύψος: Μια αριθμητική τιμή ή ένα ποσοστό του τρέχοντος μεγέθους γραμματοσειράς.

Περιθώριο παραμέτρου: Μια τιμή μέτρησης, όπως pixels(px), em units(em), rem units(rem) κ.λπ.

p {  
  line-height: 1.5;  
  margin-bottom: 10px;  
}  

 

Διάταξη κειμένου πολλών στηλών

Παράμετρος: Ένας θετικός ακέραιος ή "auto"(default).

.container {  
  column-count: 2;  
}  

 

Αλλαγή χρώματος κειμένου στο Hover

Δεν υπάρχει συγκεκριμένη παράμετρος, χρησιμοποιήστε μόνο την ψευδο-κλάση :hover.

a:hover {  
  color: red;  
}  

 

Αλλαγή χρώματος κειμένου στην κατάσταση(ενεργό, επίσκεψη)

Δεν υπάρχει συγκεκριμένη παράμετρος, χρησιμοποιήστε μόνο τις ψευδο-κλάσεις :active  και :visited.

a:visited {  
  color: purple;  
}  

 

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