Δημιουργία στυλ χρήσης κεφαλαίων CSS με χρήση ψευδο-στοιχείων

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

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

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

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

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

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

Σώμα μετασχηματισμού κειμένου ( στοίχιση κειμένου: κέντρο; ) h1 (μετατροπή κειμένου: κεφαλαία; ) h3 (μετατροπή κειμένου: κεφαλαία; ) Προσοχή! !Αύριο υπάρχει έκπτωση σε όλα τα καλλυντικά!

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

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

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

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

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

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

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

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

Προεξέχον αρχικό p ( μέγεθος γραμματοσειράς: 26 εικονοστοιχεία; οικογένεια γραμματοσειράς: φαντασία; ) P:first-γράμμα ( /*προδιαγραφή κανόνων στυλ για το πρώτο γράμμα μιας παραγράφου*/ οικογένεια γραμματοσειράς: sant-serif; βάρος γραμματοσειράς: 900 ;

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

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

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

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

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

Αντίο!

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

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

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

20 Δεκεμβρίου 2015

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

πρώτο γράμμα σε δράση

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

Αυτό γίνεται χρησιμοποιώντας το ψευδο-κλάση: πρώτο γράμμα , το οποίο πρέπει να αντιστοιχιστεί στο στοιχείο μέσα στο οποίο βρίσκεται άμεσα το κείμενό μας. Αν όμως κάνουμε αυτό:

P:πρώτο γράμμα (χρώμα: κόκκινο)

Σε ποιες παραγράφους πιστεύετε ότι το πρώτο γράμμα θα γίνει κόκκινο; Σωστά, σε όλες τις παραγράφους. Αλλά χρειαζόμαστε μόνο το πρώτο! Λύσεις:
— αντιστοιχίστε μια κλάση στυλ στην πρώτη παράγραφο και χρησιμοποιήστε αυτόν τον επιλογέα για να σχεδιάσετε το γράμμα
— επιλέξτε την πρώτη παράγραφο χρησιμοποιώντας τις ιδιότητες πρώτου παιδιού ή nth-child

Λύση 1 στον κώδικα:

Abzac1:πρώτο γράμμα (στυλ…)

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

Λύση 2 στον κώδικα:

P:first-child:first-letter (στυλ…)

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

Έτσι, βρήκαμε 2 απλούστερες λύσεις. Διαβάστε αυτό το blog για να μάθετε άλλα χρήσιμα πράγματα.

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

Παράδειγμα p ( μέγεθος γραμματοσειράς: 1em; ) p:first-letter( χρώμα: κόκκινο; μέγεθος γραμματοσειράς:2em; ) Ψευδοστοιχείο::πρώτο γράμμα Αποτέλεσμα

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

Παράδειγμα p ( μέγεθος γραμματοσειράς:1em; ) p:πρώτο γράμμα ( εμφάνιση:μπλοκ; περιθώριο:0,2em 0,2em 0 0; float:αριστερά; χρώμα:κόκκινο; μέγεθος γραμματοσειράς:2,5em; ) Ψευδοστοιχείο:: πρώτο γράμμα

Lorem ipsum dolor sit amet, integer ut a nulla lectus. Scelerisque id vitae ac orci. Pharetra porttitor ipsum vel quisque arcu, ligula sit ut at quisque, suspendisse wisi mollis nam massa. Diam consectetuer nec, a dui eu, dapibus pulvinar et vel morbi viverra morbi, odio eros erat ut accumsan, luctus elementum aptent nulla. Laoreet dolor ridiculus deserunt amet erat, id ultricies, dolor dolor parturient suspendisse pretium porro id, id magnis mi wisi in. Congue a nulla nunc ut nisl, curabitur odio commodo velit ad.

Ac quo non libero. Maecenas diam elit, conubia suspendisse et vulputate mollis et cubilia, nec ligula nulla, fusce ultrices. Ligula quam auctor sem nec, est nulla. Ακέραιος pharetra viverra eget ipsum, wisi facilis consequat ullamcorper, tenetur diam, viverra ac eget vestibulum mauris ac, quisque etiam. Id ultrices, lacus suspendisse nulla.

Αποτέλεσμα

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

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

Προτείνω να το κάνετε αυτό με δύο τρόπους: χρησιμοποιώντας CSS3 και τον κλασικό συνδυασμό CSS+HTML (cross-browser).

Ας προσπαθήσουμε να φτιάξουμε κάτι παρόμοιο τώρα. Ξεκινήστε αυτόματα χρησιμοποιώντας το CSS3.

Πώς να το κάνουμε κεφαλαίο γράμμααυτομάτως

ΣΕ αυτή τη μέθοδοΧρησιμοποιώντας ορισμένες παραμέτρους CSS3 αυτοματοποιούμε τη διαδικασία κεφαλαιοποίησης του πρώτου γράμματος ενός άρθρου. Το μόνο που χρειαζόμαστε είναι να προσθέσουμε την ακόλουθη γραμμή στο αρχείο στυλ (style.css):

p:first-child:first-letter ( float: αριστερά; χρώμα: #0078BF; μέγεθος γραμματοσειράς: 75 px; ύψος γραμμής: 60 px; padding-top: 4px; padding-right: 8px; padding-left: 3px; γραμματοσειρά -οικογένεια:Γεωργία;

p:first-child:first-letter (float : αριστερά ; χρώμα : #0078BF ; μέγεθος γραμματοσειράς : 75 px ; ύψος γραμμής : 60 εικονοστοιχεία ; padding-top : 4 px ; padding-right : 8 px ; padding-px ; font-size : 60 px ; padding-top : 4px ; padding-right : 8px ; padding-px ; font-size : 60px ; padding-top : 4px ; padding-right : 8px ; padding-px ; font-size : 60px ; padding-top : 4px ; padding-right : 8px ; padding-px ;font-size : 60px; -οικογένεια: Γεωργία;

Να εξηγήσω λίγο: αγγλικό γράμμαΤο p (το πρώτο) είναι μια ετικέτα

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

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

Ωστόσο, ο προτεινόμενος κώδικας δεν θα είναι αρκετός, γιατί πρέπει να μάθετε το όνομα της τάξης όπου βρίσκεται αυτή η παράγραφος. Αυτό γίνεται επίσης με δύο τρόπους, τους οποίους περιέγραψα στο παρακάτω βίντεο podcast:

Υπάρχει επίσης ένα μειονέκτημα μιας τέτοιας αυτόματης αντικατάστασης με χρήση CSS3 - τα παλαιότερα προγράμματα περιήγησης δεν υποστηρίζουν αυτή η τεχνολογία. Το ίδιο και για τους ημι-φυλλομετρητές Internet Explorerκαμία υποστήριξη παρόμοιες λειτουργίες. Ελπίζω ότι σύντομα η πλειονότητα των χρηστών του Διαδικτύου θα αλλάξει σε κανονικά προγράμματα περιήγησης που σας επιτρέπουν να εφαρμόσετε πράγματα που δεν ήταν προσβάσιμα στο παρελθόν.

Δημιουργία ενός προγράμματος περιήγησης με κεφαλαία γράμματα με μη αυτόματο τρόπο

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

Για να το εφαρμόσετε αυτό, θα χρειαστεί να γράψετε οποιοδήποτε όνομα κλάσης με τα χαρακτηριστικά από το παραπάνω παράδειγμα στο αρχείο style.css. Θα μοιάζει κάπως έτσι (κατέληξα στην κατηγορία bigletter):

Bigletter ( float: αριστερά; χρώμα: #0078BF; μέγεθος γραμματοσειράς: 75 px; ύψος γραμμής: 60 px; padding-top: 4 px; padding-right: 8 px; padding-left: 3px; font-family: Georgia; )

Bigletter (float: αριστερά; χρώμα: #0078BF; μέγεθος γραμματοσειράς: 75 px; ύψος γραμμής: 60 px; padding-top: 4 px; padding-right: 8 px; padding-left: 3px; mi) γραμματοσειρά: Georgia-;

Εδώ έχουμε όλα τα ίδια χαρακτηριστικά, μόνο που στην αρχή έχει αλλάξει λίγο: Έκανα εγγραφή νέας τάξης και δεν χρησιμοποίησα την ετικέτα p. Γιατί συμβαίνει αυτό - περισσότερα για αυτό αργότερα.