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

Με κεφαλαία γράμματα όλα τα γράμματα στο css

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

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

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

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

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

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

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

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

Or ίσως πρέπει να κεφαλαιοποιήσετε τη δεύτερη παράγραφο σε κάθε άρθρο χρησιμοποιώντας το css. Στη συνέχεια, μια άλλη επιλογή θα σας ταιριάζει. Βρείτε το μπλοκ στο οποίο εμφανίζεται το άρθρο και ανατρέξτε στη δεύτερη παράγραφο χρησιμοποιώντας την ψευδο-τάξη n-child. V αυτό το παράδειγματο μπλοκ άρθρου μας έχει την κατηγορία άρθρου.

Άρθρο p: n-παιδί (2) (
Μετατροπή κειμένου: κεφαλαία
}

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

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

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

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

Νωρίτερα και τώρα ρίξτε καπάκια

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

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

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

Χρήση τάξεων

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

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

p (font-size: 20px; font-family: Georgia, "Times New Roman", Times, serif;) .myinitialcaps (font-size: 48px; font-family: Didot;)

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

Που μας δίνει:

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

Myinitialcapsi (font-size: 48px; font-family: Didot; margin-right: -1px;)

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

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

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

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

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

Myinitialcapsq (font-size: 30px; font-family: Didot; float: left; margin-top: 4px;)

“Εγώ ncluding »μια νέα κατηγορία με αρνητικό περιθώριο την πλησιάζει.

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

Pseευδοστοιχεία και ψευδοκλάσεις

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

p (font-size: 1.2em; font-family: Georgia, "Times New Roman", Times, serif; line-height: 2em; padding-bottom: 1.2em;) p :: πρώτο γράμμα (font-size: 3.6em; μετατροπή κειμένου: κεφαλαία; font-family: "Monotype Bernard Condoned", serif; margin-right: 0.03em;) .initialb (margin-right: -0.1em;) .initialn (margin-right: -0.15 εμ;)

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

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

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

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

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

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

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

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

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

Η προσθήκη της: ψευδοκλάσης πρώτου παιδιού βοηθά στην επίλυση του προβλήματος της περιττής μετατροπής των πρώτων γραμμάτων:

p (font-size: 1.2em; font-family: Georgia, "Times New Roman", Times, serif; line-height: 2em; padding-bottom: 0.5em;) p: first-child :: first-letter ( font-size: 3.6em; text-transform: κεφαλαία; font-family: "Monotype Bernard Condened", serif; margin-right: 0.03em;)

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

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

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

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