Διάστιχο γραμμών και χαρακτήρων στο Microsoft Word. Διάστιχο στο Word: πώς να το μειώσετε ή να το αυξήσετε

Όταν εργάζεστε με ένα στυλ κειμένου, μπορείτε να ορίσετε το απαραίτητο διάστημα μεταξύ χαρακτήρων, λέξεων και γραμμών. Τέτοιες αποστάσεις ορίζονται σε οποιεσδήποτε μονάδες CSS, είτε είναι px, pt, em ή άλλες. Η εξαίρεση είναι τα ποσοστά - μπορούν να χρησιμοποιηθούν για να ορίσετε την απόσταση μεταξύ των γραμμών (προπορευόμενα), αλλά δεν λειτουργούν όταν ορίζετε το διάστημα μεταξύ χαρακτήρων ή λέξεων.

Διάστιχο χαρακτήρων CSS: διάστιχο μεταξύ γραμμάτων

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

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

P ( διάστιχο: 2em; )

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

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

P (διάστιχο: 6 εικονοστοιχεία; )

Διάστιχο: γραμμή-ύψος

Χρησιμοποιώντας την ιδιότητα CSS line-height, μπορείτε να ορίσετε την απόσταση μεταξύ των γραμμών κειμένου. Όπως ειπώθηκε στην αρχή του θέματος, για να ορίσετε την πρώτη, εκτός από άλλες μονάδες μέτρησης, μπορείτε να χρησιμοποιήσετε ποσοστά. Είναι επίσης δυνατό να γράψετε την τιμή ως πολλαπλασιαστή (αριθμοί μεγαλύτεροι από 0): για τον υπολογισμό της απόστασης, το πρόγραμμα περιήγησης θα πολλαπλασιάσει το μέγεθος της γραμματοσειράς με τον δεδομένο αριθμό. Οι αρνητικές αξίες δεν λειτουργούν. Οι διαθέσιμες τιμές είναι κανονικές και κληρονομούνται.

Παρακάτω είναι ένα παράδειγμα για το πώς να κάνετε το διάστημα γραμμών CSS:

P (ύψος γραμμής: 180%; )

Στο στιγμιότυπο οθόνης μπορείτε να δείτε πώς φαίνεται το κείμενο και με τις τρεις ιδιότητες:

Στιγμιότυπο οθόνης: Διάστημα σε CSS

Αποτελέσματα

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

Προς την αλλαγή διάστιχου σε HTML, δεν χρειάζεται να σφυρηλατήσετε τους καπλαμάδες. Χρειάζεται μόνο να εφαρμόσετε το αντικείμενο στο οποίο θέλετε να προσαρμόσετε αυτήν την απόσταση, για παράδειγμα, σε μια παράγραφο κειμένου (ετικέτα) ή σε ένα στοιχείο μπλοκ (

), εφαρμόστε την ιδιότητα CSS ύψος γραμμής. Η ιδιότητα μπορεί να εφαρμοστεί σε όλες τις ετικέτες HTML.

Η τιμή του ύψους γραμμής μπορεί να οριστεί ως ποσοστό, πολλαπλασιαστής, μονάδες μέτρησης (pixel (px), σημεία (pt), συγκόλληση (pc), κ.λπ.), και μπορεί επίσης να λάβει την τιμή κανονική και να κληρονομήσει.

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

Ας γράψουμε μερικές γραμμές HTML.

Έτσι φαίνεται η απόσταση μεταξύ των γραμμών μιας παραγράφου στο πρόγραμμα περιήγησης με τιμή 1 (δηλαδή μεμονωμένη αρχή) και 70% στην επικεφαλίδα (σημειώστε ότι κατά τον υπολογισμό σε %, το ύψος της γραμματοσειράς λαμβάνεται ως 100):

Αν ορίσουμε ύψος γραμμής για την ετικέτα

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

Εάν ορίσουμε ύψος γραμμής = 0,4, θα λάβουμε ένα αρνητικό κύριο έκθεμα:

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

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

Κύριος

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

1. Διαστάσεις

Μέγεθος στοιχειοθέτησης. Για το μάτι του αναγνώστη, οι μεγάλες ή μικρές γραμμές είναι κουραστικές. Οι μακριές καταστρέφουν τον ρυθμό, καθώς είναι δύσκολο για τον αναγνώστη να βρει την επόμενη γραμμή κειμένου. Η μόνη περίπτωση στην οποία οι σύντομες γραμμές είναι αποδεκτές είναι μια μικρή ποσότητα κειμένου. Για καλύτερη αναγνωσιμότητα, το μήκος γραμμής πρέπει να είναι μεταξύ 40 και 80 χαρακτήρων, συμπεριλαμβανομένων των διαστημάτων. Για ένα σχέδιο με μία στήλη κειμένου, 65 χαρακτήρες είναι ιδανικοί.

Ένας απλός τρόπος για να υπολογίσετε το μήκος γραμμής είναι να χρησιμοποιήσετε τη μέθοδο του Robert Bringhurst, ο οποίος πολλαπλασιάζει το μέγεθος της γραμματοσειράς επί 30. Δηλαδή, εάν το μέγεθος της γραμματοσειράς είναι 10 px, πολλαπλασιάζοντας το επί 30 θα έχετε 300 px ή περίπου 65 χαρακτήρες ανά γραμμή. Ο κώδικας θα μοιάζει κάπως έτσι:
Π(
μέγεθος γραμματοσειράς: 10 px;
μέγιστο πλάτος: 300 px;
}
Χρησιμοποιώ το px γιατί διευκολύνει πολύ τους υπολογισμούς, αλλά μπορεί να χρησιμοποιηθεί και το em.

2. Κορυφαίος

Το Leading είναι το διάστημα μεταξύ των γραμμών του κειμένου στο σώμα μιας νότας και παίζει μεγάλο ρόλο στην αναγνωσιμότητα. Ο σωστός διαχωρισμός γραμμών διευκολύνει τον αναγνώστη να ακολουθήσει τη γραμμή και βελτιώνει την εμφάνιση του κειμένου. Το Leading αλλάζει επίσης το τυπογραφικό χρώμα του κειμένου, που είναι η πυκνότητα ή ο τόνος της σύνθεσης.
Η ηγετική θέση επηρεάζεται από πολλούς παράγοντες: γραμματοσειρά, μέγεθος γραμματοσειράς, πληρότητα, συνθήκες (?) , μήκος γραμμής, διάστιχο λέξεων κ.λπ. Όσο μεγαλύτερη είναι η γραμμή, τόσο μεγαλύτερο το προβάδισμα. Όσο μεγαλύτερο είναι το μέγεθος της γραμματοσειράς, τόσο μικρότερο είναι το πρώτο. Ένας καλός κανόνας είναι να θέτεις Το πρώτο είναι 2-5 pt μεγαλύτερο από το μέγεθος της γραμματοσειράς, ανάλογα με τα ακουστικά. Επομένως, εάν η γραμματοσειρά είναι 12 pt, τότε για τον ιστό η πρώτη πρέπει να είναι 15 pt ή 16 pt.

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

μέγεθος γραμματοσειράς: 12 px;
Ύψος γραμμής: 16 px;
}

3. Χειρισμός εισαγωγικών

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

Αυτό επιτυγχάνεται εύκολα με το CSS χρησιμοποιώντας το στοιχείο blockquote:
blockquote(
κείμενο-εσοχή: -0,8em;
μέγεθος γραμματοσειράς: 12 px;
}

Η αρνητική εσοχή θα εξαρτηθεί από τη γραμματοσειρά, το μέγεθος της γραμματοσειράς και τα περιθώρια.

4. Κάθετος ρυθμός

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

Προκειμένου να διατηρηθεί ο κατακόρυφος ρυθμός χρησιμοποιώντας το CSS, είναι απαραίτητο η απόσταση μεταξύ των στοιχείων και της απόστασης γραμμών (προπορευόμενη) να είναι ίση με το μέγεθος του πλέγματος γραμμής βάσης. Ας υποθέσουμε ότι χρησιμοποιείτε 15 εικονοστοιχεία πλέγμα βάσης, υπονοώντας ότι υπάρχουν 15 εικονοστοιχεία μεταξύ κάθε γραμμής πλέγματος. Το πρώτο θα είναι 15 px και η απόσταση μεταξύ των παραγράφων θα είναι επίσης 15 px. Εδώ είναι ένα παράδειγμα:
σώμα(
γραμματοσειρά-οικογένεια: Helvetica, sans-serif;
μέγεθος γραμματοσειράς: 12 px;
Ύψος γραμμής: 15 px;
}

Π(
margin-bottom: 15px;
}

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

5. Επάνω και κάτω γραμμές ανάρτησης

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

Δυστυχώς, δεν υπάρχει εύκολος τρόπος για να αποτρέψετε τις αιωρούμενες γραμμές χρησιμοποιώντας CSS. Ένας τρόπος για να απαλλαγείτε από αυτά περιγράφηκε παραπάνω, ένας άλλος είναι το jQWidon’t, ένα πρόσθετο jQuery που τοποθετεί κενά μεταξύ των δύο τελευταίων λέξεων ενός στοιχείου.

6. Επιλογή

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

Ακολουθούν ορισμένοι τρόποι επισήμανσης χρησιμοποιώντας CSS:
έκταση (
στυλ γραμματοσειράς: πλάγια;
}

H1 (
font-weight:bold;
}

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

Β (
γραμματοσειρά-παραλλαγή: μικρά κεφαλαία;
}
Λάβετε υπόψη ότι η παραλλαγή γραμματοσειράς λειτουργεί μόνο εάν η γραμματοσειρά υποστηρίζει μικρά κεφαλαία.

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

Στο Word, από προεπιλογή, ορίζεται ένα συγκεκριμένο διάστιχο, το μέγεθος του οποίου μπορεί να διαφέρει σε διαφορετικές εκδόσεις του προγράμματος. Έτσι, για παράδειγμα, στο Microsoft Word 2003 αυτή η τιμή είναι 1,0 και σε νεότερες εκδόσεις είναι ήδη 1,15. Το ίδιο το εικονίδιο διαστήματος μπορεί να βρεθεί στην καρτέλα "Αρχική σελίδα" στην ομάδα "Παράγραφος" - τα αριθμητικά δεδομένα υποδεικνύονται απλώς εκεί, αλλά δεν υπάρχει κανένα σημάδι επιλογής δίπλα σε κανένα από αυτά. Πώς να αυξήσετε ή να μειώσετε την απόσταση μεταξύ των γραμμών στο Word θα συζητηθεί παρακάτω.

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

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

1. Επιλέξτε ολόκληρο το κείμενο ή το επιθυμητό τμήμα (χρησιμοποιήστε τον συνδυασμό πλήκτρων για αυτό "Ctrl+A"ή κουμπί "Επιλέγω"που βρίσκεται στην ομάδα "Επεξεργασία"(αυτί "Σπίτι").

2. Κάντε κλικ στο κουμπί "Διάστημα", που είναι στην ομάδα "Παράγραφος", καρτέλα "Σπίτι".

3. Επιλέξτε την κατάλληλη επιλογή από το αναπτυσσόμενο μενού.

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

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

6. Κάντε κλικ στο κουμπί "ΕΝΤΑΞΕΙ"για να εφαρμόσετε αλλαγές στο κείμενο ή το τμήμα του.

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

Πώς να αλλάξετε το διάστημα πριν και μετά τις παραγράφους στο κείμενο;

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

1. Επιλέξτε όλο το κείμενο ή το επιθυμητό τμήμα.

2. Κάντε κλικ στο κουμπί "Διάστημα"που βρίσκεται στην καρτέλα "Σπίτι".

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

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

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

Πώς μπορώ να αλλάξω το διάστιχο χρησιμοποιώντας τα Γρήγορα στυλ;

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

Είναι απίθανο κάποιος να θέλει να ορίσει με μη αυτόματο τρόπο απόσταση για κάθε επικεφαλίδα, υποτίτλο και παράγραφο, ειδικά αν υπάρχουν πολλά από αυτά στο κείμενο. Σε αυτήν την περίπτωση, τα "Express Styles" που είναι διαθέσιμα στο Word θα σας βοηθήσουν. Ο τρόπος χρήσης τους για την αλλαγή διαστημάτων θα συζητηθεί παρακάτω.

1. Επιλέξτε όλο το κείμενο στο έγγραφο ή το τμήμα στο οποίο θέλετε να αλλάξετε το διάστημα.

2. Στην καρτέλα "Σπίτι"στην Ομάδα “Στυλ”ανοίξτε το παράθυρο διαλόγου κάνοντας κλικ στο μικρό κουμπί στην κάτω δεξιά γωνία της ομάδας.

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

4. Έχοντας επιλέξει το κατάλληλο στυλ, κλείστε το πλαίσιο διαλόγου.

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

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

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

Ιδιοκτησία ύψος γραμμήςορίζει το διάστημα μεταξύ των γραμμών του κειμένου (διάστιχο). Η ιδιότητα δεν ορίζει το διάστημα μεταξύ των γραμμών του κειμένου όπως φαίνεται, αλλά ορίζει ύψος γραμμής κειμένου. Αυτό σημαίνει ότι η πραγματική απόσταση μεταξύ των γραμμών θα υπολογιστεί ως εξής: ύψος γραμμής - μέγεθος γραμματοσειράς= απόσταση μεταξύ γραμμών κειμένου. Ή αντιστρόφως ύψος γραμμής = μέγεθος γραμματοσειράς+ απόσταση μεταξύ των γραμμών κειμένου.

Ιδιοκτησία ύψος γραμμήςμερικές φορές χρησιμοποιείται με μη τυπικό τρόπο για να κεντράρει το κείμενο σε ύψος.

Σύνταξη

Επιλογέας (ύψος γραμμής: μονάδες CSS | τοις εκατό | πολλαπλασιαστής | κανονική | κληρονομιά; )

Αξίες

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

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

Παράδειγμα

ύψος γραμμής - μέγεθος γραμματοσειράς= 35px - 13px = 21px:

P (μέγεθος γραμματοσειράς: 13 εικονοστοιχεία, ύψος γραμμής: 35 εικονοστοιχεία; )

Αποτέλεσμα εκτέλεσης του κώδικα:

Παράδειγμα

Ας μειώσουμε το χάσμα σε 21 εικονοστοιχεία - 13 εικονοστοιχεία = 7 εικονοστοιχεία:

P (μέγεθος γραμματοσειράς: 13 px, ύψος γραμμής: 21 px; )

Αποτέλεσμα εκτέλεσης του κώδικα:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl. Suspendisse eget fringilla nibh, eu commodo arcu. Donec lacinia tempor velit sed tincidunt. Aliquam porttitor nulla purus, vel vulputate ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehicula, ante purus lacinia dui, interdum fringilla massa eros ut dui.

Παράδειγμα

Σε αυτό το παράδειγμα, η απόσταση μεταξύ των γραμμών κειμένου θα είναι ύψος γραμμής - μέγεθος γραμματοσειράς = 13 εικονοστοιχεία - 13 εικονοστοιχεία = 0 εικονοστοιχεία- οι γραμμές θα κολλήσουν σχεδόν μεταξύ τους (οι ουρές των γραμμάτων της επάνω γραμμής θα αγγίζουν τις ουρές των γραμμάτων της κάτω γραμμής):

P (μέγεθος γραμματοσειράς: 13 px, ύψος γραμμής: 13 px; )

Αποτέλεσμα εκτέλεσης του κώδικα:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl. Suspendisse eget fringilla nibh, eu commodo arcu. Donec lacinia tempor velit sed tincidunt. Aliquam porttitor nulla purus, vel vulputate ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehicula, ante purus lacinia dui, interdum fringilla massa eros ut dui.

Παράδειγμα

Σε αυτό το παράδειγμα η τιμή ύψος γραμμής- πολλαπλασιαστής 1,5 από το μέγεθος γραμματοσειράς. Ως εκ τούτου ύψος γραμμήςθα είναι ισοδύναμο μέγεθος γραμματοσειράς * 1.5 = 13 εικονοστοιχεία * 1.5 = 20 εικονοστοιχεία. Και το πραγματικό διάστημα μεταξύ των γραμμών θα είναι ύψος γραμμής - μέγεθος γραμματοσειράς = 20 εικονοστοιχεία - 13 εικονοστοιχεία = 7 εικονοστοιχεία:

P (μέγεθος γραμματοσειράς: 13 px, ύψος γραμμής: 1,5; )

Αποτέλεσμα εκτέλεσης του κώδικα:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl. Suspendisse eget fringilla nibh, eu commodo arcu. Donec lacinia tempor velit sed tincidunt. Aliquam porttitor nulla purus, vel vulputate ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehicula, ante purus lacinia dui, interdum fringilla massa eros ut dui.

Παράδειγμα

Ας αυξήσουμε τον πολλαπλασιαστή:

P (μέγεθος γραμματοσειράς: 13 px, ύψος γραμμής: 2,5; )

Αποτέλεσμα εκτέλεσης του κώδικα:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl. Suspendisse eget fringilla nibh, eu commodo arcu. Donec lacinia tempor velit sed tincidunt. Aliquam porttitor nulla purus, vel vulputate ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehicula, ante purus lacinia dui, interdum fringilla massa eros ut dui.

Παράδειγμα

Εάν το κάνετε ύψος γραμμήςπιο λιγο μέγεθος γραμματοσειράς, τότε οι γραμμές θα επικαλύπτονται γενικά μεταξύ τους:

P (μέγεθος γραμματοσειράς: 13 px, ύψος γραμμής: 9 px; )

Το αποτέλεσμα της εκτέλεσης του κώδικα.

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

Ετικέτα

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

Στοίχιση παραγράφου

Μπορείτε να στοιχίσετε μια παράγραφο χρησιμοποιώντας το χαρακτηριστικό align με τις ακόλουθες τιμές:

text-align: left|right|center|justify|initial|inherit;

Αντιγράψτε τον παρακάτω κώδικα στο αρχείο σας .html.

Στοίχιση παραγράφου χρησιμοποιώντας το χαρακτηριστικό Style

Αυτή η παράγραφος είναι στοίχιση στο κέντρο

Αυτή η παράγραφος είναι δεξιά

Αυτή η παράγραφος εμφανίζεται δικαιολογημένη στο παράθυρο του προγράμματος περιήγησης. Μια αιτιολογημένη παράγραφος στοιχίζεται δεξιά και αριστερά προσθέτοντας επιπλέον κενά. Μπορείτε να δείτε ότι οι άκρες της αιτιολογημένης παραγράφου ταιριάζουν με τις άκρες των παραγράφων με ευθυγράμμιση αριστερά και δεξιά. Σε μια παράγραφο με αριστερή στοίχιση, η αριστερή άκρη είναι ευθεία, ενώ σε μια παράγραφο με στοίχιση δεξιά, η δεξιά άκρη είναι ευθεία. Βλέπετε ότι και οι δύο άκρες αυτής της παραγράφου είναι ευθείες; Αυτό επιτυγχάνεται μέσω του στυλ text-align:justify.

Σε ένα παράθυρο του προγράμματος περιήγησης, ο κώδικας HTML για την παράγραφο μοιάζει με αυτό:

Διάστιχο

Μπορείτε να ελέγξετε την απόσταση των γραμμών παραγράφου χρησιμοποιώντας style=line-height . Χρησιμοποιήστε το χαρακτηριστικό στυλ με τις ακόλουθες τιμές:

γραμμή-ύψος: κανονική|αριθμός|μήκος|αρχική|κληρονομιά;

Παρακάτω είναι ένα παράδειγμα κώδικα HTML που εμφανίζει παραγράφους με διαφορετικό διάστιχο:

Ορισμός απόστασης γραμμών χρησιμοποιώντας το χαρακτηριστικό Style

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

Αυτή η παράγραφος είναι διπλό διάστημα και αιτιολογημένη. line-height:2 καθορίζει διπλή απόσταση. Το χαρακτηριστικό style δεν χρειάζεται να έχει δύο τιμές. Αλλά αν χρειάζεται να καθορίσετε δύο τιμές, μπορείτε να το κάνετε διαχωρίζοντάς τις με ένα ερωτηματικό.




Ακολουθούν μερικοί διαφορετικοί τρόποι χρήσης της τιμής line-height για το χαρακτηριστικό style:

: Ορίζει το διάστιχο στα 13 pixel.

: Ορίζει το διάστημα HTML μεταξύ των παραγράφων στο 200% σε σχέση με το τρέχον μέγεθος γραμματοσειράς.

: Ορίζει το ύψος της γραμμής σε 14 pixel.

Εσοχές

Χρησιμοποίησα τον όρο «εσοχές» για να γίνει πιο κατανοητός. Αλλά στην HTML, χρησιμοποιούμε διαστήματα για να δημιουργήσουμε κενό χώρο γύρω από ένα αντικείμενο. Μπορείτε να χρησιμοποιήσετε το χαρακτηριστικό στυλ με μια τιμή συμπλήρωσης για να κάνετε εσοχή σε μια παράγραφο προς τα αριστερά ή προς τα δεξιά.

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

Δημιουργήστε εσοχές παραγράφους χρησιμοποιώντας το χαρακτηριστικό Style

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

Για αυτήν την παράγραφο, έβαλα το αριστερό padding στα 30 px χρησιμοποιώντας το στυλ padding-left:30px. Αυτή η παράγραφος δικαιολογείται επίσης χρησιμοποιώντας το στυλ text-align:justify. Όπως ήδη γνωρίζετε, μπορούμε να χρησιμοποιήσουμε πολλαπλές τιμές για το χαρακτηριστικό Style διαχωρίζοντάς τες με ένα ερωτηματικό.

Και αυτή η παράγραφος έχει δεξιά εσοχή 30 pixel, αλλά όχι αριστερή εσοχή. Είναι επίσης ευθυγραμμισμένο στο πλάτος. Η τιμή "padding-right" του χαρακτηριστικού στυλ καθορίζει τη σωστή συμπλήρωση. Εάν δεν βλέπετε το εφέ, μειώστε το πλάτος του παραθύρου του προγράμματος περιήγησής σας, ώστε η αιτιολογημένη παράγραφος HTML να εμφανίζεται σωστά.


Εσοχές μεταξύ παραγράφων (εσοχή πριν και μετά την παράγραφο)

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

Το padding-top και padding-bottom καθορίζουν το λευκό διάστημα πριν και μετά από μια παράγραφο, το οποίο λειτουργεί σαν padding στο επάνω ή στο κάτω μέρος. Κοιτάξτε το παράδειγμα ετικέτας παρακάτω

Ρύθμισα την πρώτη παράγραφο HTML να έχει μια συμπλήρωση 10 px πριν από τη δεύτερη παράγραφο και 50 px μετά τη δεύτερη παράγραφο:

Δημιουργήστε εσοχές παραγράφους χρησιμοποιώντας το χαρακτηριστικό Style

Αυτή η παράγραφος δεν έχει εσοχές πριν ή μετά. Αυτή είναι μια κανονική παράγραφος, αιτιολογημένη. Όπως ήδη γνωρίζετε, μπορούμε να ευθυγραμμίσουμε μια παράγραφο χρησιμοποιώντας τον κώδικα style=”text-align:justify” μέσα στην ετικέτα.

Αυτή η παράγραφος είναι υπερμεγέθης. Έχει επίσης 10 pixel padding πριν από την παράγραφο και 50 pixel μετά από αυτήν. Μέσα στην ετικέτα έχω ορίσει 3 στυλ.

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




Πράγματα που πρέπει να θυμάστε

  • Μια παράγραφος HTML μπορεί να ευθυγραμμιστεί χρησιμοποιώντας το χαρακτηριστικό align ή το στυλ στοίχισης κειμένου.
  • Το HTML θα αποδοθεί διαφορετικά ανάλογα με τα μεγέθη οθόνης, τα μεγέθη των παραθύρων του προγράμματος περιήγησης.
  • Η προσθήκη επιπλέον διαστημάτων ή κενών γραμμών στο HTML σας δεν επηρεάζει την έξοδο. Το πρόγραμμα περιήγησης αφαιρεί όλα τα επιπλέον κενά.
  • Οι ετικέτες ορίζουν τι πρέπει να εμφανίζεται και τα στυλ καθορίζουν τον τρόπο εμφάνισης.
  • Τα στυλ μπορούν να καθοριστούν με τρεις διαφορετικούς τρόπους - inline (εντός ετικετών), εσωτερικό ( μέσα στο ίδιο αρχείο HTML χρησιμοποιώντας το στοιχείο