Παράγραφος Dropcap με τα στοιχεία της πρώτης και πρώτης γραμματοσειράς του CSS

Υπάρχουν μερικοί επιλογείς CSS ή ιδιότητες που νομίζω ότι σπάνια χρησιμοποιούνται στη φύση, αλλά στην πραγματικότητα υπάρχουν ήδη από τις ημέρες του CSS1. μερικά από αυτά περιλαμβάνουν το :πρώτη γραμμή και :πρώτο γράμμα pesudo-στοιχεία.

Πώς να χρησιμοποιήσετε?

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

 p: πρώτο γράμμα font-size: 50px;  

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

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

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

 p: πρώτης γραμμής font-weight: bold;  

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

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

 p: πρώτο-παιδί: πρώτο γράμμα font-size: 50px;  p: first-child: πρώτης γραμμής font-weight: bold;  

Εκεί πηγαίνουμε, η επηρεαζόμενη παράγραφος είναι τώρα μόνο η πρώτη.

Ψευδο-Στοιχεία στην Εργασία

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

 @ γραμματοσειρά font-family: 'HominisNormal'; src: url ('fonts / HOMINIS-webfont.eot'). src: url ('fonts / HOMINIS-webfont.eot; #iefix') μορφή (embedded-opentype), url ('fonts / HOMINIS-webfont.woff' HOMINIS-webfont.ttf ') (' truetype '), μορφή url (' fonts / HOMINIS-webfont.svg # HominisNormal ') (' svg '); γραμματοσειρά-βάρος: κανονική. γραμματοσειρά: κανονικό;  

Στη συνέχεια, ορίσαμε την προεπιλεγμένη οικογένεια γραμματοσειρών για τις παραγράφους.

 p χρώμα: # 555; γραμματοσειρά-οικογένεια: 'Γεωργία', Times, serif; γραμμή-ύψος: 24px;  

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

 p: πρώτο παιδί padding: 30px; όριο-αριστερά: 5px στερεά # 7f7664; φόντο-χρώμα: # f5f4f2; γραμμή-ύψος: 32px; σκιά κουτιού: 5px 5px 0px 0px rgba (127, 118, 100, 0.2); θέση: σχετική.  

Στη συνέχεια, προσθέτουμε ένα καπάκι :πρώτο γράμμα, να μεγεθύνετε το μέγεθος της γραμματοσειράς καθώς και να αντιστοιχίσετε μια νέα οικογένεια γραμματοσειρών σε αυτήν.

 p: πρώτο-παιδί: πρώτο γράμμα font-size: 72px; float: αριστερά. padding: 10px; ύψος: 64px; γραμματοσειρά-οικογένεια: 'HominisNormal'; φόντο-χρώμα: # 7F7664; περιθώριο-δεξιά: 10px; άσπρο χρώμα; ακτίνα ακτίνων: 5px; γραμμή-ύψος: 70px;  

Θα τονίσουμε επίσης την πρώτη γραμμή με :πρώτη γραμμή, όπως έτσι.

 p: πρώτο παιδί: πρώτης γραμμής font-weight: bold; γραμματοσειρά-μέγεθος: 24px; χρώμα: # 7f7664;  

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

 p: πρώτο-παιδί: μετά από background: url ("... /images/paper-clip.png") μη επαναλαμβανόμενη κύλιση 0 0 διαφανής; περιεχόμενο: ""; εμφάνιση: inline-block ύψος: 100px; θέση: απόλυτη; δεξιά: -5px; κορυφή: -35px; πλάτος: 100px;  

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

Μπορείτε επίσης να δείτε το live demo από τους παρακάτω συνδέσμους:

• Προβολή επίδειξης
• Λήψη πηγής

Τελική σκέψη

Όπως αναφέρθηκε προηγουμένως σε αυτή τη θέση, αυτά τα ψευδο-στοιχεία, συγκεκριμένα το :πρώτο γράμμα και :πρώτη γραμμή έχει συμπεριληφθεί από το CSS1, επομένως υποστηρίζονται ακόμη και στον Internet Explorer 8 νωρίτερα.

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