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

Θα δείξω πολλές επιλογές για την επίλυση αυτού του προβλήματος: Η 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.

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

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

Παράδειγμα h3 ( μετατροπή κειμένου: κεφαλαία; ) .πεζά (μετατροπή κειμένου: πεζά; ) .κεφαλαία (μετατροπή κειμένου: κεφαλαία; ) μετατροπή κειμένου Αυτή είναι η επικεφαλίδα. Έχει την ιδιότητα μετατροπής κειμένου που εφαρμόζεται σε αυτό με κεφαλαία την τιμή. Όλοι οι χαρακτήρες θα είναι κεφαλαίοι.

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

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

Αποτέλεσμα

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

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

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

ή αναλυτικά σχετικά με τα γράμματα και τη μορφοποίηση HTML CSS

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

Στο μενού στα αριστερά θα βρείτε μοντέρνα και πολύ λεπτομερή tutorials HTML.

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

Αυτό μπορεί να είναι ενδιαφέρον.

εποχή κοινωνία της πληροφορίας

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

Γράμματα HTML: κεφαλαία γράμματα

Παράδειγμα μορφοποίησης γραμμάτων:

Αποτέλεσμα μορφοποίησης:

Παράδειγμα ελεύθερου κειμένου γραμμένου με κεφαλαία γράμματα

Παράδειγμα ελεύθερου κειμένου γραμμένου με κεφαλαία γράμματα

Ετικέτες - ορίστε κεφαλαία γράμματα(αυτές οι ετικέτες δεν υποστηρίζονται σε HTML 5).

Κώδικας CSS style="text-transform:uppercase" - ορίζει κεφαλαία γράμματα.

Με άλλα λόγια, τα κεφαλαία γράμματα ορίζονται με χρησιμοποιώντας CSSγνωρίσματα.

Γράμματα HTML και διάκενο CSS μεταξύ τους

Παράδειγμα μορφοποίησης γραμμάτων:

Αποτέλεσμα μορφοποίησης:

Αυθαίρετος Κείμενο HTMLκαι η απόσταση CSS μεταξύ των γραμμάτων είναι 2 pixel

Περιγραφή χαρακτηριστικών και τιμών:

Κώδικας CSS style="letter-spacing:2px" - ορίζει Διάστιχο γραμμάτων CSS.

Αναζητήστε παρόμοια παραδείγματα μορφοποίησης στο μενού στα αριστερά. Σας ευχαριστώ για την προσοχή σας.

Ένα κεφαλαίο γράμμα, σύμφωνα με τον ορισμό, είναι ένα στοιχείο κειμένου που αυξάνεται σχετικά σε μέγεθος Σε όλες σχεδόν τις γλώσσες, μια πρόταση αρχίζει με κεφαλαίο. Και ο σχεδιασμός της αρχής μιας παραγράφου με εμφανές κεφαλαίο γράμμα σάς επιτρέπει να δομήσετε το κείμενο και να το κάνετε πιο εύκολα αντιληπτό. Όταν σχεδιάζεται μια σελίδα στο Διαδίκτυο, το κείμενο μπορεί να γραφτεί σύμφωνα με τις προτιμήσεις του συγγραφέα και τους κανόνες της ρωσικής γλώσσας. Μπορείτε επίσης να «αυτοματοποιήσετε» τη σχεδίασή του εισάγοντας ορισμένες «εντολές» σε ένα αρχείο με επέκταση css - ένα φύλλο στυλ - ή να συμπληρώσετε αρχείο htmlτμήμα στυλ. Το CSS συνήθως μελετάται εκτός από το html προκειμένου να αλλάξει γρήγορα ορισμένα στοιχεία σχεδίασης σε όλο το κείμενο ταυτόχρονα.

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

Εάν εφαρμόσετε css, τα κεφαλαία γράμματα στην αρχή κάθε παραγράφου μπορεί να φαίνονται ιδιαίτερα. Για παράδειγμα, ο παρακάτω κώδικας, που έχει εισαχθεί σε html χωρίς παρένθεση, επιτρέπει σε κείμενο μορφοποιημένο με την ετικέτα "p" να κάνει το κεφαλαίο γράμμα - πρώτο γράμμα - μεγαλύτερο - 220% του τυπικού μεγέθους, κίτρινο - η τιμή του χρώματος είναι κίτρινο και γράψτε το με διαφορετική γραμματοσειρά από το υπόλοιπο κείμενο - Γεωργία εναντίον batangche.

()

p: πρώτο γράμμα (οικογένεια γραμματοσειράς: Georgia; μέγεθος γραμματοσειράς: 220%; χρώμα: κίτρινο;)

()

Μπορείτε να πάρετε όμορφα κεφαλαία γράμματα εάν δημιουργήσετε τη δική σας γραμματοσειρά με τη μορφή εικόνων - για κάθε γράμμα υπάρχει μια ξεχωριστή εικόνα, για παράδειγμα, σε παλιό ρωσικό ή γοτθικό στυλ. Μπορούν να σχεδιαστούν στη συνέχεια, στις απαιτούμενες θέσεις, στη θέση του κεφαλαίου γράμματος, μπορείτε να εισαγάγετε τον κωδικό χωρίς παρενθέσεις (). Πρόσθετα χαρακτηριστικά θα είναι το ύψος και το πλάτος - το πλάτος και το ύψος της εικόνας, τα οποία μπορούν να ρυθμιστούν σε pixel για έναν αρμονικό συνδυασμό με το υπόλοιπο κείμενο. Παράδειγμα: (). Παρενθέσεις τριγύρω< и >αφαιρούμε.

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

()

p (οικογένεια γραμματοσειράς: batangche; μέγεθος γραμματοσειράς: 93%;)

p: πρώτο γράμμα (οικογένεια γραμματοσειράς: Kelly+Slab, μέγεθος γραμματοσειράς: 220%, χρώμα: μπλε;)

()

().

Η υπηρεσία Google σάς επιτρέπει να επιλέξετε το ένα ή το άλλο και παρέχει έτοιμους συνδέσμους για εισαγωγή σε html ή css. Εφιστούμε την προσοχή σας στο γεγονός ότι είναι απαραίτητο να επιλέξετε μια ομάδα γραμματοσειρών - Λατινική ή Κυριλλική, επειδή... Σχεδόν όλες οι λατινικές γραμματοσειρές δεν λειτουργούν κατά τη μορφοποίηση κειμένου στη ρωσική γλώσσα. Επί αυτή τη στιγμήΗ μηχανή αναζήτησης παρέχει περίπου 40 τύπους δωρεάν.

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

Τα κεφαλαία 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; text-transform: κεφαλαία γραμματοσειρά: "Monotype Bernard Condensed", serif-right:0.03em;).initialb (περιθώριο-δεξιά:-0.1em;). εμ;)

Ο κώδικας 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.6em;

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

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

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

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

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