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

Διαχωρισμός των ανησυχιών

Ένα βασικό πλεονέκτημα του CSS είναι ο διαχωρισμός του περιεχομένου από την παρουσίαση. Με τους απλούστερους όρους, αυτό σημαίνει αντί για πολύ ντεμοντέ στιλιστική σήμανση όπως:

Επικεφαλίδα

Χρησιμοποιούμε σημασιολογική σήμανση:

Επικεφαλίδα

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

h1 {font-weight: κανονικό; }

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

Συμπεριλαμβάνεται ένα φύλλο στυλ εκτύπωσης

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

Ωστόσο, ένα πρόσθετο χαρακτηριστικό, μεσο ΜΑΖΙΚΗΣ ΕΝΗΜΕΡΩΣΗΣ, επιτρέπει τη στόχευση με βάση το πλαίσιο στο οποίο αποδίδεται το έγγραφο. Από προεπιλογή, το προηγούμενο στοιχείο ισοδυναμεί με:

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

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

Μερικά παραδείγματα στυλ δηλώσεις

Ένα καθαρό υπόβαθρο

Σίγουρα δεν θέλετε να σπαταλάτε μελάνι εκτύπωση πολύχρωμο φόντο ή εικόνα φόντου. Ξεκινήστε επαναφέροντας τυχόν προεπιλογές για αυτές τις τιμές που ενδέχεται να έχουν οριστεί στο έγγραφό σας:

σώμα {
φόντο: λευκό;
χρωμα μαυρο;
}

Ίσως θέλετε επίσης να αποτρέψετε την εκτύπωση οποιωνδήποτε εικόνων φόντου - αυτές θα πρέπει να είναι διακοσμητικές και, ως εκ τούτου, να μην είναι απαραίτητο μέρος του περιεχομένου σας:

* {
background-image: κανένα! σημαντικό.
}

Σχετιζομαι με: Πώς να ορίσετε μια εικόνα φόντου σε CSS

Πώς να ορίσετε μια εικόνα φόντου σε CSS

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

Έλεγχος περιθωρίων

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

Για παράδειγμα, στο διάλογο εκτύπωσης του Chrome, υπάρχει μια ρύθμιση περιθωρίου που περιλαμβάνει τιμές κανένας και έθιμο που θα παρακάμψει οτιδήποτε καθορίζεται μέσω CSS:

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

@ σελίδα {
περιθώριο: 2cm;
}

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

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

@ σελίδα {
περιθώριο αριστερά: 20 mm.
περιθώριο-δεξιά: 20mm;
περιθώριο: 40mm;
περιθώριο-κάτω: 50mm;
}
@ σελίδα: αριστερά {
περιθώριο αριστερά: 30mm;
}
@ σελίδα: δεξιά {
περιθώριο-δεξιά: 30mm;
}

Απόκρυψη άσχετου περιεχομένου

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

#contents, div.ad {display: none; }

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

ένα {text-decoration: none; χρώμα: κληρονομεί? }

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

a [href]: μετά τις {
περιεχόμενο: "(" attr (href) ")";
μέγεθος γραμματοσειράς: 90%;
χρώμα: # 333;
}

Αυτό το CSS δίνει αποτελέσματα όπως τα εξής:

a [href]: μετά στοχεύει συγκεκριμένα τη θέση μετά (:μετά) κάθε στοιχείο συνδέσμου (ένα) που έχει στην πραγματικότητα μια διεύθυνση URL ([href]). ο περιεχόμενο Η δήλωση εδώ εισάγει την τιμή του href χαρακτηριστικό μεταξύ παρενθέσεων. Λάβετε υπόψη ότι μπορούν να εφαρμοστούν άλλοι κανόνες στυλ για τον έλεγχο της εμφάνισης του δημιουργούμενου περιεχομένου.

Χειρισμός διακοπών σελίδας

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

πίνακας {page-break-inside: αποφύγετε; }

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

h1, h2 {page-break-before: πάντα; }

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

h1 + h2 {σελίδα-break-before: αποφύγετε; }

Προβολή στυλ εκτύπωσης

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

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

Από το νέο πλαίσιο που εμφανίζεται, επιλέξτε Μενού, έπειτα Περισσότερα εργαλεία, ακολουθούμενη από Απόδοση:

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

Κατά την εξομοίωση του φύλλου στυλ εκτύπωσης, το πρότυπο Πρόγραμμα περιήγησης στυλ είναι διαθέσιμο για επιθεώρηση και τροποποίηση των κανόνων ζωντανού στυλ. Λάβετε υπόψη ότι η εξομοίωση της εκτύπωσης στην οθόνη δεν είναι ακόμη 100% ακριβής. Το πρόγραμμα περιήγησης δεν γνωρίζει τίποτα για το μέγεθος χαρτιού και το @σελίδα ο κανόνας δεν μπορεί να μιμηθεί.

Εκτύπωση σε PDF

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

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

Εκτυπώστε μια ποικιλία εγγράφων

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

Πώς να εκτυπώσετε ιστοσελίδες σε PDF με το Microsoft Edge

Έχετε συναντήσει ποτέ ένα ενδιαφέρον άρθρο για το οποίο θέλετε να αποθηκεύσετε αργότερα; Λοιπόν, μπορείτε να αποθηκεύσετε ως PDF με το Edge σε τρία εύκολα βήματα.

Σχετικά με τον Συγγραφέα