Το Drop Cap (ένα drop cap ενσωματωμένο στο κείμενο) είναι το πρώτο γράμμα μιας παραγράφου, μεγαλύτερο από τα υπόλοιπα, και τοποθετημένο έτσι ώστε η κορυφή του να βρίσκεται στο επίπεδο της πρώτης γραμμής της παραγράφου. Στην εικόνα μπορείτε να δείτε ένα παράδειγμα ενός drop cap ενσωματωμένο στο κείμενο.

Παρεμπιπτόντως, το WordPress έχει μια ειδική προσθήκη (wordpress.org/extend/plugins/drop-caps) που σας επιτρέπει να δημιουργείτε αυτόματα ενσωματωμένο κείμενο (και μετατοπισμένο προς τα κάτω) κεφαλαία γράμματα. Φοβερο! Ωστόσο, τι γίνεται αν δεν θέλετε να χρησιμοποιήσετε ένα πρόσθετο (είμαι σίγουρος ότι δεν το κάνετε) και χρειάζεται απλώς να δημιουργήσετε ένα drop cap σε πολλές αναρτήσεις και ίσως σε μια συγκεκριμένη τοποθεσία;

Τα καλά νέα είναι ότι δεν χρειάζεστε πρόσθετο για να δημιουργήσετε κεφαλαία γράμματα, το μόνο που χρειάζεστε είναι λίγο css και μια ετικέτα span. Ανοίξτε το αρχείο css και προσθέστε τον παρακάτω κώδικα:

Span.dropcaps ( γραμματοσειρά-οικογένεια:Georgia, σερίφ; χρώμα: #cccc; μέγεθος γραμματοσειράς: 46 εικονοστοιχεία; float: αριστερά; βάρος γραμματοσειράς: 400; ύψος γραμμής: 1em; περιθώριο-κάτω: -0.4em; περιθώριο-δεξιά : 0,09em; θέση: σχετική; )

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

Διάρκεια ετικέτας

Για να εφαρμοστεί το στυλ στο κεφαλαίο γράμμα του κειμένου, πρέπει να "τυλίξετε" το κεφαλαίο γράμμα σε μια ετικέτα span και να καθορίσετε την κατάλληλη κλάση.

ΕΝΑ

Ψευδοστοιχείο:πρώτο γράμμα

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

P:first-letter ( font-family:Georgia, serif; χρώμα: #cccc; μέγεθος γραμματοσειράς: 46 px; float: αριστερά; βάρος γραμματοσειράς: 400; line-height: 1em; margin-bottom: -0.4em; περιθώριο -δεξιά: 0,09em; θέση: σχετική; )

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

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

Θα δείξω πολλές επιλογές για την επίλυση αυτού του προβλήματος: Η PHP και η CSS είναι πιο κατάλληλες για ήδη δημοσιευμένο υλικό, όταν το jQuery μπορεί να διορθώσει την κατάσταση πριν από τη δημοσίευση.

Το πρώτο γράμμα μιας συμβολοσειράς με κεφαλαία σε PHP

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

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

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

Κεφάλαιο πρώτο γράμμα μιας συμβολοσειράς σε CSS

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

Η χρήση είναι η εξής:

πρώτη πρόταση

δεύτερη πρόταση

τρίτη πρόταση

τέταρτη πρόταση

#content p:first-γράμμα (μετατροπή κειμένου: κεφαλαία; )

Χρησιμοποιώντας το ψευδοστοιχείο "πρώτο γράμμα" και την ιδιότητα "μετασχηματισμός κειμένου", ορίζουμε το σχέδιο για κάθε πρώτο γράμμα της παραγράφου.

Το πρώτο γράμμα μιας συμβολοσειράς με κεφαλαία στο jQuery

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

Για παράδειγμα, θα πάρουμε ένα πεδίο κειμένου (θα λειτουργεί ως πεδίο για την εισαγωγή ενός τίτλου) και θα γράψουμε ένα μικρό σενάριο για αυτό, το οποίο, όταν εισάγετε μια πρόταση με πεζό γράμμα, την κάνει κεφαλαία:

$(document).ready(function() ( $(".content").on("keyup", function() ( var text = $(this).val(); var new_text = text.charAt(0) .toUpperCase() + text.substr(1); $(this).val(new_text); )); ));

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

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

Τα αρχικά γράμματα τότε και τώρα

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

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

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

Χρήση τάξεων

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

Ο κώδικας CSS για το στοιχείο της παραγράφου και την κλάση που δημιουργεί το γράμμα θα μοιάζει με αυτό:

p (μέγεθος γραμματοσειράς: 20 px; οικογένεια γραμματοσειράς: Georgia, "Times New Roman", Times, serif;).myinitialcaps (μέγεθος γραμματοσειράς: 48 px; οικογένεια γραμματοσειράς: Didot;)

Και ο κώδικας HTML θα μοιάζει με αυτό:

Τι μας δίνει:

Φαίνεται πολύ εύκολο; Στην πραγματικότητα, θα πρέπει να κάνετε προσαρμογές ανάλογα με τα συγκεκριμένα γράμματα που εμφανίζονται, καθώς κάθε κεφαλαίο γράμμα απαιτεί ειδική πυροδότηση. Αφού επιλέξετε μια γραμματοσειρά για τα ανυψωμένα γράμματα και για το κυρίως κείμενο, πρέπει να δημιουργήσετε ξεχωριστές κλάσεις για κάθε ανυψωμένο γράμμα. Στην κατηγορία CSS παρακάτω.myinitialcapsi, το περιθώριο στα δεξιά ορίζεται σε αρνητική τιμή για να μειωθεί η απόσταση μεταξύ I και n.

Myinitialcapsi (μέγεθος γραμματοσειράς: 48 px; γραμματοσειρά οικογένειας: Didot; περιθώριο δεξιά: -1 εικονοστοιχεία;)

Σε αυτήν την περίπτωση, υπάρχει κάποιο επιπλέον κενό μεταξύ του "I" και του "n".

Η συμπερίληψη μιας νέας κατηγορίας με αρνητικό περιθώριο το τραβάει πιο κοντά.

Ανάλογα με την ανάλυση οθόνης στο παραπάνω παράδειγμα, τα I και n μπορεί να φαίνονται σαν να είναι θαμπωμένα μαζί. Αυτό οφείλεται στα σερίφ στα άκρα των γραμμάτων. Επομένως, προτού αποφασίσετε για τα τελικά στυλ CSS σας, δοκιμάστε τον ιστότοπό σας σε διαφορετικές συσκευές για να δείτε πώς φαίνεται το κείμενο με κεφαλαία CSS σε αυτές.

Αποσπάσματα και άλλες ειδικές περιπτώσεις

Μπορείτε να μεγεθύνετε όχι μόνο τα γράμματα στην αρχή του κειμένου. Μπορείτε να εφαρμόσετε μια άλλη κλάση για να δημιουργήσετε μια μεγαλύτερη έκδοση εισαγωγικών που θα εμφανίζονται δίπλα στο γράμμα. Στην περίπτωσή μας, ούτε μια κατηγορία γραμμάτων με μέγεθος 48 ούτε μια κατηγορία κειμένου 20 pixel είναι κατάλληλη για εισαγωγικά. Μάλλον, θα είναι κάτι ενδιάμεσο - 30 pixel. Θα μετακινήσουμε τα εισαγωγικά προς τα κάτω 4 pixel για να τα ευθυγραμμίσουμε οπτικά με το I:

Myinitialcapsq (μέγεθος γραμματοσειράς: 30 εικονοστοιχεία, οικογένεια γραμματοσειράς: Didot, float:αριστερά, περιθώριο-πάνω: 4 εικονοστοιχεία;)

Το «συμπεριλαμβανομένου» μιας νέας κατηγορίας με αρνητικό περιθώριο το τραβάει πιο κοντά.

Πρέπει να είστε πολύ προσεκτικοί σχετικά με τη ρύθμιση καθεμιάς από τις κεφαλαιοποιήσεις CSS μαζί με τα εισαγωγικά, έτσι ώστε ο πυρήνας και η στοίχισή τους να ταιριάζουν με τη σήμανση που περιβάλλει. Για παράδειγμα, το γράμμα T θα πρέπει να μετακινηθεί προς τα αριστερά, λίγο πιο πέρα ​​από την άκρη της παραγράφου, έτσι ώστε η εγκάρσια γραμμή του να ταιριάζει οπτικά στη διάταξη. Θα χρειαστεί να κάνετε το ίδιο με στρογγυλά γράμματα, όπως C, G, O και Q. Αυτό το παράδειγμα χρησιμοποιεί μεγέθη γραμματοσειρών 20, 30 και 48. Αλλά θα χρειαστεί να επιλέξετε μεγέθη με βάση τις συγκεκριμένες γραμματοσειρές που επιλέγετε. Καθώς και τα μεγέθη και τις αναλύσεις των οθονών στις οποίες θα προβληθεί ο ιστότοπος.

Ψευδοστοιχεία και ψευδοτάξεις

Χρησιμοποιώντας το ψευδοστοιχείο CSS, μπορείτε εύκολα να δημιουργήσετε ένα ανυψωμένο γράμμα προσθέτοντας ::first-γράμμα σε ένα στοιχείο παραγράφου. Χρησιμοποιήστε το :first-γράμμα (με μία άνω τελεία) για προγράμματα περιήγησης παλαιού τύπου:

p ( μέγεθος γραμματοσειράς: 1,2 εκ. γραμματοσειράς-οικογένεια: Georgia, "Times New Roman", Times, σερίφ; ύψος γραμμής:2em;padding-bottom:1,2em;) p::first-γράμμα (μέγεθος γραμματοσειράς: 3,6em; μετατροπή κειμένου: κεφαλαία; γραμματοσειρά-οικογένεια: "Monotype Bernard Condensed", σερίφ; margin-right:0,03em;).initialb (margin-right:-0,1em;).initialn (margin-right:-0,15 εμ;)

Ο κώδικας HTML που περιέχει κλάσεις CSS που λαμβάνουν υπόψη τον πυρήνα των γραμμάτων N και B θα μοιάζει με αυτό...

Ένα αρχικό γράμμα, με το πρώτο γράμμα να είναι κεφαλαίο.
Με μια αλλαγή γραμμής, η επόμενη γραμμή δεν έχει αρχικό όριο.

Παρατηρήστε στην πηγή HTML πώς το πρώτο γράμμα, όχι το κεφαλαίο γράμμα στην HTML, παίρνει μέγεθος στο αρχικό μέγεθος κεφαλιού των 3,6 cm. Προσεγμένο, ε;

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

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

o Σημειώστε ότι στον πηγαίο κώδικα HTML το πρώτο γράμμα δεν είναι κεφαλαίο, αλλά μετατρέπεται σε χαρακτήρα 3,6em.

Ωστόσο, ακόμα και μετά από αναγκαστική αλλαγή γραμμής, δημιουργείται πάντα ένα γράμμα στην αρχή κάθε νέας παραγράφου. Ίσως αναρωτιέστε: Πώς μπορώ να το λάβω αυτό υπόψη; Χρειάζεται να προσθέσω γράμματα για όλες αυτές τις περιπτώσεις; Λοιπόν, μπορείς. Είναι όμως αυτό απαραίτητο;

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

Συνδυασμός ψευδο-κλάσεων και ψευδο-στοιχείων για τη δημιουργία μιας έξυπνης διάταξης

Η προσθήκη του :first-child pseudo-class βοηθά στην επίλυση του προβλήματος της περιττής μετατροπής των πρώτων γραμμάτων:

p ( μέγεθος γραμματοσειράς: 1,2 εκ. γραμματοσειράς-οικογένεια: Georgia, "Times New Roman", Times, σερίφ; ύψος γραμμής:2em;padding-bottom:0,5em;) p:first-child::first-letter ( μέγεθος γραμματοσειράς: 3,6 εκ., μετατροπή κειμένου: κεφαλαία, οικογένεια γραμματοσειράς: "Monotype Bernard Condensed", σερίφ, περιθώριο δεξιά: 0,03 εκ.)

Συνδυάζοντας αυτόν τον κώδικα με HTML:

Το πρώτο γράμμα που ορίζεται ως πρώτο παιδί είναι το μόνο γράμμα που μετατρέπεται σε ανυψωμένο καπάκι με αυτή τη μέθοδο.

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

Το πλεονέκτημα της χρήσης ψευδο-κλάσεων είναι η δυνατότητα χειρισμού διαφόρων ειδικών περιπτώσεων. Τι γίνεται με τα μειονεκτήματα; Υπάρχουν πολλές διαφορετικές ψευδο-κατηγορίες, και μπορούν να συνδυαστούν με τόσους πολλούς τρόπους που μπορεί να κάνει το κεφάλι σας να γυρίζει. Για παράδειγμα, οι ψευδο-κλάσεις :first-child και :first-of-type μπορούν να παράγουν τα ίδια αποτελέσματα. Μπορείτε επίσης να εφαρμόσετε μια ψευδο-κλάση όχι μόνο σε μια παράγραφο, αλλά και σε ή στοιχεία. Για παράδειγμα, όπως φαίνεται στο παράδειγμα με τα γράμματα που εμφανίζονται παρακάτω στη γραμματοσειρά Didot. Παρατηρήστε πώς έχει προστεθεί το χαρακτηριστικό περιθώριο στα δεξιά του Α. Διαφορετικά, θα «κολλούσε» με το γράμμα s στην αρχή της ενότητας:

ενότητα ( μέγεθος γραμματοσειράς: 1.2em; γραμματοσειρά οικογένειας: Georgia, "Times New Roman", Times, serif; line-height:3em;) section>p:first-child:first-letter (μέγεθος γραμματοσειράς: 4em; text-transform: κεφαλαία; γραμματοσειρά-οικογένεια:Didot, serif; margin-right: 5px;)

Και μαζί με HTML:

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

Και μια νέα παράγραφος...

Εάν αισθάνεστε πειραματικοί, μπορείτε να εξερευνήσετε διαφορετικές μεθόδους εκτός από τα :first-child και :first-of-type . Για παράδειγμα, όπως :nth-of-type ή :nth-of-child για να δείτε πώς μπορούν να χρησιμοποιηθούν αυτοί ή άλλοι τύποι ψευδοκλάσεων για κείμενο κεφαλαίων CSS. Είτε ακολουθείτε τις αρχές που περιγράφονται σε αυτό το άρθρο είτε αρχίζετε να σκάβετε βαθύτερα, μόλις μάθετε πώς να εργάζεστε με τις ψευδο-τάξεις CSS first-child , :first-of-type και :first-letter , θα μπορείτε να κάνετε αίτηση τα σωστά σε στοιχεία HTML.

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

Ετικέτες και χαρακτηριστικά κατά την εργασία με γραμματοσειρές html

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

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

Ας δούμε τις ετικέτες που χρησιμοποιούνται για την εργασία με γραμματοσειρές σε HTML και τα χαρακτηριστικά τους. Το κύριο είναι η ετικέτα. Χρησιμοποιώντας τις τιμές των ιδιοτήτων της, μπορείτε να ορίσετε πολλά χαρακτηριστικά της γραμματοσειράς:

• χρώμα – ορίζει το χρώμα του κειμένου.
• μέγεθος – μέγεθος γραμματοσειράς σε συμβατικές μονάδες.

Υποστηρίζονται τιμές θετικών χαρακτηριστικών από 1 έως 7.

• πρόσωπο – χρησιμοποιείται για τον ορισμό της οικογένειας γραμματοσειρών κειμένου που θα χρησιμοποιηθεί μέσα στο . Υποστηρίζονται πολλές τιμές, χωρισμένες με κόμμα.

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

Επίσης στο html υπάρχει ένας αριθμός ζευγαρωμένων ετικετών που καθορίζουν μόνο έναν κανόνα μορφοποίησης. Αυτά περιλαμβάνουν:

• — ορίζει έντονη γραμματοσειρά σε html. Η ετικέτα δράσης είναι παρόμοια με την προηγούμενη.
• — το μέγεθος είναι μεγαλύτερο από το προεπιλεγμένο.
• — μικρότερο μέγεθος γραμματοσειράς.
• — πλάγιο κείμενο (πλάγια γράμματα). Παρόμοια ετικέτα ;
• — κείμενο με υπογράμμιση·
• - διαγραμμένο
• — εμφάνιση κειμένου μόνο σε πεζά.
• - σε κεφαλαίο.

Απλό κείμενο

Ονυξ του αντίχειρος

Ονυξ του αντίχειρος

Περισσότερο από το συνηθισμένο

Λιγότερο από το συνηθισμένο

Πλάγια γραφή

Πλάγια γραφή

Με υπογράμμιση

Διαγραμμένο

Δυνατότητες χαρακτηριστικών στυλ

Εκτός από τις περιγραφόμενες ετικέτες, υπάρχουν αρκετοί ακόμη τρόποι για να αλλάξετε τη γραμματοσειρά σε html. Ένα από αυτά είναι να χρησιμοποιήσετε το γενικό χαρακτηριστικό στυλ. Χρησιμοποιώντας τις τιμές των ιδιοτήτων του, μπορείτε να ορίσετε το στυλ εμφάνισης των γραμματοσειρών:

1) font-family – η ιδιότητα ορίζει την οικογένεια γραμματοσειρών. Είναι δυνατή η παράθεση πολλαπλών τιμών.
Η αλλαγή της γραμματοσειράς σε html στην επόμενη τιμή θα συμβεί εάν η προηγούμενη οικογένεια δεν είναι εγκατεστημένη στο λειτουργικό σύστημα του χρήστη.

Σύνταξη γραφής:

γραμματοσειρά-οικογένεια: όνομα γραμματοσειράς [, όνομα γραμματοσειράς[, ...]]

2) μέγεθος γραμματοσειράς – το μέγεθος ορίζεται από 1 έως 7. Αυτός είναι ένας από τους κύριους τρόπους με τους οποίους μπορείτε να αυξήσετε τη γραμματοσειρά σε HTML.
Σύνταξη γραφής:

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

Μπορείτε επίσης να ορίσετε το μέγεθος της γραμματοσειράς:

• Σε pixel?
• Σε απόλυτη τιμή (xx-small, x-small, small, medium, large).
• Σε ποσοστά?
• Στα σημεία (pt).

Μέγεθος γραμματοσειράς: 7

Μέγεθος γραμματοσειράς: 24 px

Μέγεθος γραμματοσειράς: x-large

Μέγεθος γραμματοσειράς: 200%

Μέγεθος γραμματοσειράς: 24 pt

3) στυλ γραμματοσειράς – ορίζει το στυλ γραφής της γραμματοσειράς. Σύνταξη:

στυλ γραμματοσειράς: κανονικό | πλάγια γραφή | λοξός | κληρονομώ

Αξίες:

• κανονική – κανονική ορθογραφία.
• πλάγια – πλάγια;
• λοξή – γραμματοσειρά με κλίση προς τα δεξιά.
• inherit – κληρονομεί την ορθογραφία του γονικού στοιχείου.

Ένα παράδειγμα για το πώς να αλλάξετε τη γραμματοσειρά σε html χρησιμοποιώντας αυτήν την ιδιότητα:

στυλ γραμματοσειράς: inherit

στυλ γραμματοσειράς: πλάγια γραφή

στυλ γραμματοσειράς: κανονικό

στυλ γραμματοσειράς: λοξό

4) font-variant – μετατρέπει όλα τα κεφαλαία γράμματα σε κεφαλαία. Σύνταξη:

γραμματοσειρά-παραλλαγή: κανονική | μικροσκούφια | κληρονομώ

Ένα παράδειγμα του τρόπου αλλαγής της γραμματοσειράς σε html με αυτήν την ιδιότητα:

font-variant:inherit

γραμματοσειρά-παραλλαγή: κανονική

font-variant:small-caps

5) βάρος γραμματοσειράς – σας επιτρέπει να ορίσετε το πάχος του κειμένου (κορεσμός). Σύνταξη:

βάρος γραμματοσειράς: έντονη | πιο έντονη | ελαφρύτερη | κανονική | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

Αξίες:

• bold – ορίζει τη γραμματοσειρά html σε έντονη γραφή.
• πιο τολμηρός – πιο τολμηρός σε σχέση με το κανονικό.
• ελαφρύτερο - λιγότερο κορεσμένο σε σχέση με το κανονικό.
• κανονική – κανονική ορθογραφία.
• 100-900 – ορίζει το πάχος της γραμματοσειράς σε αριθμητικό ισοδύναμο.

βάρος γραμματοσειράς: έντονη γραφή

βάρος γραμματοσειράς: πιο τολμηρή

βάρος γραμματοσειράς: ελαφρύτερο

βάρος γραμματοσειράς: κανονικό

Βάρος γραμματοσειράς: 900

Βάρος γραμματοσειράς: 100

Ιδιότητα γραμματοσειράς HTML και χρώμα γραμματοσειράς

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

γραμματοσειρά: γραμματοσειρά μεγέθους γραμματοσειράς-οικογένεια | κληρονομώ

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

• λεζάντα – για κουμπιά.
• εικονίδιο – για εικονίδια.
• μενού - μενού;
• πλαίσιο μηνυμάτων – για παράθυρα διαλόγου.
• μικρή λεζάντα – για μικρά χειριστήρια.
• γραμμή κατάστασης – γραμματοσειρά γραμμής κατάστασης.

γραμματοσειρά: εικονίδιο

γραμματοσειρά: λεζάντα

γραμματοσειρά: μενού

γραμματοσειρά:message-box

μικρή λεζάντα

γραμματοσειρά:status-bar

γραμματοσειρά:italic 50px bold "Times New Roman", Times, serif

Για να ορίσετε το χρώμα της γραμματοσειράς σε HTML, μπορείτε να χρησιμοποιήσετε την ιδιότητα χρώματος. Σας επιτρέπει να ορίσετε το χρώμα, είτε χρησιμοποιώντας μια λέξη-κλειδί είτε σε μορφή rgb. Και επίσης σε δεκαεξαδικό κώδικα.

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

Κάνοντας κεφαλαία όλα τα γράμματα σε css

Υπάρχει μια ιδιότητα μετατροπής κειμένου για αυτό, η οποία, όπως ίσως έχετε μαντέψει, μετασχηματίζει κείμενο. Έχει τις εξής τιμές:

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

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

Πώς να φτάσετε στο επιθυμητό στοιχείο;

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

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

Κεφαλαίο γράμμα(
Μετασχηματισμός κειμένου: κεφαλαία;
}

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

Ή ίσως πρέπει να επισημάνετε τη δεύτερη παράγραφο σε κάθε άρθρο χρησιμοποιώντας CSS με κεφαλαία γράμματα. Τότε μια άλλη επιλογή θα σας ταιριάζει. Βρείτε το μπλοκ όπου εμφανίζεται το άρθρο και αποκτήστε πρόσβαση στη δεύτερη παράγραφο χρησιμοποιώντας την ψευδο-κλάση nth-child. Σε αυτό το παράδειγμα, το μπλοκ μας με ένα άρθρο έχει την κλάση άρθρου.

Άρθρο p:nth-child(2)(
Μεταμόρφωση κειμένου: κεφαλαία
}

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

Γενικά, δεν συνιστάται η εμφάνιση κειμένου με αυτόν τον τρόπο, επειδή μειώνει σημαντικά την αντίληψή του, αλλά μπορούν να επισημανθούν ορισμένα ιδιαίτερα σημαντικά τμήματα.

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