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

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

Θα παρουσιάσω κάποιες επιλογές για την επίλυση αυτής της εργασίας: Το PHP και το CSS είναι περισσότερο για τα ήδη δημοσιευμένα υλικά όταν καθώς το JQuery θα είναι σε θέση να διορθώσει τη θέση πριν από τη δημοσίευση.

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

Σε php υπάρχει μια συνάρτηση που ονομάζεται " ucfirst.", Το οποίο απλά μετατρέπει το πρώτο σύμβολο χορδών στην κεφαλή, αλλά μείον είναι ότι δεν λειτουργεί αρκετά σωστά με το Cyrillic.

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

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

Το πρώτο γράμμα της συμβολοσειράς στην κεφαλή στο CSS

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

Χρησιμοποιήστε τα εξής:

Με τη βοήθεια ενός ψευδο-στοιχείου " Πρώτο γράμμα.»Και τις ιδιότητες" μετασχηματισμό κειμένου"Έχουμε σχεδιάσει για κάθε πρώτο γράμμα της παραγράφου.

Το πρώτο γράμμα της συμβολοσειράς στην κεφαλή στην JQuery

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

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

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

Σας επιτρέπει να αλλάξετε την περίπτωση των γραμμάτων κειμένου.

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

Παράδειγμα

H3 (μετασχηματισμό κειμένου: κεφαλαίο;) .Lowercase (κείμενο μετασχηματισμό: πεζά) κεφαλαιοποίηση (κείμενο-μετασχηματισμό: κεφαλαιοποίηση))

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

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

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

Αποτέλεσμα

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

H1 (κείμενο μετασχηματισμό: κεφαλαία;)

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

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

σύντομες πληροφορίες

Ονομασίες

	Περιγραφή	Παράδειγμα
<тип>	Καθορίζει τον τύπο της τιμής.	<размер>
A && B.	Οι τιμές θα πρέπει να εμφανίζονται στην καθορισμένη σειρά.	<размер> && <цвет>
Ένα | ΣΙ.	Υποδεικνύει ότι πρέπει να επιλεγεί μόνο μία τιμή από την προτεινόμενη (Α ή Β).	Κανονικός Μικρά καπάκια.
Α || ΣΙ.	Κάθε τιμή μπορεί να χρησιμοποιηθεί ανεξάρτητα ή μαζί με άλλους με αυθαίρετη σειρά.	Πλάτος || μετρώ
	Τιμές ομάδων.	[Καλλιέργεια || Σταυρός]
*	Επαναλάβετε μηδέν ή περισσότερες φορές.	[,<время>]*
+	Επαναλάβετε μία ή περισσότερες φορές.	<число>+
?	Ο καθορισμένος τύπος, η λέξη ή η ομάδα δεν είναι υποχρεωτική.	Ενθεση?
(Α, Β)	Επαναλάβετε τουλάχιστον ένα, αλλά όχι περισσότερο από το b φορές.	<радиус>{1,4}
#	Επαναλάβετε μία ή περισσότερες φορές μέσω του κόμματος.	<время>#

×

Αξίες

Η κεφαλαιοποίηση του πρώτου χαρακτήρα κάθε λέξης στην πρόταση θα είναι κεφάλαιο. Τα υπόλοιπα σύμβολα δεν αλλάζουν το είδος σας. Πεζά Όλοι οι χαρακτήρες κειμένου γίνονται πεζά (πεζά). Με κεφαλαία γράμματα Όλοι οι χαρακτήρες κειμένου γίνονται κεφαλαίοι (κορυφαία μητρώο). Κανένας δεν αλλάζει το μητρώο συμβόλων.

Άμυαλος

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

dIV (μετασχηματισμό κειμένου: Κεφαλαιοποίηση;)

Παράδειγμα

Πολιτιστικό μνημείο του Μεσαίωνα

Το Amazon Lowlland παίρνει ομοιόμορφα μια μικρή ασύρματη ασύρματη γάτες και σκύλους και η Hyosh Baya φημίζεται για κόκκινα κρασιά.

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

Σύκο. 1. Εφαρμογή της ιδιότητας μετασχηματισμού κειμένου

Μοντέλο αντικειμένου

Ενα αντικείμενο.Style.TEXTTRANSFORM.

Προσδιορισμός

Κάθε προδιαγραφή περνά διάφορα στάδια έγκρισης.

• Σύσταση - Προδιαγραφές Εγκεκριμένο W3C και συνιστάται ως πρότυπο.
• Υποψήφια σύσταση ( Πιθανή σύσταση) - Μια ομάδα που είναι υπεύθυνη για το πρότυπο ικανοποιείται καθώς πληροί τους στόχους της, αλλά η βοήθεια της αναπτυξιακής κοινότητας για την εφαρμογή του προτύπου απαιτείται.
• Προτεινόμενη σύσταση ( Προσφέρεται σύσταση) - Σε αυτό το στάδιο, το έγγραφο υποβάλλεται στο συμβουλευτικό συμβούλιο του W3C για τελική έγκριση.
• Το σχέδιο εργασίας (έργο εργασίας) είναι μια πιο ώριμη εκδοχή του σχεδίου μετά από συζήτηση και τροπολογίες για εξέταση από την Κοινότητα.
• Το σχέδιο του επεξεργαστή ( Editorial Chernovik) - Η ακατέργαστη έκδοση του προτύπου μετά την πραγματοποίηση συντάκτη από τον επεξεργαστή του έργου.
• Σχέδιο ( Προδιαγραφή Chernovik) - την πρώτη μαύρη έκδοση του προτύπου.

×

Το κεφαλαίο γράμμα, σύμφωνα με τον ορισμό, είναι ένα στοιχείο κειμένου που αυξάνεται κατά το ποσό των σχετικώς πρακτικά σε όλες τις γλώσσες από το κεφαλαίο γράμμα ξεκινά την προσφορά. Και ο σχεδιασμός της έναρξης της παραγράφου της επένδυσης κεφαλαίου επιτρέπει να διαρθρώσετε το κείμενο και να διευκολύνετε την αντίληψή του. Όταν εκτελείται η σελίδα Internet, το κείμενο μπορεί να γραφτεί σύμφωνα με τις προτιμήσεις του συγγραφέα και τους κανόνες της ρωσικής γλώσσας. Επίσης, ο σχεδιασμός του μπορεί να είναι "αυτοματοποιημένος" κάνοντας ορισμένες "εντολές" σε ένα αρχείο με το φύλλο επέκτασης CSS - ή να συμπληρώσετε το τμήμα στυλ του αρχείου HTML. Το CSS συνήθως μελετάται επιπλέον από το HTML για να αλλάξει γρήγορα κάποια στοιχεία σχεδιασμού ταυτόχρονα σε ολόκληρο το κείμενο.

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

Εάν εφαρμόζετε το CSS, κεφαλαία γράμματα Στην αρχή κάθε παραγράφου μπορεί να εξετάσει με ειδικό τρόπο. Για παράδειγμα, εισάγονται σε HTML χωρίς στρογγυλές βραχίονες, ο παρακάτω κώδικας επιτρέπει το κείμενο που είναι διακοσμημένο από την ετικέτα "P", να κάνει ένα κεφαλαίο γράμμα - πρώτο γράμμα - 220% του Κανονικό μέγεθος, Κίτρινο χρώμα - η τιμή χρώματος είναι κίτρινη, και γράψτε την με μια γραμματοσειρά διαφορετική από το υπόλοιπο κείμενο - Γεωργία έναντι της Batangche.

(<) style(>)

p: Πρώτο γράμμα (Γραμματοσειρά: Γεωργία, Γραμματοσειρά: 220%; Χρώμα: Κίτρινο;)

(<)/style(>)

Όμορφα κεφαλαία γράμματα μπορούν να ληφθούν εάν δημιουργήσετε τη δική σας γραμματοσειρά με τη μορφή εικόνων - σε κάθε γράμμα μια ενιαία εικόνα, για παράδειγμα, στην αρχαία ρωσική ή γοτθική στυλ. Μπορούν να σχεδιαστούν στη συνέχεια στις απαιτούμενες θέσεις στον τόπο της κεφαλαιακής επιστολής που μπορείτε να εισάγετε τον κώδικα χωρίς παρενθέσεις (<) img src=”ссылка на место, где лежит картинка”(>). Τα πρόσθετα χαρακτηριστικά θα είναι ζεύγη και πλάτος - το πλάτος και το ύψος της εικόνας που μπορεί να εγκατασταθεί σε εικονοστοιχεία για έναν αρμονικό συνδυασμό με το υπόλοιπο κείμενο. Παράδειγμα: (<) 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 ιδιότητες Μετασχηματισμό κειμένου. Εάν στο φύλλο στυλ Ρύθμιση της τιμής μετασχηματισμού: Κανένα, το κείμενο θα μοιάζει σαν να το γράψετε. Για να βάλετε όλα τα γράμματα στο πεζά μητρώο, πρέπει να ρυθμίσετε το κείμενο μετασχηματισμό: πεζά τιμή μέσω ενός κόλου και για ένα μητρώο κεφαλαίου - κεφαλαίο. Εγκατάσταση για την ιδιότητα του μετασχηματισμού της αξίας: Το Capitize θα το κάνει έτσι ώστε στην αρχή κάθε λέξης θα υπάρχει ένα κεφαλαίο γράμμα.