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

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

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

(<) style(>)

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

(<)/style(>)

Μπορείτε να πάρετε όμορφα κεφαλαία γράμματα εάν δημιουργήσετε τη δική σας γραμματοσειρά με τη μορφή εικόνων - για κάθε γράμμα υπάρχει μια ξεχωριστή εικόνα, για παράδειγμα, σε παλιό ρωσικό ή γοτθικό στυλ. Μπορούν να σχεδιαστούν στη συνέχεια, στις απαιτούμενες θέσεις, αντί για κεφαλαίο, μπορείτε να εισαγάγετε κωδικό χωρίς παρενθέσεις (<) img src=”ссылка на место, где лежит картинка”(>). Πρόσθετα χαρακτηριστικά θα είναι το ύψος και το πλάτος - το πλάτος και το ύψος της εικόνας, τα οποία μπορούν να ρυθμιστούν σε pixel για να εναρμονιστούν με το υπόλοιπο κείμενο. Παράδειγμα: (<) img src=”ссылка на место, где лежит картинка” heigh=12 px width=6px(>). Παρενθέσεις τριγύρω< и >αφαιρώ.

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

(<) style(>)

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

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

(<)/style(>)

(<)link href="http://fonts.googleapis.com/css?family=Kelly+Slab&subset=latin,cyrillic" rel="stylesheet" type="text/css" (>).

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

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

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

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

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

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

Μπορεί να είναι ενδιαφέρον.

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

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

Γράμματα HTML: κεφαλαία και πεζά

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

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

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

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

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

css code style="text-transform:uppercase" - ορίζει κεφαλαία γράμματα.

Με άλλα λόγια, Τα κεφαλαία γράμματα ορίζονται με CSSγνωρίσματα.

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

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

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

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

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

css code style="letter-spacing:2px" - ορίζει Διάστιχο γραμμάτων CSS.

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

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-γράμμα ( μέγεθος γραμματοσειράς: 3,6 εκ., μετατροπή κειμένου: κεφαλαία, οικογένεια γραμματοσειράς: "Monotype Bernard Condensed", σερίφ, περιθώριο δεξιά: 0,03 εκ.)

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

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

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

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