Σας επιτρέπει να αλλάζετε τα πεζά γράμματα κειμένου.

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

Παράδειγμα

Αυτός είναι ο τίτλος. Έχει μια ιδιότητα μετατροπής κειμένου που εφαρμόζεται με κεφαλαία. Όλοι οι χαρακτήρες θα είναι κεφαλαίοι.

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

Και αυτή η τελευταία παράγραφος έχει μια ιδιότητα μετατροπής κειμένου που εφαρμόζεται με την ιδιότητα ΚΕΦΑΛΑΙΟ. Τα πρώτα γράμματα κάθε λέξης θα γράφονται με κεφαλαία και μόνο αυτά.

Αποτέλεσμα

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

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

και το πρόβλημα θα λυθεί. Και δεν χρειάζεται να αλλάξετε χειροκίνητα όλες τις κεφαλίδες, οι οποίες μπορεί να είναι πάρα πολύ πολλές.

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

Ας μεταμορφώσουμε το κείμενο

Χάρη στα διαδοχικά φύλλα στυλ, μπορείτε να αλλάξετε τόσο τον πρώτο χαρακτήρα ενός μπλοκ όσο και ολόκληρο το κείμενο. Θα σας πω πώς μπορείτε να κάνετε και τις δύο επιλογές. Επιπλέον, όλα τα εργαλεία που αναφέρονται σε αυτό το άρθρο υποστηρίζονται σε τρία επίπεδα γλώσσας: css1, css2, css2.1 και css3.

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

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

Τώρα, για να εμπεδώσετε το θεωρητικό υλικό, εξετάστε ένα παράδειγμα.

Προσοχή!

!Αύριο όλα τα προϊόντα ομορφιάς έχουν έκπτωση!

Η προσφορά ισχύει σε όλα τα καταστήματα που βρίσκονται στην πόλη σας.

Δημιουργία πώματος πτώσης

Αν δεν ξέρετε τι σημαίνει ο όρος «γράμμα», τότε ήρθε η ώρα να το μάθετε, καθώς αυτό σχετίζεται άμεσα με το τρέχον θέμα.

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

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

Για να λύσετε αυτό το πρόβλημα, μπορείτε να χρησιμοποιήσετε ένα εργαλείο όπως π.χ.

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

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

Αυτή η παράγραφος περιέχει μια πολύ ενδιαφέρουσα πρόταση.

Ας συνεχίσουμε την ενδιαφέρουσα ιστορία στην επόμενη παράγραφο.

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

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

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

Αντίο!

Με εκτίμηση, Roman Chueshov

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

Γράμματα τότε και τώρα

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

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

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

Χρήση τάξεων

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

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

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

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

Τι μας δίνει:

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

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

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

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

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

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

Μπορείτε να αυξήσετε όχι μόνο τα γράμματα στην αρχή του κειμένου. Μπορείτε να εφαρμόσετε μια άλλη κλάση για να δημιουργήσετε μια μεγαλύτερη έκδοση των εισαγωγικών που θα εμφανίζονται δίπλα στο γράμμα. Στην περίπτωσή μας, ούτε η κλάση γραμμάτων με μέγεθος 48 ούτε η κλάση κειμένου των 20 εικονοστοιχείων είναι κατάλληλα για εισαγωγικά. Μάλλον, θα είναι κάτι ενδιάμεσο - 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 θα μοιάζει με αυτό…

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

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

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

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

ΟΣημειώστε ότι σε πηγαίος κώδικαςΣτην 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 μπορούν να παράγουν τα ίδια αποτελέσματα. Μπορείτε επίσης να εφαρμόσετε μια ψευδο-κλάση όχι μόνο σε μια παράγραφο, αλλά και σε στοιχεία