Η υπογράμμιση ενός εγγράφου ή ενός κειμένου θεωρείται πάντα εύκολη. Αν όμως εξετάσουμε την περίπτωση για τους ιστότοπους, είναι εύκολο; Οι περισσότεροι από εμάς θα έλεγαν ναι, αλλά κάνοντας μια οριζόντια γραμμή, συμπεριλαμβανομένων ορισμένων προσαρμοσμένων σχεδίων, αυτό το απλό έργο είναι κουραστικό. Ας ξεκινήσουμε το Journey of Text Decoration χρησιμοποιώντας CSS με τον ακόλουθο τρόπο:
- Τι είναι η Διακόσμηση κειμένου;
- Τύποι διακοσμήσεων κειμένου σε CSS
- Διακόσμηση κειμένου με χρήση CSS: Κωδικός
- Παράλειψη διακόσμησης κειμένου
Τι είναι η Διακόσμηση κειμένου;
Ρυθμίζει την εμφάνιση των διακοσμητικών γραμμών στο κείμενο. Είναι μια στενή ιδιοκτησία για:
- κείμενο-διακόσμηση-γραμμή
- κείμενο-διακόσμηση-χρώμα
- κείμενο-διακόσμηση-στυλ
Καθορίζεται ως μία ή περισσότερες τιμές διαχωρισμένες με το διάστημα που αντιπροσωπεύουν το long handxt-διακόσμηση ιδιότητες.
Σύνταξη:
διακόσμηση κειμένου: || ||
Που,
κείμενο-διακόσμηση-γραμμή: Χρησιμοποιείται για να ορίσετε το είδος της διακόσμησης που χρησιμοποιείται όπωςυπογράμμιση, overline και line-through.
κείμενο-διακόσμηση-χρώμα:Χρησιμοποιείται για τον καθορισμό του χρώματος της διακόσμησης.
κείμενο-διακόσμηση-στυλ: Χρησιμοποιείται για να ορίσετε το στυλ της γραμμής όπωςσυμπαγές, κυματιστό, διάστικτο, διακεκομμένο, διπλό
τι είναι ένα συμβάν σε javascript
Τύποι διακοσμήσεων κειμένου σε CSS
- Περίληψη:
# διακόσμηση {text-decoration: overline} 
- Γραμμή μέσω:
#decoration {text-decoration: line-through}- Υπογραμμίζω:
#decoration {text-decoration: underline}- Συνδυασμός:
#decoration {text-decoration: underline line-through overline}Παραγωγή:
Διακόσμηση κειμένου με χρήση CSS: Κωδικός
Κώδικας:
Κωδικός CSS:
#overline {text-decoration: wavy overline lime} #underover {text-decoration: dashed underline overline} #dotted {text-decoration: underline overline dotted red} #wavy {text-decoration: line-through wavy}Παραγωγή:
Παράλειψη διακόσμησης κειμένου
Μια ιδιότητα που είναι γνωστή ως κείμενο-διακόσμηση-παράλειψη μπορεί επίσης να χρησιμοποιηθεί όπου ένα κείμενο είναι περίγραμμα, γραμμικό και υπογραμμισμένο. Βοηθά στη διακόσμηση του κειμένου. Απλώς καθορίζει τον τρόπο σχεδίασης της γραμμής και της υπογράμμισης όταν περνούν πάνω από τους ανυψωτές και τους κατηφόρους.
#decoration {text-decoration-skip: ink}Οι τιμές που μπορούν να χρησιμοποιηθούν με παράλειψη διακόσμησης κειμένου είναι:
αντικείμενα : (προεπιλογή) η γραμμή παραλείπει τα ενσωματωμένα αντικείμενα, όπως εικόνες ή στοιχεία ενσωματωμένου αποκλεισμού.
κανένας : η γραμμή διασχίζει τα πάντα.
χώροι : Η γραμμή διακόσμησης παραλείπει κενά διαστήματα, χαρακτήρες διαχωρισμού λέξεων και τυχόν κενά διαστήματα με διαστήματα γραμμάτων ή διαστήματα λέξεων.
μελάνι : η γραμμή διακόσμησης παραλείπει τους γλύφους, τους απογόνους ή τους ανερχόμενους.
άκρες : η γραμμή διακόσμησης ξεκινά λίγο μετά το αρχικό άκρο του περιεχομένου και τελειώνει λίγο πριν από την τελική άκρη του περιεχομένου.
κουτί-διακόσμηση : η γραμμή διακόσμησης παραλείπει το κληρονομικό περιθώριο, το περίγραμμα και το κάλυμμα.
Δεδομένου ότι αυτή η ιδιότητα δεν υποστηρίζεται από κανένα πρόγραμμα περιήγησης, ωστόσο δεν υπάρχει επίδειξη, αλλά εδώ είναι ένα παράδειγμα στην παρακάτω εικόνα για το πώς θα μπορούσε να φαίνεται καθεμία από τις τιμές όταν εφαρμοστεί το κείμενο-διακόσμηση-παράλειψη.
Με αυτό, φτάνουμε στο τέλος αυτής της Διακόσμηση κειμένου χρησιμοποιώντας το CSS blog. Αν έχετε απορίες σχετικά με αυτό το θέμα, αφήστε ένα σχόλιο παρακάτω και θα επικοινωνήσουμε μαζί σας.
Ρίξτε μια ματιά στο δικό μας που έρχεται με ζωντανή εκπαίδευση με καθοδήγηση εκπαιδευτή και πραγματική εμπειρία έργου. Αυτή η εκπαίδευση σας κάνει ικανό σε δεξιότητες για να εργαστείτε με τεχνολογίες ιστού back-end και front-end. Περιλαμβάνει εκπαίδευση σε Web Development, jQuery, Angular, NodeJS, ExpressJS και MongoDB.
java μετατρέψτε το δυαδικό σε δεκαδικό
Έχετε μια ερώτηση για εμάς; Παρακαλώ αναφέρετέ το στην ενότητα σχολίων του blog 'Διακόσμηση κειμένου με χρήση CSS' και θα επικοινωνήσουμε μαζί σας.