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

  • κανένα - το κείμενο γράφεται χωρίς αλλαγές.
  • κεφαλοποιώ- κάθε λέξη θα ξεκινά με κεφαλαίο χαρακτήρα.
  • πεζά - όλοι οι χαρακτήρες γίνονται πεζοί (πεζά).
  • κεφαλαίο- όλοι οι χαρακτήρες γίνονται κεφαλαίοι (κεφαλαίοι).

Για παράδειγμα, ο ακόλουθος κανόνας καθορίζει ότι η επικεφαλίδα H1 πρέπει να είναι με κεφαλαία γράμματα:

H1 (μετατροπή κειμένου: κεφαλαία;)

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

Διακόσμηση κειμένου: ιδιότητα κειμένου-διακόσμησης

Ιδιοκτησία κείμενο-διακόσμησησας επιτρέπει να ορίσετε το πρόσθετο σχέδιο του κειμένου. Οι τιμές αυτής της ιδιότητας είναι σταθερές κανένα, υπογράμμιση, υπεργράμμιση, γραμμή-μέσωκαι αναβοσβήνω, που σας επιτρέπει να εμφανίζετε κανονικό κείμενο, να σχεδιάζετε μια γραμμή πάνω, κάτω ή μέσα από το κείμενο ή να κάνετε το κείμενο να αναβοσβήνει. Ένα παράδειγμα χρήσης διαφορετικών τιμών αυτής της ιδιότητας φαίνεται στο Σχήμα 11.4.


Ρύζι. 11.4.

Η πιο κοινή εφαρμογή του ακινήτου κείμενο-διακόσμησηείναι να αλλάξετε την προεπιλεγμένη υπογράμμιση συνδέσμου. Για παράδειγμα, ο ακόλουθος κανόνας καθορίζει ότι οι σύνδεσμοι πρέπει να είναι υπογραμμισμένοι:

Α:σύνδεσμος (κείμενο-διακόσμηση: υπογράμμιση;)

Διάστιχο λέξεων: ιδιότητα διαχωρισμού λέξεων

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

Έτσι, ο ακόλουθος κανόνας αυξάνει την απόσταση μεταξύ των λέξεων στην επικεφαλίδα H1 κατά 1em:

H1 (διάστημα λέξεων: 1em;)

Στοίχιση κειμένου: η ιδιότητα στοίχισης κειμένου

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

Ο ακόλουθος κανόνας ορίζει την κεντρική στοίχιση όλων των στοιχείων που περιέχονται σε ένα στοιχείο DIV:

DIV (στοίχιση κειμένου: κέντρο;)

Κορυφαία: η ιδιότητα line-height

Προπορευόμενη είναι η απόσταση μεταξύ των γραμμών βάσης των γραμμών σε κοντινή απόσταση. Υπό κανονικές συνθήκες, η απόσταση μεταξύ των γραμμών εξαρτάται από τον τύπο και το μέγεθος της γραμματοσειράς και καθορίζεται αυτόματα από το πρόγραμμα περιήγησης. Αλλά αυτή η τιμή μπορεί να αλλάξει χρησιμοποιώντας την ιδιότητα line-height. Η προεπιλεγμένη τιμή του κανονικού αναγκάζει το πρόγραμμα περιήγησης να υπολογίζει αυτόματα την απόσταση μεταξύ των γραμμών. Οποιοσδήποτε αριθμός μεγαλύτερος από το μηδέν λαμβάνεται ως πολλαπλασιαστής του μεγέθους γραμματοσειράς του τρέχοντος κειμένου. Είναι επίσης δυνατό να χρησιμοποιηθούν οποιεσδήποτε μονάδες μήκους είναι αποδεκτές στο CSS ως τιμές για αυτήν την ιδιότητα. Επιτρέπεται επίσης η χρήση συμβολισμού ποσοστού, οπότε το ύψος της γραμματοσειράς λαμβάνεται ως 100%. Δεν επιτρέπεται η αρνητική απόσταση μεταξύ των γραμμών.

Διάστημα γραμμάτων: η ιδιότητα διάστασης γραμμάτων

Το πρόγραμμα περιήγησης επιλέγει αυτόματα την απόσταση χαρακτήρων με βάση το μέγεθος και τον τύπο της γραμματοσειράς. Σε ορισμένες περιπτώσεις, είναι απαραίτητο να διορθωθεί η απόσταση μεταξύ των γραμμάτων. Η ιδιότητα διαστήματος γραμμάτων χρησιμοποιείται για τον έλεγχο της απόστασης γραμμάτων. Οποιεσδήποτε μονάδες μήκους CSS μπορούν να χρησιμοποιηθούν ως τιμές για αυτήν την ιδιότητα, αλλά συνιστάται η χρήση σχετικών μονάδων με βάση το μέγεθος γραμματοσειράς (em και ex). Διαφορετικός διάστιχο, η ιδιότητα διάστιχο επιτρέπει μια αρνητική τιμή, αλλά σε αυτήν την περίπτωση πρέπει να βεβαιωθείτε ότι διατηρείται η αναγνωσιμότητα του κειμένου.

Ο ακόλουθος κανόνας αυξάνει την απόσταση μεταξύ των χαρακτήρων στην κεφαλίδα H1 κατά 0,5 εκ.

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

Η βασική μονάδα κειμένου είναι ένας χαρακτήρας. Ωστόσο, δεδομένου ότι τα συστήματα γραφής δεν είναι πάντα τόσο απλά όσο το βασικό αγγλικό αλφάβητο, το τι είναι στην πραγματικότητα ένας χαρακτήρας εξαρτάται από το πλαίσιο στο οποίο χρησιμοποιείται ο όρος. Για παράδειγμα, στο κορεατικό σύστημα γραφής, κάθε τετράγωνη αναπαράσταση μιας συλλαβής (π.χ. 한 = han) μπορεί να θεωρηθεί χαρακτήρας. Ωστόσο, το τετράγωνο σύμβολο αποτελείται πράγματι από πολλά γράμματα, καθένα από τα οποία αντιπροσωπεύει ένα φώνημα (π.χ. ㅎ = h, ㅏ = a, ㄴ = n), και καθένα από αυτά μπορεί επίσης να θεωρηθεί σύμβολο.

1. Μετασχηματισμός κειμένου: ιδιότητα μετασχηματισμού κειμένου

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

Το ακίνητο είναι κληρονομικό.

Σύνταξη

text-transform: κανένας; text-transform: κεφαλαία; μετατροπή κειμένου: κεφαλαία; text-transform: πεζά; text-transform: inherit; text-transform: αρχικό;

2. Χειρισμός διαστημάτων και σπασίματος γραμμών: η ιδιότητα λευκού διαστήματος

Η ιδιότητα λευκού διαστήματος χειρίζεται τα κενά μεταξύ των λέξεων και τις αλλαγές γραμμής μέσα σε ένα στοιχείο.

Το ακίνητο είναι κληρονομικό.

λευκό χώρο
Αξίες:
κανονικός Προεπιλεγμένη τιμή. Μόνο ένα κενό εισάγεται μεταξύ των λέξεων, τα πρόσθετα κενά απορρίπτονται. Το κείμενο αναδιπλώνεται μόνο όταν χρειάζεται.
nowrap Απενεργοποιεί τις αλλαγές γραμμής εκτός εάν εφαρμόζεται
.
προ Τα κενά στο κείμενο δεν αγνοούνται, το πρόγραμμα περιήγησης εμφανίζει επιπλέον κενά και αλλαγές γραμμής.
προ-τύλιγμα Διατηρεί το κενό διάστημα στο κείμενο κάνοντας αλλαγές γραμμής όπου χρειάζεται.
προ-γραμμή Αφαιρεί επιπλέον χώρους, εκτός από τις περιπτώσεις
.
διαλείμματα Η συμπεριφορά είναι πανομοιότυπη με το pre-wrap , με τη διαφορά ότι: οποιαδήποτε ακολουθία μη αφαιρούμενων χώρων καταλαμβάνει πάντα χώρο, ακόμη και στο τέλος μιας γραμμής. η δυνατότητα αλλαγής γραμμής υπάρχει μετά από κάθε μη αφαιρούμενο χώρο, συμπεριλαμβανομένων των διαστημάτων.
αρχικός
κληρονομώ

Σύνταξη

Λευκό διάστημα: κανονικό; λευκό διάστημα: nowrap; κενό διάστημα: προ; λευκό διάστημα: προ-τύλιγμα? λευκό διάστημα: προ-γραμμή; white-space: break-space? κενό διάστημα: κληρονομούν; κενό διάστημα: αρχικό;

3. Ρύθμιση καρτέλας: ιδιότητα μεγέθους καρτέλας

Η ιδιότητα tab-size χρησιμοποιείται για την αλλαγή του όγκου της εσοχής που λαμβάνεται με το κλειδί TAB. Οι τιμές των ιδιοτήτων αγνοούνται όταν έχει οριστεί μία από τις τρεις τιμές ιδιοτήτων προγραμμής, κανονικής ή nowrap λευκού διαστήματος.

Λειτουργεί μόνο για στοιχεία '); }); } } }); })(jQuery);

Αποθηκεύσετε
Γράψτε CSS OR LESS και πατήστε αποθήκευση. CTRL + SPACE για αυτόματη συμπλήρωση.