Συνήθως, ο δημιουργός του ιστότοπου αποφασίζει ποια γράμματα θα είναι κεφαλαία και ποια πεζά, με βάση τους ορθογραφικούς κανόνες και τις δικές του προτιμήσεις. Ωστόσο, η διαδικασία αλλαγής πεζών-κεφαλαίων χαρακτήρων μπορεί να αυτοματοποιηθεί χρησιμοποιώντας την ιδιότητα κείμενο-μετασχηματισμός. Αυτή η ιδιότητα μπορεί να λάβει τέσσερις τιμές:
- κανένα - το κείμενο γράφεται χωρίς αλλαγές.
- κεφαλοποιώ- κάθε λέξη θα ξεκινά με κεφαλαίο χαρακτήρα.
- πεζά - όλοι οι χαρακτήρες γίνονται πεζοί (πεζά).
- κεφαλαίο- όλοι οι χαρακτήρες γίνονται κεφαλαίοι (κεφαλαίοι).
Για παράδειγμα, ο ακόλουθος κανόνας καθορίζει ότι η επικεφαλίδα 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 λευκού διαστήματος.
Λειτουργεί μόνο για στοιχεία
Το ακίνητο είναι κληρονομικό.
Σύνταξη
μέγεθος καρτέλας: 0; μέγεθος καρτέλας: 10 px; tab-size: inherit; μέγεθος καρτέλας: αρχικό;
4. Διάλειμμα γραμμής και όρια λέξεων
Όταν το περιεχόμενο ενσωματωμένου επιπέδου χωρίζεται σε γραμμές, χωρίζεται σε ενσωματωμένα πλαίσια. Μια τέτοια διάσπαση ονομάζεται αλλαγή γραμμής.
Όταν μια γραμμή διακόπτεται λόγω ρητών στοιχείων ελέγχου αλλαγής γραμμής, όπως μια νέα γραμμή ή μια ετικέτα
, η αρχή ή το τέλος του μπλοκ είναι μια αναγκαστική αλλαγή γραμμής.
Εάν η γραμμή διακοπεί λόγω αναδίπλωσης περιεχομένου όταν το πρόγραμμα περιήγησης δημιουργεί προαιρετικές αλλαγές γραμμής για να ταιριάζει στο περιεχόμενο, πρόκειται για μια μαλακή αναδίπλωση.
4.1. Παραβίαση κανόνων για γράμματα: ιδιότητα διάσπασης λέξεων
Η ιδιότητα διάσπασης λέξεων ορίζει τη δυνατότητα μαλακής περιτύλιξης μεταξύ των γραμμάτων, π.χ. όταν είναι αποδεκτό να σπάσουν γραμμές κειμένου. Συγκεκριμένα, ελέγχει εάν υπάρχει μαλακή αναδίπλωση μεταξύ παρακείμενων τυπογραφικών χαρακτήρων ή/και ψηφίων. Αυτό δεν επηρεάζει τους κανόνες που διέπουν τον μαλακό παύλα που δημιουργείται από τα κενά.
Το ακίνητο είναι κληρονομικό.
Σύνταξη
Διάλειμμα λέξεων: κανονικό; λέξη-διάλειμμα: σπάω όλα; διάλειμμα λέξεων: κρατώ όλα; διάλειμμα λέξεων: κληρονομώ; διάλειμμα λέξης: αρχικό;
4.2. Διάλειμμα γραμμής: διάλειμμα γραμμής
Η ιδιότητα αλλαγής γραμμής ορίζει τους κανόνες αλλαγής γραμμής που εφαρμόζονται σε ένα στοιχείο, συγκεκριμένα πώς η αλλαγή γραμμής αλληλεπιδρά με σημεία στίξης και σύμβολα.
Το ακίνητο είναι κληρονομικό.
διακοπή της γραμμής | |
---|---|
Αξίες: | |
αυτο | Το πρόγραμμα περιήγησης ορίζει ένα σύνολο περιορισμών αλλαγής γραμμής προς χρήση, οι οποίοι μπορεί να ποικίλλουν ανάλογα με το μήκος της γραμμής, όπως η χρήση ενός λιγότερο περιοριστικού συνόλου κανόνων αλλαγής γραμμής για σύντομες γραμμές. Προεπιλεγμένη τιμή. |
Χαλαρά | Διασπά το κείμενο χρησιμοποιώντας το λιγότερο περιοριστικό σύνολο κανόνων αλλαγής γραμμής. Συνήθως χρησιμοποιείται για σύντομες γραμμές, όπως σε εφημερίδες. |
κανονικός | Διασπά το κείμενο χρησιμοποιώντας το πιο κοινό σύνολο κανόνων αλλαγής γραμμής. |
αυστηρός | Διακόπτει το κείμενο χρησιμοποιώντας ένα αυστηρό σύνολο κανόνων αλλαγής γραμμής. |
αρχικός | Ορίζει την τιμή μιας ιδιότητας στην προεπιλεγμένη τιμή της. |
κληρονομώ | Κληρονομεί την αξία του ακινήτου από γονικό στοιχείο. |
Σύνταξη
line-break: auto; line-break: χαλαρό; διάλειμμα γραμμής: κανονικό; διάλειμμα γραμμής: αυστηρό; line-break: inherit; line-break: αρχικό;
4.3. Συλλαβισμός: η ιδιότητα των παύλων
Η ιδιότητα παύλες καθορίζει εάν επιτρέπεται ο συλλαβισμός να δημιουργήσει μαλακό παύλα μέσα σε μια γραμμή κειμένου.
Ο συλλαβισμός είναι μια ελεγχόμενη διάσπαση λέξεων, στην οποία συνήθως δεν επιτρέπεται να σπάσουν για να βελτιωθεί η διάταξη των παραγράφων. Συνήθως, ο διαχωρισμός των λέξεων συμβαίνει κατά μήκος συλλαβικών ή μορφικών ορίων και όταν ο διαχωρισμός υποδεικνύεται οπτικά (συνήθως με την εισαγωγή μιας παύλας, -). Σε ορισμένες περιπτώσεις, ο συλλαβισμός μπορεί επίσης να αλλάξει την ορθογραφία μιας λέξης. Σε κάθε περίπτωση, η αναδίπλωση λέξεων είναι μόνο ένα εφέ απόδοσης: δεν πρέπει να επηρεάζει το περιεχόμενο του εγγράφου, την επιλογή κειμένου ή την αναζήτηση.
Το CSS Text Level 3 δεν ορίζει ακριβείς κανόνες συλλαβισμού, επομένως συνιστάται να επιλέξετε τα κατάλληλα ενωτικά για τη γλώσσα.
Το ακίνητο είναι κληρονομικό.
παύλες | |
---|---|
Αξίες: | |
κανένας | Οι λέξεις δεν έχουν παύλα, ακόμα κι αν οι χαρακτήρες μέσα στη λέξη ορίζουν ρητά τον παύλα. |
εγχειρίδιο | Οι λέξεις είναι τυλιγμένες μόνο σε εκείνα τα σημεία όπου υπάρχουν σύμβολα μέσα στη λέξη που υποδηλώνουν ξεκάθαρα τη δυνατότητα αναδίπλωσης λέξης ( ΕΙΔΙΚΟΣ ΧΑΡΑΚΤΗΡΑΣ-). Προεπιλεγμένη τιμή. |
αυτο | Οι λέξεις μπορούν να αναλυθούν σε δυνατότητες συλλαβισμού που καθορίζονται αυτόματα από τον πόρο συλλαβισμού που είναι κατάλληλος για τη γλώσσα, επιπλέον αυτών που υποδεικνύονται ρητά από την παύλα υπό όρους. Πρέπει να ορίσετε τη γλώσσα του περιεχομένου σας (για παράδειγμα, χρησιμοποιώντας το χαρακτηριστικό HTML lang ή την κεφαλίδα περιεχομένου-γλώσσα HTTP) για να λάβετε τη σωστή αναδίπλωση λέξεων. |
αρχικός | Ορίζει την τιμή μιας ιδιότητας στην προεπιλεγμένη τιμή της. |
κληρονομώ | Κληρονομεί την τιμή της ιδιότητας από το γονικό στοιχείο. |
Σύνταξη
Ενωτικά: κανένα; παύλες: χειροκίνητο; παύλες: auto; παύλες: κληρονομούν; παύλες: αρχικό;
4.4. Υπερχείλιση μπλοκ αναδίπλωσης: ιδιότητα υπερχείλισης-αναδίπλωσης/αναδίπλωσης λέξης
Η ιδιότητα υπερχείλισης-αναδίπλωσης (ή το καταργημένο όνομα αναδίπλωσης λέξης) καθορίζει εάν μια γραμμή που δεν διακόπτεται μπορεί να σπάσει σε μη επιλυμένα σημεία για να αποτρέψει την υπερχείλιση ενός πλαισίου γραμμής. Λειτουργεί όταν η ιδιότητα white space επιτρέπει την αναδίπλωση.
Το ακίνητο είναι κληρονομικό.
υπερχείλιση-αναδίπλωση, λέξη-αναδίπλωση | |
---|---|
Αξίες: | |
κανονικός | Οι μη σπασμένες γραμμές μπορούν να σπάσουν μόνο σε επιτρεπόμενα σημεία διακοπής. Προεπιλεγμένη τιμή. |
διακοπή λέξης | |
οπουδήποτε | Μια μη διακεκομμένη ακολουθία χαρακτήρων μπορεί να σπάσει σε ένα αυθαίρετο σημείο εάν δεν υπάρχουν άλλα αποδεκτά σημεία διακοπής στη συμβολοσειρά. Επηρεάζει μόνο την οπτική οθόνη, χωρίς να επηρεάζει το κείμενο προέλευσης. Δεν προστίθεται παύλα στο σημείο διακοπής γραμμής. Οι δυνατότητες μαλακής περιτύλιξης που υπάρχουν οπουδήποτε λαμβάνονται υπόψη κατά τον υπολογισμό των εγγενών ελάχιστων μεγεθών περιεχομένου. |
αρχικός | Ορίζει την τιμή μιας ιδιότητας στην προεπιλεγμένη τιμή της. |
κληρονομώ | Κληρονομεί την τιμή της ιδιότητας από το γονικό στοιχείο. |
Σύνταξη
υπερχείλιση-περιτύλιγμα: κανονικό; υπερχείλιση-αναδίπλωση: break-word? υπερχείλιση-περιτύλιγμα: οπουδήποτε? υπερχείλιση-περιτύλιγμα: κληρονομώ; υπερχείλιση-περιτύλιγμα: αρχική;
5. Ευθυγράμμιση γραμμής και αιτιολόγηση
Η στοίχιση και η αιτιολόγηση γραμμής ελέγχει τον τρόπο κατανομής του ενσωματωμένου περιεχομένου σε ένα ενσωματωμένο πλαίσιο.
5.1. Συντομογραφία για τη στοίχιση κειμένου: η ιδιότητα στοίχισης κειμένου
Ένα μπλοκ κειμένου είναι ένα σύνολο ενσωματωμένων μπλοκ. Η ιδιότητα text-align καθορίζει τις ιδιότητες text-align-all και text-align-last και περιγράφει τον τρόπο με τον οποίο τα πλαίσια σε επίπεδο γραμμής σε κάθε ενσωματωμένο πλαίσιο ευθυγραμμίζονται με τις πλευρές έναρξης και τέλους του ενσωματωμένου πλαισίου. Οι τιμές άλλες από το justify-all ή το match-parent εκχωρούνται στο text-align-all και επαναφέρονται στο text-align-last αυτόματα.
Το ακίνητο είναι κληρονομικό.
στοίχιση κειμένου | |
---|---|
Αξίες: | |
αρχή | Το περιεχόμενο σε επίπεδο γραμμής ευθυγραμμίζεται με το μπροστινό άκρο του ενσωματωμένου πλαισίου. Προεπιλεγμένη τιμή. |
τέλος | Το περιεχόμενο σε επίπεδο γραμμής ευθυγραμμίζεται στην ακραία άκρη του ενσωματωμένου πλαισίου. |
αριστερά | Το περιεχόμενο σε επίπεδο γραμμής στοιχίζεται στο αριστερό άκρο της γραμμής του πλαισίου γραμμής. Σε συστήματα κατακόρυφης γραφής, αυτό θα είναι το φυσικό πάνω ή κάτω μέρος, ανάλογα με τον προσανατολισμό του κειμένου. |
σωστά | Το περιεχόμενο σε επίπεδο γραμμής στοιχίζεται στη δεξιά άκρη της γραμμής του πλαισίου γραμμής. Σε συστήματα κατακόρυφης γραφής, αυτό θα είναι το φυσικό πάνω ή κάτω μέρος, ανάλογα με τον προσανατολισμό του κειμένου. |
κέντρο | Το περιεχόμενο σε επίπεδο γραμμής βρίσκεται στο κέντρο εντός του ενσωματωμένου πλαισίου. |
δικαιολογώ | Το κείμενο δικαιολογείται στο πλάτος του ενσωματωμένου πλαισίου για να γεμίσει ακριβώς το πλαίσιο γραμμής, φωλιασμένο στην αριστερή και τη δεξιά άκρη του γονικού στοιχείου. Εκτός εάν ορίζεται διαφορετικά στο text-align-last , η τελευταία γραμμή πριν από μια αναγκαστική διακοπή ή το τέλος ενός μπλοκ είναι στοιχισμένη με την αρχή. Τα κενά μεταξύ λέξεων και γραμμάτων κατανέμονται με τέτοιο τρόπο ώστε το μήκος όλων των γραμμών να είναι ίσο. Διαφορετικά προγράμματα περιήγησηςμπορεί να αυξήσει τόσο την εσοχή μεταξύ των λέξεων όσο και την απόσταση μεταξύ των γραμμάτων. |
δικαιολογώ-όλα | Ορίζει το text-align-all και text-align-last για να δικαιολογήσει , ευθυγραμμίζοντας επίσης την τελευταία γραμμή. |
ταίριασμα γονέα | Η τιμή συμπεριφέρεται το ίδιο με το inherit, εκτός από το ότι η κληρονομούμενη τιμή έναρξης ή τέλους ερμηνεύεται σε σχέση με την τιμή κατεύθυνσης (ή το αρχικό μπλοκ που περιέχει αν δεν υπάρχει γονέας) και καταλήγει σε μια υπολογισμένη αριστερή ή δεξιά τιμή. |
κληρονομώ | Κληρονομεί την τιμή της ιδιότητας από το γονικό στοιχείο. |
Σύνταξη
text-align: start; text-align: end; text-align: αριστερά; text-align: δεξιά; text-align: κέντρο; text-align: δικαιολογώ; text-align: justify-all; text-align: match-parent; text-align: inherit;
5.2. Προεπιλεγμένη στοίχιση κειμένου: ιδιότητα text-align-all
Η ιδιότητα text-align-all, συντομογραφία για την ιδιότητα text-align, καθορίζει τη στοίχιση όλων των γραμμών περιεχομένου σε ένα κοντέινερ μπλοκ, εκτός από τις τελευταίες γραμμές που αντικαθίστανται από το text-align-last . Αποδέχεται τις τιμές start , end , left , right , center , justify και match-parent .
Το ακίνητο είναι κληρονομικό.
Σύνταξη
Text-align-all: start; text-align-all:end; text-align-all: αριστερά; text-align-all: right; text-align-all: κέντρο; text-align-all: justify; text-align-all: match-parent; text-align-all: inherit;
5.3. Στοίχιση τελευταίας γραμμής: ιδιότητα text-align-last
Η ιδιότητα text-align-last περιγράφει πώς η τελευταία γραμμή ενός μπλοκ ή γραμμής ευθυγραμμίζεται ακριβώς πριν από μια αναγκαστική αλλαγή γραμμής.
Εάν οριστεί σε αυτόματη , το περιεχόμενο στην αντίστοιχη γραμμή στοιχίζεται με το text-align-all , εκτός εάν το text-align-all έχει οριστεί να δικαιολογεί, οπότε στοιχίζεται στην αρχή του μπλοκ. Όλες οι άλλες τιμές ερμηνεύονται όπως περιγράφεται για τη στοίχιση κειμένου .
Αποδέχεται τις τιμές auto , start , end , left , right , center , justify και match-parent .
Το ακίνητο είναι κληρονομικό.
Σύνταξη
Text-align-last: auto; text-align-last: start; text-align-last: end; text-align-last: αριστερά; text-align-last: δεξιά; text-align-last: κέντρο; text-align-last: δικαιολογώ; text-align-last: match-parent;
6. Κενά
Το CSS σάς επιτρέπει να ελέγχετε την απόσταση μεταξύ των λέξεων και των τυπογραφικών χαρακτήρων με τις ιδιότητες διαστήματος λέξεων και γραμμάτων.
6.1. Διάστημα μεταξύ λέξεων: η ιδιότητα διάστασης λέξεων
Η ιδιότητα διαστήματος λέξεων ορίζει πρόσθετο διάστημα μεταξύ των λέξεων.
Ορίζει την απόσταση μεταξύ των λέξεων. Μπορείτε να χρησιμοποιήσετε θετικές και αρνητικές τιμές. Εάν το νόημα είναι αρνητικό, οι λέξεις μπορεί να αλληλοεπικαλύπτονται.
Η τιμή του διαστήματος λέξεων επηρεάζεται από την τιμή της ιδιότητας στοίχισης κειμένου στην περίπτωση αιτιολογημένου κειμένου.
Το ακίνητο είναι κληρονομικό.
Σύνταξη
Διάστιχο: κανονικό; Διάστιχο λέξεων: 1 px Διάστιχο λέξεων: 0,2 εκ διάστιχο λέξεων: 50% διάστιχο λέξεων: κληρονομώ; διάστιχο λέξεων: αρχικό;
6.2. Παρακολούθηση: ιδιότητα απόστασης γραμμάτων
Η ιδιότητα διάστιχο γραμμάτων καθορίζει πρόσθετο διάστημα ή παρακολούθηση μεταξύ παρακείμενων τυπογραφικών χαρακτήρων. Η απόσταση μεταξύ των γραμμάτων είναι επιπλέον και η απόσταση μεταξύ των λέξεων . Ανάλογα με τους ισχύοντες κανόνες στοίχισης, οι πράκτορες χρήστη μπορούν να αυξήσουν ή να μειώσουν περαιτέρω το διάστημα μεταξύ των μονάδων τυπογραφικών χαρακτήρων για να ευθυγραμμίσουν το κείμενο.
Το ακίνητο είναι κληρονομικό.
Σύνταξη
Διάστιχο γραμμάτων: κανονικό; Διάστιχο γραμμάτων: 0,1 εκ Διάστιχο γραμμάτων: 2 px διάστιχο: κληρονομούν; διάστιχο: αρχικό;
7. Εσοχή πρώτης γραμμής: ιδιότητα κειμένου-εσοχή
Η ιδιότητα text-indent καθορίζει την εσοχή που εφαρμόζεται σε γραμμές ενσωματωμένου περιεχομένου σε ένα μπλοκ. Η επένδυση αντιμετωπίζεται ως περιθώριο που εφαρμόζεται στην αρχική άκρη του ενσωματωμένου κουτιού.
Εάν υπάρχει μια εικόνα στην πρώτη γραμμή του στοιχείου μπλοκ, τότε θα μετακινηθεί μαζί με το υπόλοιπο κείμενο.
Το ακίνητο είναι κληρονομικό.
Σύνταξη
Εσοχή κειμένου: 5mm; κείμενο-εσοχή: 20 px; εσοχή κειμένου: 5% κείμενο-εσοχή: 2em κάθε γραμμή. κείμενο-εσοχή: 2em κρέμονται; κείμενο-εσοχή: κληρονομούν; κείμενο-εσοχή: αρχική;
Ορίζει τη στοίχιση της τελευταίας γραμμής ενός μπλοκ κειμένου.
σύντομες πληροφορίες
Σημειογραφία
Περιγραφή | Παράδειγμα | |
---|---|---|
<тип> | Καθορίζει τον τύπο της τιμής. | <размер> |
A&&B | Οι τιμές πρέπει να εξάγονται με την καθορισμένη σειρά. | <размер> && <цвет> |
A | σι | Υποδεικνύει ότι πρέπει να επιλεγεί μόνο μία από τις προτεινόμενες τιμές (A ή B). | κανονικό | μικρά καπάκια |
Α || σι | Κάθε τιμή μπορεί να χρησιμοποιηθεί μόνη της ή σε συνδυασμό με άλλες με οποιαδήποτε σειρά. | πλάτος || μετρώ |
Ομαδικές αξίες. | [ καλλιέργεια || σταυρός] | |
* | Επαναλάβετε μηδέν ή περισσότερες φορές. | [,<время>]* |
+ | Επαναλάβετε μία ή περισσότερες φορές. | <число>+ |
? | Ο καθορισμένος τύπος, λέξη ή ομάδα είναι προαιρετική. | ένθεση? |
(Α, Β) | Επαναλάβετε τουλάχιστον Α, αλλά όχι περισσότερες από Β φορές. | <радиус>{1,4} |
# | Επαναλάβετε μία ή περισσότερες φορές χωρισμένες με κόμμα. | <время># |
Αξίες
auto Ταιριάζει με τη στοίχιση που καθορίζεται από την ιδιότητα text-align, εκτός από την τιμή justify . Για αυτό, η ευθυγράμμιση θα είναι σαν την αρχή . start Η γραμμή είναι ευθυγραμμισμένη στην αρχική άκρη του μπλοκ, η οποία μπορεί να αλλάξει ανάλογα με την κατεύθυνση του κειμένου (από αριστερά προς τα δεξιά ή από δεξιά προς τα αριστερά). τέλος Η γραμμή ευθυγραμμίζεται με την ακραία άκρη του μπλοκ, η οποία καθορίζεται από την κατεύθυνση του κειμένου. αριστερά Η συμβολοσειρά είναι αριστερή στοίχιση. δεξιά Η συμβολοσειρά είναι στοιχισμένη δεξιά. κέντρο Η συμβολοσειρά είναι κεντραρισμένη. justify Η συμβολοσειρά δικαιολογείται σε πλάτος. Εάν υπάρχει μόνο μία λέξη στην τελευταία γραμμή, τότε θα είναι αριστερή στοίχιση.
Επιρροή διαφορετικές αξίεςη θέση του κειμένου φαίνεται στον Πίνακα. ένας.
Εννοια | ευθυγραμμία | Τύπος κειμένου |
---|---|---|
αριστερά | Αριστερά | |
σωστά | σωστά | |
κέντρο | Κέντρο | |
δικαιολογώ | Κατά πλάτος |
Sandbox
Ο Γουίνι το Αρκουδάκι δεν ήταν πάντα αντίθετος με ένα μικρό αναψυκτικό, ειδικά στις έντεκα το πρωί, γιατί εκείνη την ώρα το πρωινό είχε τελειώσει εδώ και καιρό και το δείπνο δεν είχε καν σκεφτεί να ξεκινήσει. Και, φυσικά, χάρηκε τρομερά που είδε ότι το Κουνέλι έβγαλε φλιτζάνια και πιάτα.
div (text-align-last: start ;)
Παράδειγμα
Μοντέλο αντικειμένου
Ενα αντικείμενο.style.textAlignLast
Σημείωση
Internet Explorerκαι Edge δεν υποστηρίζουν τις τιμές έναρξης και τέλους.
Ο Firefox πριν από την έκδοση 49 υποστηρίζει την ιδιότητα -moz-text-align-last.
Προσδιορισμός
Κάθε προδιαγραφή περνά από διάφορα στάδια έγκρισης.
- Σύσταση (Σύσταση) - η προδιαγραφή έχει εγκριθεί από το W3C και συνιστάται ως πρότυπο.
- Σύσταση υποψηφίου ( Πιθανή σύσταση) - η ομάδα που είναι υπεύθυνη για το πρότυπο είναι ικανοποιημένη που εκπληρώνει τους στόχους της, αλλά απαιτείται η υποστήριξη της κοινότητας ανάπτυξης για την εφαρμογή του προτύπου.
- Προτεινόμενη σύσταση ( Προτεινόμενη σύσταση) - σε αυτό το στάδιο, το έγγραφο υποβάλλεται στη Συμβουλευτική Επιτροπή του W3C για τελική έγκριση.
- Σχέδιο εργασίας - Μια πιο ώριμη έκδοση του σχεδίου μετά από συζήτηση και τροπολογίες για κοινοτική αναθεώρηση.
- προσχέδιο του συντάκτη ( Εκδοτικό προσχέδιο) είναι μια πρόχειρη έκδοση του προτύπου μετά την πραγματοποίηση αλλαγών από τους συντάκτες του έργου.
- προσχέδιο ( Προσχέδιο προδιαγραφών) είναι η πρώτη πρόχειρη έκδοση του προτύπου.
Ετικέτες HTML που ορίζουν τη στοίχιση κειμένου, την εσοχή
Αιτιολογημένο κείμενο που χρησιμοποιείται στην τυπογραφία
Το παρακάτω παράδειγμα δείχνει τον τρόπο ευθυγράμμισης κείμενο σε πλάτοςσελίδες:
align = "αριστερά" | στοίχιση "δεξιά" |
---|---|
Καθημερινά ο αριθμός των εργαζομένων που απασχολούνται στον τομέα των υπηρεσιών και στη διάδοση πληροφοριών αυξάνεται. Αν τα σύμβολα των περασμένων αιώνων ήταν το αγρόκτημα και το εργοστάσιο, τότε το σύμβολο του σημερινού 21ου αιώνα είναι ένα γραφείο εξοπλισμένο με υπολογιστές που έχουν πρόσβαση στη ροή πληροφοριών. |
|
align = "δικαιολογώ" | align = "κέντρο" |
Καθημερινά ο αριθμός των εργαζομένων που απασχολούνται στον τομέα των υπηρεσιών και στη διάδοση πληροφοριών αυξάνεται. Αν τα σύμβολα των περασμένων αιώνων ήταν το αγρόκτημα και το εργοστάσιο, τότε το σύμβολο του σημερινού 21ου αιώνα είναι ένα γραφείο εξοπλισμένο με υπολογιστές που έχουν πρόσβαση στη ροή πληροφοριών. |
Καθημερινά ο αριθμός των εργαζομένων που απασχολούνται στον τομέα των υπηρεσιών και στη διάδοση πληροφοριών αυξάνεται. Αν τα σύμβολα των περασμένων αιώνων ήταν το αγρόκτημα και το εργοστάσιο, τότε το σύμβολο του σημερινού 21ου αιώνα είναι ένα γραφείο εξοπλισμένο με υπολογιστές που έχουν πρόσβαση στη ροή πληροφοριών. |
Η δικαιολογημένη τιμή παρέχει ομοιόμορφη στοίχιση κειμένου δεξιά και αριστερά, αυτό είναι σε πλάτος. Αυτή η μέθοδος χρησιμοποιείται ευρέως στην εκτύπωση.
Στοίχιση κειμένου σε HTML για να κεντράρει και να αιτιολογεί
Στοίχιση κειμένου σε HTML στο κέντρο, κείμενο προς τα δεξιά:
Αποτέλεσμα:
Ιδιότητες και αξίες
- align="αριστερά" - ορίζει αριστερή στοίχιση κειμένου(Προκαθορισμένο).
- align = "κέντρο" - ευθυγραμμίζει το κείμενο στο κέντρο.
- στοίχιση "δεξιά" ευθυγραμμίζει το κείμενο προς τα δεξιά.
Ευθυγράμμιση | Εσοχή κειμένου HTML
Κείμενο HTMLκαι η εσοχή του στα αριστερά της σελίδας
Ας παράγουμε εσοχή κειμένουστα αριστερά με δύο τρόπους:
Αποτέλεσμα:
Προβολή σε νέο παράθυρο.
css | Internet Explorer | Χρώμιο | ΛΥΡΙΚΗ ΣΚΗΝΗ | σαφάρι | Firefox | Android | iOS | |
2.1 | 6.0+ | 8.0+ | 1.0+ | 3.5+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
3 | 2.0+ | 11.6+ | 3.1+ | 3.6+ | 2.1+ | 2.0+ |
σύντομες πληροφορίες
Εκδόσεις CSS
Αξίες
κέντρο Ευθυγραμμίζει το κείμενο στο κέντρο. Το κείμενο τοποθετείται οριζόντια στο παράθυρο του προγράμματος περιήγησης ή στο κοντέινερ όπου βρίσκεται το μπλοκ κειμένου. Οι γραμμές κειμένου φαίνεται να είναι χορδισμένες σε έναν αόρατο άξονα που διατρέχει το κέντρο της ιστοσελίδας. Μια παρόμοια μέθοδος ευθυγράμμισης χρησιμοποιείται ενεργά σε επικεφαλίδες και διάφορες λεζάντες, όπως λεζάντες, δίνει μια επίσημη και σταθερή εμφάνιση στο σχεδιασμό του κειμένου. Σε όλες τις άλλες περιπτώσεις, η στοίχιση στο κέντρο χρησιμοποιείται σπάνια για το λόγο ότι δεν είναι βολικό να διαβάσετε μεγάλο όγκο τέτοιου κειμένου. justify Justify, που σημαίνει αριστερά και δεξιά δικαιολογημένα ταυτόχρονα. Για να εκτελέσετε αυτήν την ενέργεια, το πρόγραμμα περιήγησης σε αυτήν την περίπτωση προσθέτει κενά μεταξύ των λέξεων. αριστερά Ευθυγραμμίζει το κείμενο προς τα αριστερά. Σε αυτήν την περίπτωση, οι γραμμές του κειμένου ευθυγραμμίζονται προς τα αριστερά και η δεξιά άκρη βρίσκεται σε μια "σκάλα". Αυτή η μέθοδος ευθυγράμμισης είναι η πιο δημοφιλής σε ιστότοπους, επειδή επιτρέπει στον χρήστη να αναζητήσει εύκολα νέα γραμμήκαι άνετο στην ανάγνωση μεγάλου κειμένου. δεξιά Ευθυγραμμίζει το κείμενο προς τα δεξιά. Αυτή η μέθοδος ευθυγράμμισης δρα ως ανταγωνιστής του προηγούμενου τύπου. Δηλαδή, οι γραμμές του κειμένου είναι ευθυγραμμισμένες προς τα δεξιά, ενώ η αριστερή παραμένει «κουρελιασμένη». Λόγω του γεγονότος ότι το αριστερό άκρο δεν είναι ευθυγραμμισμένο, δηλαδή, η ανάγνωση νέων γραμμών ξεκινά με αυτό, ένα τέτοιο κείμενο είναι πιο δύσκολο να διαβαστεί από ό,τι αν ήταν αριστερή στοίχιση. Επομένως, η στοίχιση δεξιά χρησιμοποιείται συνήθως για σύντομες επικεφαλίδες που δεν υπερβαίνουν τις τρεις γραμμές. Δεν θεωρούμε συγκεκριμένους ιστότοπους όπου το κείμενο πρέπει να διαβαστεί από τα δεξιά προς τα αριστερά, όπου μια παρόμοια μέθοδος ευθυγράμμισης μπορεί να είναι χρήσιμη. auto Δεν αλλάζει τη θέση του στοιχείου. inherit Κληρονομεί την αξία του γονέα. εκκίνηση Το ίδιο με αριστερά αν το κείμενο πηγαίνει από αριστερά προς τα δεξιά και δεξιά αν το κείμενο πηγαίνει από δεξιά προς τα αριστερά. τέλος Ίδιο με το δεξί αν το κείμενο πηγαίνει από αριστερά προς τα δεξιά και αριστερά όταν το κείμενο πηγαίνει από δεξιά προς τα αριστερά.HTML5 CSS2.1 IE Cr Op Sa Fx
Το αποτέλεσμα αυτού του παραδείγματος φαίνεται στο Σχ. ένας.
Ρύζι. 1. Ευθυγράμμιση κειμένου στο πρόγραμμα περιήγησης Safari
Ο Internet Explorer έως και την έκδοση 7.0 ερμηνεύεται λίγο διαφορετικά δεδομένο παράδειγμα, από άλλα προγράμματα περιήγησης, ευθυγραμμίζοντας όχι μόνο κείμενο, αλλά και μπλοκ (Εικ. 2).
Ρύζι. 2. Στοίχιση κειμένου περιηγητής διαδυκτίου Explorer 7
Μοντέλο αντικειμένου
document.getElementById("elementID").style.textAlign
Προγράμματα περιήγησης
Ο IE μέχρι και η έκδοση 7.0 ευθυγραμμίζει όχι μόνο το περιεχόμενο ενός στοιχείου μπλοκ, αλλά και το ίδιο το στοιχείο.