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 Justified, που σημαίνει ευθυγραμμισμένος αριστερά και δεξιά ταυτόχρονα. Για να εκτελέσετε αυτήν την ενέργεια, το πρόγραμμα περιήγησης σε αυτήν την περίπτωση προσθέτει κενά μεταξύ των λέξεων. αριστερά Ευθυγραμμίζει το κείμενο προς τα αριστερά. Σε αυτήν την περίπτωση, οι γραμμές του κειμένου ευθυγραμμίζονται προς τα αριστερά και η δεξιά άκρη είναι διατεταγμένη ως σκάλα. Αυτή η μέθοδος ευθυγράμμισης είναι η πιο δημοφιλής στους ιστότοπους, καθώς επιτρέπει στον χρήστη να βρίσκει εύκολα το νέα γραμμήκαι να διαβάσετε άνετα μεγάλο κείμενο. δεξιά Ευθυγραμμίζει το κείμενο προς τα δεξιά. Αυτή η μέθοδος ευθυγράμμισης δρα ως ανταγωνιστής του προηγούμενου τύπου. Δηλαδή, οι γραμμές του κειμένου ευθυγραμμίζονται στη δεξιά άκρη, ενώ η αριστερή παραμένει «σκισμένη». Επειδή το αριστερό άκρο δεν είναι ευθυγραμμισμένο, όπου διαβάζονται οι νέες γραμμές, αυτό το κείμενο είναι πιο δύσκολο να διαβαστεί από ό,τι αν ήταν αριστερή στοίχιση. Επομένως, η δεξιά στοίχιση χρησιμοποιείται συνήθως για σύντομες επικεφαλίδες που δεν υπερβαίνουν τις τρεις γραμμές. Δεν θεωρούμε συγκεκριμένους ιστότοπους όπου το κείμενο πρέπει να διαβαστεί από τα δεξιά προς τα αριστερά, όπου ίσως μια παρόμοια μέθοδος ευθυγράμμισης θα είναι χρήσιμη. auto Δεν αλλάζει τη θέση του στοιχείου. inherit Κληρονομεί την αξία του γονέα. εκκίνηση Το ίδιο με αριστερά αν το κείμενο πηγαίνει από αριστερά προς τα δεξιά και δεξιά όταν το κείμενο πηγαίνει από δεξιά προς τα αριστερά. τέλος Ίδιο με το δεξί αν το κείμενο πηγαίνει από αριστερά προς τα δεξιά και αριστερά όταν το κείμενο πηγαίνει από δεξιά προς τα αριστερά.

HTML5 CSS2.1 IE Cr Op Sa Fx

Το αποτέλεσμα αυτού του παραδείγματος φαίνεται στο Σχ. 1.

Ρύζι. 1. Ευθυγραμμίστε το κείμενο στο πρόγραμμα περιήγησης Safari

Ο Internet Explorer μέχρι την έκδοση 7.0 το ερμηνεύει κάπως διαφορετικά αυτό το παράδειγμααπό άλλα προγράμματα περιήγησης, ευθυγραμμίζοντας όχι μόνο κείμενο, αλλά και μπλοκ (Εικ. 2).

Ρύζι. 2. Στοίχιση κειμένου στον Internet Explorer 7

Μοντέλο αντικειμένου

document.getElementById("elementID").style.textAlign

Προγράμματα περιήγησης

Ο IE μέχρι και η έκδοση 7.0, συμπεριλαμβανομένης της, ευθυγραμμίζει όχι μόνο τα περιεχόμενα ενός στοιχείου σε επίπεδο μπλοκ, αλλά και το ίδιο το στοιχείο.

Ετικέτες HTML που καθορίζουν τη στοίχιση και την εσοχή κειμένου

Αιτιολογημένο κείμενο που χρησιμοποιείται στην τυπογραφία

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

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

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

Στοίχιση κειμένου σε HTML στο κέντρο και το πλάτος

Στοίχιση κειμένου σε HTML στο κέντρο, κείμενο προς τα δεξιά:

Αποτέλεσμα:

Ιδιότητες και αξίες

• align="αριστερά" - ορίζει αριστερή στοίχιση κειμένου(Προκαθορισμένο).
• align = "κέντρο" - ευθυγραμμίζει το κείμενο στο κέντρο.
• align="δεξιά" - ευθυγραμμίζει το κείμενο προς τα δεξιά.

Ευθυγράμμιση | Εσοχή κειμένου HTML

Κείμενο HTMLκαι η εσοχή του στα αριστερά της σελίδας

θα παράγουμε εσοχή κειμένουστα αριστερά με δύο τρόπους:

Αποτέλεσμα:

Προβολή σε νέο παράθυρο.

Ιδιότητα text-align-last ( δεν πρέπει να συγχέεται με τη στοίχιση HTML) καθορίζει πώς θα ευθυγραμμιστεί η τελευταία γραμμή ενός μπλοκ ή η γραμμή πριν από μια αναγκαστική διακοπή. Αυτό είναι σημαντικό επειδή η τελευταία γραμμή μιας παραγράφου συνήθως δεν περιέχει αρκετό κείμενο για να γεμίσει όλο το χώρο.

Σε αυτό το άρθρο, θα καλύψουμε όλες τις πτυχές της ιδιότητας text-align-last, συμπεριλαμβανομένων των τιμών που δέχεται και της υποστήριξης του προγράμματος περιήγησης.

Χρήση και αποδεκτές τιμές

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

Εισαγωγικό γράφημα ( text-align: justify; // Απαιτείται για IE και Edge text-align-last: δεξιά; )

Το ακίνητο μπορεί να λάβει επτά αξίες. Πιθανότατα είστε εξοικειωμένοι με τις τυπικές τιμές κειμένου HTML του align:left, right και center. Ευθυγραμμίζουν το κείμενο στην τελευταία γραμμή δεξιά, αριστερά και στο κέντρο του κοντέινερ.

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

Δείτε παράδειγμα

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

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

Δείτε παράδειγμα

Η στοίχιση της τελευταίας γραμμής κειμένου προς τα αριστερά είναι κατάλληλη για γλώσσες που διαβάζονται από αριστερά προς τα δεξιά ( LTR), αλλά αυτό θα είναι λανθασμένο για τις γλώσσες RTL. Σε τέτοιες περιπτώσεις, η χρήση της αριστερής ή της δεξιάς τιμής μπορεί να προκαλέσει προβλήματα.

Ευτυχώς, μπορείτε να χρησιμοποιήσετε την τιμή έναρξης για να ευθυγραμμίσετε το κείμενο στην άκρη όπου ξεκινά η γραφή και η ανάγνωση. Αυτό σημαίνει ότι ορίζοντας την ιδιότητα text-align-last για έναρξη , θα στοιχίσετε το κείμενο αριστερά για τις γλώσσες LTR και δεξιά για τις γλώσσες RTL.

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

Δείτε παράδειγμα

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

Σημαντικές σημειώσεις

Για να λειτουργήσει το text-align-last, η ιδιότητα text-align πρέπει να ρυθμιστεί ώστε να δικαιολογεί . Αλλά αυτός ο κανόνας εφαρμόζεται μόνο σε IE και Edge. Στο Firefox και στο Chrome, η ιδιότητα λειτουργεί χωρίς να ρυθμίσει το text-align για να δικαιολογήσει . Στο παρακάτω παράδειγμα, το κείμενο θα πρέπει να ευθυγραμμιστεί δεξιά σε Edge και IE. Σε άλλα προγράμματα περιήγησης, οι τελευταίες γραμμές των παραγράφων θα ευθυγραμμιστούν σύμφωνα με την τιμή της ιδιότητας text-align-last και οι υπόλοιπες γραμμές θα ευθυγραμμιστούν δεξιά.

Προβολή επίδειξης

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

Η ιδιότητα λειτουργεί ακόμα κι αν η παράγραφος έχει αναγκαστική αλλαγή γραμμής που προσδιορίζεται χρησιμοποιώντας την ετικέτα
ή κατι τετοιο. Λάβετε υπόψη ότι αυτή η ιδιότητα θα επηρεάσει όλες τις τελευταίες γραμμές κειμένου εντός του καθορισμένου στοιχείου, όχι μόνο την πιο εξωτερική. Για παράδειγμα, εάν το κείμενο μέσα σε ένα άρθρο ή στοιχείο div περιέχει τρεις παραγράφους, η τελευταία γραμμή σε καθεμία θα ευθυγραμμιστεί σύμφωνα με το σύνολο ιδιοτήτων text-align-last για ολόκληρο το γονικό στοιχείο.

Εάν χρειάζεται μόνο να στοιχίσετε την τελευταία γραμμή περιεχομένου, μπορείτε να χρησιμοποιήσετε τους επιλογείς :last-child ή :last-of-type. Πάρτε τον κώδικα από την παρακάτω επίδειξη ως παράδειγμα:

άρθρο (στοίχιση κειμένου: δικαιολογώ; ) άρθρο p:last-of-type (text-align-last: right; )

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

Προβολή επίδειξης

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

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

Εξετάστε το ακόλουθο απόσπασμα κώδικα:

p (text-align: justify; ) p:nth-of-type(2) (text-align-last: left;)

Εάν η δεύτερη παράγραφος έχει μόνο μία γραμμή, τότε το κείμενο θα μείνει στοιχισμένο επειδή το text-align-last θα έχει προτεραιότητα. Το παρακάτω demo δείχνει αυτόν τον κωδικό CSS σε δράση, συν μερικά άλλα Παραδείγματα HTMLευθυγραμμίζω.

Προβολή επίδειξης

Υποστήριξη προγράμματος περιήγησης

Η υποστήριξη για αυτήν την ιδιότητα μπορεί να ενεργοποιηθεί χρησιμοποιώντας την επιλογή " Ενεργοποίηση πειραματικών δυνατοτήτων πλατφόρμας ιστού" V Google Chromeκαι Opera, ξεκινώντας από τις εκδόσεις 35 και 22 αντίστοιχα. Υποστηρίζεται πλήρως σε Chrome 47+ και Opera 34+.

Για να χρησιμοποιήσετε αυτήν την ιδιότητα στον Firefox, θα πρέπει να την προσθέσετε με -moz- . Οι τιμές έναρξης και λήξης δεν υποστηρίζονται από τον IE. Ταυτόχρονα, ο Edge υποστηρίζει πλήρως αυτήν την ιδιότητα. Το μόνο δημοφιλές πρόγραμμα περιήγησης που δεν υποστηρίζει πλήρως το text-align-last είναι το Safari.

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

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

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

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

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

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

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

Ρύζι. 11.4.

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

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

Διάστημα μεταξύ λέξεων: ιδιότητα απόστασης λέξεων

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

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

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

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

Στοίχιση είναι η τοποθέτηση της αριστερής ή της δεξιάς άκρης ενός μπλοκ κειμένου κατά μήκος ενός αόρατου κάθετη γραμμή. Για να στοιχίσετε κείμενο, χρησιμοποιήστε την ιδιότητα text-align. Οι έγκυρες τιμές για αυτήν την ιδιότητα είναι αριστερά, δεξιά, κέντρο και δικαιολογούν, οι οποίες καθορίζουν αριστερά, δεξιά, κέντρο και δικαιολογούν τη στοίχιση, αντίστοιχα.

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

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

Κορυφαία: ιδιότητα γραμμής-ύψους

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

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

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

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

Γεια σας, αγαπητοί αναγνώστες του ιστότοπου του ιστολογίου. Σήμερα συνεχίζουμε να μελετάμε και στη συνέχεια έχουμε τις ιδιότητες text-decoration, vertical-align, text-align, text-indent και μια σειρά από άλλες, που βοηθούν στο σχεδιασμό της εμφάνισης των κειμένων σε κώδικα Html.

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

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

Κείμενο-διακόσμηση, στοίχιση κειμένου, εσοχή κειμένου σε CSS

Πώς να εργαστείτε με κείμενο σε Css; Θα ήταν λογικό να υποθέσουμε ότι υπάρχουν ειδικά σχεδιασμένοι κανόνες για το σκοπό αυτό. Ας ξεκινήσουμε με το text-align, το οποίο στην πραγματικότητα αντικαθιστά το χαρακτηριστικό align (χρησιμοποιήθηκε για τη στοίχιση περιεχομένου όπως παραγράφους P ή επικεφαλίδες).

Έχει μόνο τέσσερις πιθανές έννοιες:

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

Είναι σαφές ότι οι τιμές αυτού του κανόνα σημαίνουν στοίχιση, αντίστοιχα: αριστερά, δεξιά, κέντρο και πλάτος σελίδας (Αιτιολόγηση - ταυτόχρονα αριστερά και δεξιά αυξάνοντας την απόσταση μεταξύ των λέξεων) . Είναι αυτονόητο ότι η τιμή Justify θα πρέπει να χρησιμοποιείται για στοιχεία με τουλάχιστον πολλές γραμμές κειμένου, διαφορετικά δεν θα υπάρχει ορατό αποτέλεσμα.

Για παράδειγμα, αιτιολόγησα την προηγούμενη παράγραφο (μπορείτε να δείτε ότι έχει λεία περιγράμματα τόσο στα αριστερά όσο και στα δεξιά) χρησιμοποιώντας:

Text-align:justify;

Από προεπιλογή, η οριζόντια στοίχιση κειμένου είναι αριστερά, π.χ. Δεν χρειάζεται να γράψετε συγκεκριμένα text-align:left, εκτός εάν, φυσικά, έχετε προηγουμένως καθορίσει διαφορετική στοίχιση. Παρεμπιπτόντως, ευθυγράμμισα αυτήν την παράγραφο στο κέντρο (κέντρο), και πάλι για ένα σαφές παράδειγμα, αλλά εδώ, νομίζω, όλα είναι ξεκάθαρα.

Επόμενος κανόνας Css κείμενο-εσοχήσας επιτρέπει να καθορίσετε μια κόκκινη γραμμή, για παράδειγμα, για κείμενο σε μια ετικέτα παραγράφου P. Η εσοχή της κόκκινης γραμμής μπορεί να καθοριστεί καθορίζοντας μια τιμή (είτε με σύμβολο συν ή μείον, χρησιμοποιώντας ) ή χρησιμοποιώντας ποσοστά:

Από τι υπολογίζονται τα ποσοστά στην εσοχή κειμένου; Από το πλάτος της περιοχής που έχει εκχωρηθεί για κείμενο. Εκείνοι. Ο κανόνας CSS εσοχή κειμένου:50% θα ορίσει μια κόκκινη γραμμή ίση με το μισό μήκος αυτής της ίδιας γραμμής. Λοιπόν, αυτή η παράγραφος χρησιμεύει ως παράδειγμα ενός τέτοιου κανόνα.

Ή μπορείτε, για παράδειγμα, να ορίσετε μια αρνητική τιμή για την κόκκινη γραμμή στην εσοχή κειμένου και, στη συνέχεια, θα λάβουμε περίπου αυτό που βλέπετε σε αυτήν την παράγραφο. Για επίτευγμα αυτό το αποτέλεσμαΈγραψα αυτόν τον κανόνα CSS για την ετικέτα παραγράφου P:

Κείμενο-εσοχή:-1em;

Λοιπόν, μια τυπική χρήση της εσοχής κειμένου (για να ορίσετε την τυπική κόκκινη γραμμή) μπορεί να μοιάζει με αυτό: text-indent:40px; (παρεμπιπτόντως ισχύει για αυτήν την παράγραφο). Αυτός ο κανόνας, όπως ακριβώς και η στοίχιση κειμένου που συζητήθηκε προηγουμένως, ισχύει μόνο για στοιχεία μπλοκ, δηλ. όπου μπορεί να εμφανίζονται πολλές γραμμές (παράγραφοι, επικεφαλίδες κ.λπ.).

Εντάξει, ας προχωρήσουμε τώρα κείμενο-διακόσμηση(σχεδίαση με χρήση οριζόντιας γραμμής), η οποία εφαρμόζεται ήδη σε όλα τα στοιχεία Html (τόσο inline όσο και block).

Μπορεί να έχει μόνο τέσσερις έννοιες:

Εκείνοι. μπορεί να χρησιμοποιηθεί χρησιμοποιώντας διακόσμηση κειμένου: overline, line-through ή υπογράμμιση ή να μην χρησιμοποιήσετε καθόλου (κανένα). Ορισμένα στοιχεία HTML έχουν ήδη μια προεπιλεγμένη σχεδίαση οριζόντια γραμμή, για παράδειγμα, (είναι υπογραμμισμένες από προεπιλογή).

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

Η απόχρωση στη χρήση του κανόνα Css text-decoration είναι ότι μπορείτε να εισαγάγετε τρεις (ή δύο) τιμές ταυτόχρονα για οποιοδήποτε στοιχείο Html (παραλείποντας κανένα) και ως αποτέλεσμα θα λάβετε υπογραμμισμένο-υπογραμμισμένο-διαγραμμισμένο τμήμα κειμένου(ακούγεται και φαίνεται ωραίο, έτσι δεν είναι;):

Κείμενο-διακόσμηση: υπογράμμιση υπεργραμμικής γραμμής.

Οι τιμές για τη διακόσμηση κειμένου (αν θέλετε να χρησιμοποιήσετε πολλές από αυτές ταυτόχρονα) πρέπει να γραφτούν μέσα από έναν διαστημικό χαρακτήρα.

Vertical-align - κάθετη ευθυγράμμιση

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

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

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

Για παράδειγμα, αν γράψω vertical-align:baseline για το ίδιο μεγεθυσμένο κομμάτι κειμένου, τότε δεν θα υπάρξουν αλλαγές, επειδή η βασική τιμή χρησιμοποιείται για αυτόν τον κανόνα CSS από προεπιλογή.

Παρεμπιπτόντως, μπορείτε επίσης να χρησιμοποιήσετε αριθμούς ως τιμές για αυτό και η επιγραφή vertical-align:0 θα σημαίνει το ίδιο πράγμα με vertical-align:baseline, δηλ. γραμμή βάσης ισοδυναμεί με μηδέν. Επομένως, εάν θέλουμε να υποδείξουμε οποιαδήποτε μετατόπιση στην κατακόρυφη στοίχιση, τότε αυτή η μετατόπιση θα καθοριστεί σε σχέση με τη γραμμή βάσης (ή μηδέν).

Μπορείτε να το γράψετε ως εξής:

κατακόρυφη στοίχιση:10px;

Και θα λάβουμε μετακινήστε το κομμάτι με μεγαλύτερη γραμματοσειρά προς τα πάνω 10 pixel σε σχέση με τη γραμμή βάσης. Αν γράψουμε αρνητική τιμή:

Κάθετη στοίχιση: -10 εικονοστοιχεία;

Μετά παίρνουμε μετατόπιση τμήματος προς τα κάτωσε σχέση με τη γραμμή βάσης. Από τα παραδείγματα είναι σαφές ότι λόγω της μετατόπισης, το ύψος της γραμμής αυξήθηκε έτσι ώστε το κείμενο να χωράει σε αυτήν χωρίς να συγκρούεται με τη διπλανή γραμμή. Η μετατόπιση μπορεί επίσης να καθοριστεί σε Em και Ex, και ως ποσοστό, το οποίο θα υπολογιστεί από το ύψος γραμμής αυτού του στοιχείου (θυμηθείτε στο τελευταίο άρθρο που μάθαμε πώς να το ορίσουμε χρησιμοποιώντας το ).

Για να ευθυγραμμίσετε κάθετα τα περιεχόμενα των κελιών πίνακα, η κατακόρυφη στοίχιση θα πρέπει να χρησιμοποιεί τις τιμές Top και Bottom για να ευθυγραμμιστεί αντίστοιχα το περιεχόμενο στο επάνω και στο κάτω μέρος του κελιού (καλά, η μέση σε ένα κελί πίνακα χρησιμοποιείται ως η προεπιλεγμένη τιμή κάθετης στοίχισης ).

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

κατακόρυφη στοίχιση:μέση;

Ποιο ήταν το αποτέλεσμα; Η μεσαία γραμμή του μεγεθυσμένου τμήματος ευθυγραμμίζεται με τη γραμμή βάσης του κανονικού κειμένου, δηλ. έχουμε κάθετη ευθυγράμμιση στην κεντρική γραμμή. Για text-top και text-bott όλα θα είναι ίδια. Αυτό είναι text-top και αυτό είναι text-bottom.

Οι τιμές της ιδιότητας Css vertical-align sub και super αντιστοιχούν στο sub- και super-index που πραγματοποιήθηκε στο καθαρό HTML(πριν τη χρήση Ιδιότητες CSSγια οπτικό σχέδιο).

Μετατροπή κειμένου, διάστιχο, διάστιχο λέξεων και κενό διάστημα

Κανένας δεν χρησιμοποιείται από προεπιλογή και σημαίνει ότι οι χαρακτήρες του κειμένου δεν θα αλλάξουν με κανέναν τρόπο - όπως γράφεται στο Html, έτσι θα εμφανίζονται. Η κεφαλαία τιμή για τον μετασχηματισμό κειμένου θα μετατρέψει όλα τα γράμματα του τμήματος σε κεφαλαία γράμματα ( ένα παράδειγμα φαίνεται σε αυτή την πρόταση, όπου χρησιμοποιήθηκε ο κανόνας text-transform:κεφαλαία και τα γράμματα ήταν αρχικά γραμμένα με πεζά).

Η πεζή τιμή για τον κανόνα μετατροπής κειμένου Css θα σας επιτρέψει να μετατρέψετε όλους τους χαρακτήρες του τμήματος σε πεζούς και η τιμή κεφαλαίων θα κάνει όλα τα πρώτα γράμματα της λέξης να κεφαλαιοποιούνται ( παράδειγμα σε αυτή την πρόταση- text-transform:capitalize). Εκείνοι. χρησιμοποιώντας τη μετατροπή κειμένου, μπορείτε να κάνετε ό,τι θέλετε με απλό κείμενο και, στη συνέχεια, να επιστρέψετε εύκολα τα πάντα.

Επομένως, εάν, για παράδειγμα, έχετε καθήκον να κάνετε όλες τις επικεφαλίδες γραμμένες μόνο με κεφαλαία γράμματα, στη συνέχεια γράψτε τα σε Html ως συνήθως και κάντε τα με κεφαλαία σε CSS μέσω text-transform:κεφαλαία. Στη συνέχεια, εάν αποφασίσετε να αλλάξετε κάτι πίσω, χρειάζεται μόνο να κάνετε μια μικρή αλλαγή στα στυλ και όχι στο περιεχόμενο και των 100.500 κεφαλίδων στον ιστότοπό σας.

Από προεπιλογή, τόσο το διάστιχο γραμμάτων όσο και το διάστιχο λέξεων έχουν οριστεί σε Κανονικό ή αυτό είναι το ίδιο με το μηδέν (δηλαδή, η απόσταση μεταξύ χαρακτήρων και λέξεων δεν αλλάζει με κανέναν τρόπο). Το μέγεθος της αλλαγής της απόστασης σε αυτούς τους κανόνες μπορεί να καθοριστεί μόνο σε pixel, είτε Em είτε Ex, αλλά όχι σε ποσοστά.

Ωστόσο, μπορείτε να χρησιμοποιήσετε τόσο θετικές (αραιότητα χαρακτήρων ή λέξεων) όσο και αρνητικές τιμές (φέρνοντας πιο κοντά χαρακτήρες ή λέξεις). Για παράδειγμα, μπορείτε "Αυτό είναι το πώς να λεπτύνετε τους χαρακτήρες σε αυτήν τη φράση"χρησιμοποιώντας τον ακόλουθο κανόνα Css:

Διάστιχο γραμμάτων: 0,4 εκ.

Ή μπορείς "Έτσι να φέρετε τα σύμβολα σε αυτήν τη φράση πιο κοντά"με τη χρήση:

Διάστιχο γραμμάτων:-1px;

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

Διάστιχο λέξεων:4em;

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

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

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

Έτσι, το λευκό διάστημα μπορεί να πάρει μία από τις τρεις τιμές:

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

Λοιπόν, ποιο είναι το νόημα; nowrapΑπλώς θα εμποδίσει το πρόγραμμα περιήγησης να τυλίξει τυχόν χαρακτήρες κενού διαστήματος που βρίσκει μέσα σε ένα τμήμα με τον κανόνα CSS white-space:nowrap. Μπορείτε να δοκιμάσετε πώς λειτουργεί όλο αυτό μόνοι σας δημιουργώντας ένα απλό αρχείο Html και εσωκλείοντας οποιοδήποτε κομμάτι κειμένου σε ετικέτες όπως αυτή:

Καλή σου τύχη! Τα λέμε σύντομα στις σελίδες του ιστότοπου του ιστολογίου

Μπορεί να σας ενδιαφέρει

Στυλ λίστας (τύπος, εικόνα, θέση) - Κανόνες Css για την προσαρμογή της εμφάνισης λιστών σε κώδικα Html
Τοποθέτηση χρησιμοποιώντας τον κανόνα Z-index και CSS Cursor για την αλλαγή του δρομέα του ποντικιού
Επένδυση, Περιθώριο και Σύνορα - σε εξέλιξη Εσωτερικό CSSκαι εξωτερικά περιθώρια, καθώς και πλαίσια για όλες τις πλευρές (πάνω, κάτω, αριστερά, δεξιά)
Σε τι χρησιμεύει το CSS, πώς να συνδέσετε επικαλυπτόμενα φύλλα στυλ έγγραφο HTMLκαι η βασική σύνταξη αυτής της γλώσσας
Float and clear in CSS - block layout tools
CSS - τι είναι, πώς συνδέονται τα επικαλυπτόμενα φύλλα στυλ Κώδικας HTMLχρησιμοποιώντας Στυλ και Σύνδεσμο
Μονάδες ιδιοτήτων (pixel, Em και Ex) και κανόνες κληρονομικότητας στο CSS
Επιλογείς ετικετών, κλάσεων, αναγνωριστικού και γενικής χρήσης, καθώς και επιλογείς χαρακτηριστικών στο σύγχρονο CSS
Θέση (απόλυτη, σχετική και σταθερή) - μέθοδοι τοποθέτησης στοιχεία HTMLσε CSS (κανόνες αριστερά, δεξιά, πάνω και κάτω)
Φόντο σε CSS (χρώμα, θέση, εικόνα, επανάληψη, συνημμένο) - τα πάντα για τη ρύθμιση του χρώματος φόντου ή φόντου Εικόνες htmlστοιχεία