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

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

Κατανόηση της ιδιότητας μεγέθους γραμματοσειράς CSS

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

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

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

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

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

Κάθε ένα έχει τα πλεονεκτήματα και τα μειονεκτήματά του, αλλά στην ουσία του να κρατάμε τα πράγματα εστιασμένα, δεν θα τα συζητήσουμε σε αυτό το άρθρο.

Πώς να αλλάξετε το μέγεθος γραμματοσειράς ενός στοιχείου HTML στο CSS

Μπορείτε να αλλάξετε το μέγεθος γραμματοσειράς του κειμένου HTML χρησιμοποιώντας κάποια τυπική σύνταξη CSS.

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

Εδώ είναι η σύνταξη:

Επιλογέας CSS {
 μέγεθος γραμματοσειράς: τιμή;
}

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

Αυτή είναι η πρώτη μου επικεφαλίδα

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

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

Π {
 μέγεθος γραμματοσειράς: 18 px;
}

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

Αυτή είναι η πρώτη μου επικεφαλίδα

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Κείμενο στο Π Η ετικέτα HTML θα έχει πλέον νέο προσαρμοσμένο μέγεθος.

Σχετίζεται με: Βασικές συμβουλές και κόλπα για το CSS που πρέπει να γνωρίζει κάθε προγραμματιστής

Αντιμετώπιση σφαλμάτων κατά την αλλαγή του μεγέθους γραμματοσειράς HTML στο CSS

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

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

10 απλά παραδείγματα κώδικα CSS που μπορείτε να μάθετε σε 10 λεπτά

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

Διαβάστε Επόμενο

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